{% if userAction == 'list' %}
<div
  class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-person"></i>
    {{ ad_user }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      {% if permissionAddUser == true %}
      <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
              data-bs-target="#addUserModal">
        <i class="bi bi-person-add" aria-label="true"></i> {{ ad_user_add }}
      </button>
      {% endif %}
      {% if permissionEditUser == true %}
      <a class="btn btn-outline-info" href="?action=user&user_action=listallusers">
        <i class="bi bi-people" aria-label="true"></i> {{ list_all_users }}
      </a>
      {% endif %}
    </div>
  </div>
</div>

<div class="row mb-2">
  <div class="col-6 offset-3">
    <form name="user_select" id="user_select" action="?action=user"
          method="post" role="form" class="form_inline" onsubmit="return false;">
      <input type="hidden" id="current_user_id" value="{{ userId }}">
      <div class="card shadow mb-4">
        <h5 class="card-header py-3">
          <i aria-hidden="true" class="bi bi-search"></i> {{ msgSearch }}
        </h5>
        <div class="card-body">
          <div class="form-floating">
            <input type="text" class="form-control" id="pmf-user-list-autocomplete" aria-controls=""
                   name="user_list_search" placeholder="{{ ad_auth_user }}"
                   spellcheck="false" autocomplete="new-password" autocapitalize="off" maxlength="2048"
                   onkeydown="if(event.key === 'Enter') { event.preventDefault(); return false; }">
            <label for="pmf-user-list-autocomplete">{{ ad_auth_user }}</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="row mb-2">

  <div class="col-lg-8">
    <div class="card shadow mb-4">
      <h5 class="card-header py-3" id="user_data_legend">
        <i aria-hidden="true" class="bi bi-person"></i> {{ ad_user_profou }}
      </h5>
        <div class="card-body">
          <input type="hidden" id="last_modified" name="last_modified" value="">
          <input id="update_user_id" type="hidden" name="user_id" value="0">
          <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfToken_updateUserData }}" />

          <div class="row mb-2">
            <label for="auth_source" class="col-lg-4 col-form-label">
              {{ msgAuthenticationSource }}
            </label>
            <div class="col-lg-8">
              <input id="auth_source" class="form-control-plaintext" type="text" value="n/a"
                     readonly>
            </div>
          </div>

          <div class="row mb-2">
            <label for="user_status" class="col-lg-4 col-form-label">
              {{ ad_user_status }}
            </label>
            <div class="col-lg-8">
              <select id="user_status" class="form-select" name="user_status" disabled>
                <option value="active">{{ ad_user_active }}</option>
                <option value="blocked">{{ ad_user_blocked }}</option>
                <option value="protected">{{ ad_user_protected }}</option>
              </select>
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-lg-4 col-form-label" for="display_name">
              {{ msgRealname }}
            </label>
            <div class="col-lg-8">
              <input type="text" id="display_name" name="display_name" value=""
                     class="form-control" required disabled>
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-lg-4 col-form-label" for="email">
              {{ msgEmail }}
            </label>
            <div class="col-lg-8">
              <input type="email" id="email" name="email" value="" class="form-control" required
                     disabled>
            </div>
          </div>

          <div class="row mb-2">
            <div class="offset-lg-4 col-lg-8">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="is_superadmin"
                       name="is_superadmin">
                <label class="form-check-label" for="is_superadmin">
                  {{ ad_user_is_superadmin }}
                </label>
              </div>
            </div>
          </div>

          <div class="row mb-2">
            <div class="offset-lg-4 col-lg-8">
              <a class="btn btn-danger pmf-admin-overwrite-password" data-bs-toggle="modal"
                 href="#pmf-modal-user-password-overwrite">
                {{ ad_user_overwrite_passwd }}
              </a>
            </div>
          </div>

          <div class="row mb-2">
            <div class="offset-lg-4 col-lg-8">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="overwrite_twofactor"
                       name="overwrite_twofactor" disabled>
                <label class="form-check-label" for="overwrite_twofactor">
                  {{ ad_user_overwrite_twofactor }}
                </label>
              </div>
            </div>
          </div>

        </div>
        <div class="card-footer text-end">
          {% if permissionDeleteUser == true %}
          <button class="btn btn-danger disabled" id="pmf-delete-user">
            {{ ad_user_delete }}
          </button>
          {% endif %}
          <button class="btn btn-success disabled" id="pmf-user-save">
            {{ ad_gen_save }}
          </button>
        </div>
    </div>
  </div>

  <div class="col-lg-4" id="userRights">
      <input type="hidden" name="user_id" id="rights_user_id" value="0">
      <input type="hidden" name="pmf-csrf-token" id="pmf-csrf-token-rights" value="{{ csrfToken_updateUserRights }}" />

      <div class="card shadow mb-4">
        <div class="card-header d-flex justify-content-between flex-wrap align-items-center py-3">
          <h5 class="" id="user_rights_legend">
            <i aria-hidden="true" class="bi bi-lock"></i> {{ ad_user_rights }}
          </h5>
          <div class="card-button">
            <button class="btn btn-success" id="pmf-user-rights-save">
              {{ ad_gen_save }}
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="text-center mb-3">
            <button type="button" class="btn btn-primary btn-sm" id="checkAll">
              {{ ad_user_checkall }}
            </button>
            <button type="button" class="btn btn-primary btn-sm" id="uncheckAll">
              {{ ad_user_uncheckall }}
            </button>
          </div>
          {% for right in userRights %}
          <div class="form-check">
            <input id="user_right_{{ right.right_id }}" type="checkbox"
                   name="user_rights[]" value="{{ right.right_id }}"
                   class="form-check-input permission" />
            <label class="form-check-label" for="user_right_{{ right.right_id }}">
              {{ right.name | default('') | permission }}
            </label>
          </div>
          {% endfor %}
        </div>
        <div class="card-footer">
          <div class="card-button text-end">
            <button class="btn btn-success" id="pmf-user-rights-save">
              {{ ad_gen_save }}
            </button>
          </div>
        </div>
      </div>
  </div>
</div>
{% endif %}
{% if userAction == 'listallusers' and permissionEditUser == true %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i class="bi bi-people"></i>
    {{ msgUserList }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <a class="btn btn-outline-primary" href="?action=user">
        <i class="bi bi-three-dots" aria-label="true"></i> {{ ad_user }}
      </a>
      {% if permissionAddUser == true %}
      <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
              data-bs-target="#addUserModal">
        <i class="bi bi-person-add" aria-label="true"></i> {{ ad_user_add }}
      </button>
      {% endif %}
      <button type="button" class="btn btn-outline-info" id="pmf-button-export-users">
        <i class="bi bi-download" aria-label="true"></i> {{ msgExportUsersAsCSV }}
      </button>
    </div>
  </div>
</div>

<table class="table table-striped align-middle" id="pmf-admin-user-table">
  <thead class="thead-dark">
  <tr>
    <th>{{ msgNewContentName }}</th>
    <th>{{ msgNewContentMail }}</th>
    <th>{{ ad_auth_user }}</th>
    <th>{{ ad_user_status }}</th>
    <th>{{ ad_user_is_superadmin }}</th>
    <th>{{ ad_user_is_visible }}</th>
    <th>Actions</th>
  </tr>
  </thead>
  {% if perPage < numUsers %}
  <tfoot>
  <tr>
    <td colspan="8">{{ pagination|raw }}</td>
  </tr>
  </tfoot>
  {% endif %}
  <tbody>
  {% for user in users %}
  <tr class="row_user_id_{{ user.id }}" id="row_user_id_{{ user.id }}">
    <td>{{ user.display_name|raw }}</td>
    <td>
      <a href="mailto:{{ user.email|raw }}">
        {{ user.email|raw }}
      </a>
    </td>
    <td>{{ user.login|raw }}</td>

    <td class="text-center"><i class="fa
    {% if user.status == 'active' %}
    bi-person-fill-check text-success
    {% endif %}
    {% if user.status == 'blocked' %}
    bi-person-fill-slash text-danger
    {% endif %}
    {% if user.status == 'protected' %}
    bi-person-fill-lock text-warning
    {% endif %} icon_user_id_{{ user.id }}"></i></td>
    <td class="text-center">
      <i class="fa {% if user.isSuperAdmin == true %} bi-person-fill-check text-success {% else %} bi-person {% endif %}"</i>
    </td>
    <td class="text-center">
      <i class="fa {% if user.isVisible == true %} bi-person-fill {% else %} bi-person {% endif %}"</i>
    </td>

    <td>
      <a href="?action=user&amp;user_id={{ user.id }}"
         class="btn">
        <i class="bi bi-pencil text-info"></i> {{ ad_user_edit }}
      </a>
      {% if user.status == 'blocked' %}
      <button type="button" class="btn btn-activate-user"
              id="btn_activate_user_id_{{ user.id }}"
              data-csrf-token="{{ csrfToken_activateUser }}"
              data-user-id="{{ user.id }}">
        <i class="bi bi-unlock-fill text-success"
           data-csrf-token="{{ csrfToken_activateUser }}"
           data-user-id="{{ user.id }}"></i>
        {{ ad_news_set_active }}
      </button>
      {% endif %}
      {% if user.status != 'protected' and permissionDeleteUser == true %}
      <button type="button" class="btn btn-delete-user"
              id="btn_user_id_{{ user.id }}"
              data-csrf-token="{{ csrfToken_deleteUser }}"
              data-user-id="{{ user.id }}"
              data-username="{{ user.login }}">
        <i class="bi bi-trash text-danger" data-csrf-token="{{ csrfToken_deleteUser }}"
           data-user-id="{{ user.id }}"></i>
        {{ ad_user_delete }}
      </button>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}

<!-- Modal to overwrite password -->
<div class="modal fade" id="pmf-modal-user-password-overwrite">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4>{{ ad_menu_passwd }}</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="#" method="post" accept-charset="utf-8" autocomplete="off">
          <input type="hidden" name="csrf" id="modal_csrf"
                 value="{{ csrfToken_overwritePassword }}" />
          <input type="hidden" name="user_id" id="modal_user_id" value="{{ userId }}" />

          <div class="row mb-2">
            <label class="col-5 col-form-label" for="npass">
              {{ ad_passwd_new }}
            </label>
            <div class="col-7">
              <div class="input-group">
                <input type="password" autocomplete="off" name="npass" id="npass"
                       class="form-control" data-pmf-toggle="npass_togglePassword" required>
                <span class="input-group-text" id="npass_togglePassword">
                                    <i class="bi bi-eye-slash" id="npass_togglePassword_icon"></i>
                                </span>
              </div>
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-5 col-form-label" for="bpass">
              {{ ad_passwd_con }}
            </label>
            <div class="col-7">
              <div class="input-group">
                <input type="password" autocomplete="off" name="bpass" id="bpass"
                       class="form-control" data-pmf-toggle="bpass_togglePassword" required>
                <span class="input-group-text" id="bpass_togglePassword">
                                    <i class="bi bi-eye-slash" id="bpass_togglePassword_icon"></i>
                                </span>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="pmf-user-password-overwrite-action">
          {{ ad_user_overwrite_passwd }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal to add a new user -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addUserModalLabel">
          <i aria-hidden="true" class="bi bi-person-plus"></i> {{ ad_adus_adduser }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="#" method="post" role="form" id="pmf-add-user-form" class="needs-validation"
              autocomplete="off"
              novalidate>

          <input type="hidden" id="add_user_csrf" name="add_user_csrf"
                 value="{{ csrfToken_addUser }}" />

          <div class="alert alert-danger d-none" id="pmf-add-user-error-message"></div>

          <div class="row mb-2">
            <label class="col-lg-4 col-form-label" for="add_user_name">
              {{ ad_adus_name }}
            </label>
            <div class="col-lg-8">
              <input type="text" name="add_user_name" id="add_user_name" required tabindex="1"
                     class="form-control">
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-lg-4 col-form-label"
                   for="add_user_realname">{{ msgRealname }}</label>
            <div class="col-lg-8">
              <input type="text" name="add_user_realname" id="add_user_realname" required tabindex="2"
                     class="form-control">
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-lg-4 col-form-label" for="add_user_email">
              {{ msgEmail }}
            </label>
            <div class="col-lg-8">
              <input type="email" name="user_email" id="add_user_email" required tabindex="3"
                     class="form-control">
            </div>
          </div>

          <div class="row mb-2">
            <div class="col-lg-4"></div>
            <div class="col-lg-8">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="add_user_automatic_password"
                       name="add_user_automatic_password" value="">
                <label class="form-check-label" for="add_user_automatic_password">
                  {{ ad_add_user_change_password }}
                </label>
              </div>
            </div>
          </div>

          <div id="add_user_show_password_inputs">
            <div class="row mb-2">
              <label class="col-lg-4 col-form-label"
                     for="add_user_password">{{ ad_adus_password }}</label>
              <div class="col-lg-8">
                <div class="input-group">
                  <input type="password" name="add_user_password" id="add_user_password"
                         class="form-control" minlength="8"
                         autocomplete="off" tabindex="4"
                         data-pmf-toggle="add_user_password_togglePassword">
                  <span class="input-group-text" id="add_user_password_togglePassword">
                                            <i class="bi bi-eye-slash" id="add_user_password_togglePassword_icon"></i>
                                        </span>
                </div>
              </div>
            </div>

            <div class="row mb-2">
              <label class="col-lg-4 col-form-label"
                     for="add_user_password_confirm">{{ ad_passwd_con }}</label>
              <div class="col-lg-8">
                <div class="input-group">
                  <input type="password" name="add_user_password_confirm"
                         id="add_user_password_confirm" minlength="8"
                         class="form-control" autocomplete="off" tabindex="5"
                         data-pmf-toggle="add_user_password_confirm_togglePassword">
                  <span class="input-group-text" id="add_user_password_confirm_togglePassword">
                                            <i class="bi bi-eye-slash"
                                               id="add_user_password_confirm_togglePassword_icon"></i>
                                        </span>
                </div>
              </div>
            </div>
          </div>

          {% if userIsSuperAdmin == true %}
            <div class="row mb-2">
              <div class="col-lg-4"></div>
              <div class="col-lg-8">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="add_user_is_superadmin"
                         name="user_is_superadmin">
                  <label class="form-check-label" for="add_user_is_superadmin">
                    {{ ad_user_is_superadmin }}
                  </label>
                </div>
              </div>
            </div>
          {% endif %}

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          {{ ad_gen_cancel }}
        </button>
        <button type="button" class="btn btn-primary" id="pmf-add-user-action">
          {{ ad_gen_save }}
        </button>
      </div>
    </div>
  </div>
</div>

{% if permissionDeleteUser == true %}
<!-- Modal to confirm deleting a user -->
<div class="modal fade" id="pmf-modal-user-confirm-delete">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4><i class="bi bi-exclamation-triangle"></i> {{ msgWarning }}</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="#" method="post" accept-charset="utf-8" autocomplete="off">
          <input type="hidden" name="csrf" id="csrf-token-delete-user"
                 value="{{ csrfToken_deleteUser }}" />
          <input type="hidden" name="user_id" id="pmf-user-id-delete" value="" />
          <input type="hidden" name="source_page" id="source_page" value="" />

          <div class="row mb-2">
            <p>{{ ad_user_deleteUser }} '<span id="pmf-username-delete"></span>'?</p>
          </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">
          {{ ad_gen_no }}
        </button>
        <button class="btn btn-danger" id="pmf-delete-user-yes" data-bs-dismiss="modal">
          {{ ad_gen_yes }}
        </button>
      </div>
    </div>
  </div>
</div>
{% endif %}
