{% extends '@admin/index.twig' %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
    <h1 class="h2">
      <i aria-hidden="true" class="bi bi-people-fill"></i>
      {{ 'ad_menu_group_administration' | translate }}
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group mr-2">
        <a class="btn btn-outline-success" href="./group/add">
          <i aria-hidden="true" class="bi bi-people-fill"></i>
          {{ 'ad_group_add_link' | translate }}
        </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="./group/confirm"
              method="post">
          <h5 class="card-header py-3">
            <i aria-hidden="true" class="bi bi-people-fill"></i> {{ 'ad_groups' | translate }}
          </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' | translate }}
              </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' | translate }}
        </h5>
        <form action="./group/update" method="post">
          <input type="hidden" name="pmf-csrf-token" value="{{ csrfTokenUpdateGroup }}">
          <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' | translate }}
              </label>
              <div class="col-8">
                <input id="update_group_name" type="text" name="name" class="form-control" autocomplete="off"
                       tabindex="1" value="{{ groupName }}" maxlength="25" required>
              </div>
            </div>
            <div class="row mb-2">
              <label class="col-4 col-form-label" for="update_group_description">
                {{ 'ad_group_description' | translate }}
              </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' | translate }}
                  </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' | translate }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="col-lg-4" id="groupMemberships">
      <form id="group_membership" name="group_membership" method="post" action="./group/update/members">
        <input type="hidden" name="pmf-csrf-token" value="{{ csrfTokenUpdateGroupMembers }}">
        <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' | translate }}
          </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' | translate }}" id="groupAddMember" disabled>
                <input class="btn btn-danger pmf-remove-member" type="button"
                       value="{{ 'ad_group_removeMember' | translate }}" 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' | translate }}</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' | translate }}
              </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="./group/update/permissions" method="post">
          <input type="hidden" name="pmf-csrf-token" value="{{ csrfTokenUpdateGroupPermissions }}">
          <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' | translate }}
          </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' | translate }}
              </button>
              <button type="button" class="btn btn-primary btn-sm" id="uncheckAll">
                {{ 'ad_user_uncheckall' | translate }}
              </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' | translate }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}