{% if groupAction == 'add' %}
<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-people-fill"></i>
    {{ ad_group_add }}
  </h1>
</div>

<div class="row">
  <div class="col-lg-12">
    <div id="user_message"><?= $message ?></div>
    <form name="group_create" action="?action=group&amp;group_action=addsave" method="post">
      <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfAddGroup }}">

      <div class="row mb-2">
        <label class="col-lg-3 col-form-label" for="group_name">
          {{ ad_group_name }}
        </label>
        <div class="col-lg-3">
          <input type="text" name="group_name" id="group_name" autofocus class="form-control"
                 value="{{ groupName }}" tabindex="1">
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-3 col-form-label" for="group_description">
          {{ ad_group_description }}
        </label>
        <div class="col-lg-3">
            <textarea name="group_description" id="group_description" cols="15" rows="3" tabindex="2"
                      class="form-control"
            >{{ groupDescription }}</textarea>
        </div>
      </div>

      <div class="row mb-2">
        <div class="col-lg-3 offset-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="group_auto_join" id="group_auto_join" value="1"
                   tabindex="3" {{ autoJoinCheckbox }}>
            <label class="form-check-label" for="group_auto_join">
              {{ ad_group_autoJoin }}
            </label>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-6 text-end">
          <button class="btn btn-info" type="reset" name="cancel">
            {{ ad_gen_cancel }}
          </button>
          <button class="btn btn-primary" type="submit">
            {{ ad_gen_save }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endif %}
{% if groupAction == '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-people-fill"></i>
    {{ ad_menu_group_administration }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <a class="btn btn-outline-success" href="?action=group&amp;group_action=add">
        <i aria-hidden="true" class="bi bi-people-fill"></i>
        {{ ad_group_add_link }}
      </a>
    </div>
  </div>
</div>

<div id="user_message">{{ message|raw }}</div>

<div class="row">

  <div class="col-lg-4" id="group_list">
    <div class="card shadow mb-4">
      <form id="group_select" name="group_select" action="?action=group&amp;group_action=delete_confirm"
            method="post">
        <h5 class="card-header py-3">
          <i aria-hidden="true" class="bi bi-people-fill"></i> {{ ad_groups }}
        </h5>
        <div class="card-body">
          <select name="group_list_select" id="group_list_select" class="form-select"
                  size="10" tabindex="1">
          </select>
        </div>
        <div class="card-footer">
          <div class="card-button text-end">
            <button id="deleteGroup" class="btn btn-danger" type="submit" disabled>
              {{ ad_gen_delete }}
            </button>
          </div>
        </div>
      </form>
    </div>

    <div id="group_data" class="card shadow mb-4">
      <h5 class="card-header py-3">
        <i class="bi bi-info-circle" aria-hidden="true"></i> {{ ad_group_details }}
      </h5>
      <form action="?action=group&group_action=update_data" method="post">
        <input id="update_group_id" type="hidden" name="group_id" value="0">
        <div class="card-body">
          <div class="row mb-2">
            <label class="col-4 col-form-label" for="update_group_name">
              {{ ad_group_name }}
            </label>
            <div class="col-8">
              <input id="update_group_name" type="text" name="name" class="form-control" autocomplete="off" tabindex="1"
                     value="{{ groupName }}">
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-4 col-form-label" for="update_group_description">
              {{ ad_group_description }}
            </label>
            <div class="col-8">
                <textarea id="update_group_description" name="description" class="form-control" rows="3" tabindex="2"
                >{{ groupDescription }}</textarea>
            </div>
          </div>
          <div class="row mb-2">
            <div class="offset-4">
              <div class="form-check">
                <input id="update_group_auto_join" type="checkbox" name="auto_join" value="1"
                       class="form-check-input" tabindex="3" {{ autoJoinCheckbox }}>
                <label class="form-check-label" for="update_group_auto_join">
                  {{ ad_group_autoJoin }}
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="card-button text-end">
            <button id="saveGroupDetails" class="btn btn-primary" type="submit" disabled>
              {{ ad_gen_save }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="col-lg-4" id="groupMemberships">
    <form id="group_membership" name="group_membership" method="post"
          action="?action=group&amp;group_action=update_members">
      <input id="update_member_group_id" type="hidden" name="group_id" value="0">
      <div class="card shadow mb-4">
        <h5 class="card-header py-3">
          <i aria-hidden="true" class="bi bi-person-vcard"></i> {{ ad_group_membership }}
        </h5>
        <div class="card-body">
          <div class="row">
            <div class="text-center">
                <span class="select_all">
                  <button type="button" class="btn btn-primary btn-sm" id="select_all_group_user_list">
                      <i aria-hidden="true" class="bi bi-person-fill-add"></i>
                  </button>
                </span>
              <span class="unselect_all">
                  <button type="button" class="btn btn-primary btn-sm" id="unselect_all_group_user_list">
                      <i aria-hidden="true" class="bi bi-person-fill-slash"></i>
                  </button>
                </span>
            </div>
          </div>

          <div class="row">
            <select id="group_user_list" class="form-control" size="7"
                    multiple>
              <option value="0">...user list...</option>
            </select>
          </div>

          <div class="row">
            <div class="text-center mt-2">
              <input class="btn btn-success pmf-add-member" type="button"
                     value="{{ ad_group_addMember }}" id="groupAddMember" disabled>
              <input class="btn btn-danger pmf-remove-member" type="button"
                     value="{{ ad_group_removeMember }}" id="groupRemoveMember" disabled>
            </div>
          </div>
        </div>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <i aria-hidden="true" class="bi bi-user-circle"></i> {{ ad_group_members }}</li>
        </ul>

        <div class="card-body">
          <div class="row">
            <div class="text-center">
                <span class="select_all">
                    <button type="button" class="btn btn-primary btn-sm" id="select_all_members">
                        <i aria-hidden="true" class="bi bi-person-fill-add"></i>
                    </button>
                </span>
              <span class="unselect_all">
                  <button type="button" class="btn btn-primary btn-sm" id="unselect_all_members">
                      <i aria-hidden="true" class="bi bi-person-fill-slash"></i>
                  </button>
                </span>
            </div>
          </div>

          <div class="row">
            <select id="group_member_list" name="group_members[]" class="form-control" multiple size="7">
              <option value="0">...member list...</option>
            </select>
          </div>
        </div>
        <div class="card-footer">
          <div class="card-button text-end">
            <button id="saveMembersList" class="btn btn-primary" type="submit" disabled>
              {{ ad_gen_save }}
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="col-lg-4" id="groupDetails">

    <div id="groupRights" class="card shadow mb-4">
      <form id="rightsForm" action="?action=group&amp;group_action=update_rights" method="post">
        <input id="rights_group_id" type="hidden" name="group_id" value="0">
        <h5 class="card-header py-3" id="user_rights_legend">
          <i aria-hidden="true" class="bi bi-lock"></i> {{ ad_group_rights }}
        </h5>

        <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 rightData %}
          <div class="form-check">
            <input id="group_right_{{ right.right_id }}" type="checkbox"
                   name="group_rights[]" value="{{ right.right_id }}"
                   class="form-check-input permission" disabled>
            <label class="form-check-label" for="group_right_{{ right.right_id }}">
              {{ right.name | default('') | permission }}
            </label>
          </div>
          {% endfor %}
        </div>
        <div class="card-footer">
          <div class="card-button text-end">
            <button id="saveGroupRights" class="btn btn-primary" type="submit" disabled>
              {{ ad_gen_save }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}

{% if showDeleteGroupForm is defined %}
<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-people-fill"></i>
    {{ ad_group_deleteGroup }} "{{ groupName }}"
  </h1>
</div>

<div class="row">
  <div class="col-lg-12">
    <p>{{ ad_group_deleteQuestion }}</p>
    <form action="?action=group&amp;group_action=delete" method="post">
      <input type="hidden" name="group_id" value="{{ groupId }}">
      <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfDeleteGroup }}">
      <p>
        <button class="btn btn-inverse" type="submit" name="cancel">
          {{ ad_gen_no }}
        </button>
        <button class="btn btn-primary" type="submit">
          {{ ad_gen_yes }}
        </button>
      </p>
    </form>
  </div>
</div>
{% endif %}
