details.jade

template
  .row
    .col-xs-12.tc.tl-m
      a.btn.btn-light-navy(route-href='route: users')
        img.icon.inline.inline-left(svg src="assets/img/icons/arrow-left.svg")/ User List
      .btn-group
        button.btn(if.bind="user_permissions.users_update"
          disabled.bind="editMode"
          click.delegate="edit()"
          data-test='edit-user-button')
          img.icon.inline.inline-left(svg src='assets/img/icons/pencil.svg')/ Edit User Details
        a.btn(if.bind="isResetPasswordVisible"
          click.delegate='resetUsersPassword()'
          data-test='reset-password-button') Reset Password
        a.btn.btn-red(if.bind="isDeleteUserVisible"
          click.delegate='deleteUser()'
          data-test='delete-user') Delete User
        a.btn.btn-red(if.bind='isApproveUserVisible'
          click.delegate='rejectUser()') Reject User
        a.btn(if.bind='isApproveUserVisible'
          click.delegate='approveUser()') Approve User
        impersonate(user.bind="user")

  .row
    .col-xs-12.col-lg-8
      form.card(role="form"
        name='userDetailsForm'
        submit.delegate="save()"
        reset.delegate="edit()"
        class.one-time="user_permissions.users_update ? '' : 'inline-edit'")
        save(edit_mode.bind="editMode")
        .card-title
          h3.heading #${user.id}: ${user.first_name} ${user.last_name}: ${user.state_name}
        .card-content.row
          .col-xs-12(class.bind="isCompanyVisible ? 'col-md-8' : ''")
            .row
              .col-xs-12
                h4 Contact Information
              .col-md-6
                st-select(required.bind="true"
                  disabled.bind="!editMode"
                  value.bind="user.user_type"
                  default-selection="Select a Type"
                  options.bind="user_types[userTypeFilter]"
                  label="User Type")
              .col-md-6
                st-select(required.bind="true"
                  disabled.bind="!canEditRole"
                  value.bind="user.role"
                  options.bind="user_roles"
                  label="Role")
              .col-md-6
                st-input(required.bind="true"
                  label="First Name"
                  readonly.bind="!editMode"
                  value.bind="user.first_name"
                  data-test="first-name")
              .col-md-6
                st-input(required.bind="true"
                  label="Last Name"
                  readonly.bind="!editMode"
                  value.bind="user.last_name"
                  data-test="last-name")
              .col-md-6
                st-input(type="email"
                  required.bind='isEmailRequired'
                  label="Email"
                  readonly.bind="!editMode"
                  value.bind="user.email"
                  data-test="email")
              .col-md-6(if.bind="new_password")
                st-input(readonly.bind="true"
                  label="Password"
                  value.bind='new_password'
                  data-test='user-password')
              .col-md-6(if.bind="isCellPhoneVisible")
                st-input(phone
                  type="tel"
                  label="Cell Phone"
                  required.bind='isCellPhoneRequired'
                  readonly.bind="!editMode"
                  value.bind="user.cell_phone"
                  data-test="cell-phone")
              .col-md-6(if.bind="isPhoneVisible")
                .row.small-gutter
                  .col-xs-8
                    st-input(phone
                      type="tel"
                      label="Phone"
                      required.bind="isPhoneVisible"
                      readonly.bind="!editMode"
                      value.bind="user.phone"
                      data-test="phone")
                  .col-xs-4
                    st-input(readonly.bind="!editMode"
                      label="Extension"
                      value.bind="user.phone_ext"
                      type="number"
                      min="0")
            .row
              .col-md-6(if.bind="user.rejected")
                input#rejected(type="checkbox"
                  disabled
                  checked.bind="user.rejected")
                label(for="rejected") Rejected: ${user.rejected_at | dateFormat: dateFormat}
              .col-md-6(if.bind="user.approved")
                input#approved_at(type="checkbox"
                  disabled
                  checked.bind="user.approved")
                label(for="approved_at") Approved: ${user.approved_at | dateFormat: dateFormat}
              .col-md-6(if.bind="user.confirmed_at")
                input#confirmed(type="checkbox"
                  disabled
                  checked.bind="user.confirmed.value")
                label(for="confirmed") ${user.confirmed.value ? 'Confirmed:' : 'Not Confirmed'} ${user.confirmed_at | dateFormat: dateFormat}
          .col-xs-12.col-md-4(if.bind="isCompanyVisible")
            company-information(user.bind="user"
              company-id.bind="user.application_id"
              user-type.bind="userTypeFilter"
              edit-mode.bind="editMode")
      .row(if.one-time="isCurrentUserAdmin")
        compose(view-model='components/notes'
          model.bind="{heading: 'User Notes', notes: user.notes, credentials: { type: 'User', id: user.id } }")

    .col-xs-12.col-lg-4
      .spinner(if.bind="is_loading")
      p.text-error(repeat.for="error of loadingErrors | objectValues") ${error}
      p.text-success(if.bind='loadingSuccess') ${loadingSuccess}
      .card.row
        .card-content
          compose(view-model="pages/users/components/map"
            if.bind="isMapVisible"
            model.bind="{locations: user.driver_locations, size: 'sidebar', user_id: user.id, is_tracking: user.location_enable}")
          compose(view-model='components/sidebar/sms'
            if.bind="['driver', 'owner_operator'].includes(user.user_type)"
            model.bind="{user_id: user.id, first_name: user.first_name}")

  .row(if.bind='isHistoricalLocationVisible')
    .col-xs-12
      compose(view-model='pages/users/components/driver-locations'
        model.bind='{heading: "Driver Locations", driver_locations: user.driver_locations, user_id: user.id, collapsed: true}')
  .row(if.bind='isLoggingVisible')
    .col-xs-12
      compose(view-model='components/logs'
        model.bind='{heading: "User Logs", object_type: "User", object: user, collapsed: true}')