{{define "admin/groups_list.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-page">
{{template "admin_flash" .}}
<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-group"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.groups.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{html (T "admin.groups.desc_html")}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <button type="button" class="btn btn-primary btn-sm js-admin-group-create"><i class="bx bx-plus me-1"></i>{{T "admin.groups.btn_create"}}</button>
  </div>
</header>

<div class="card cs-admin-section mb-3 cs-admin-section--toolbar">
  <div class="cs-admin-section__body py-2 px-3">
    <span class="small text-muted">{{T "admin.groups.count_prefix"}} {{len .Data.Rows}} {{T "admin.groups.count_suffix"}}</span>
  </div>
</div>

<div class="card cs-admin-section">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0 small">
      <thead class="table-light"><tr>
        <th class="text-nowrap">{{T "admin.groups.col_id"}}</th>
        <th class="text-nowrap">{{T "admin.groups.col_slug"}}</th>
        <th>{{T "admin.groups.col_name"}}</th>
        <th>{{T "admin.groups.col_desc"}}</th>
        <th class="text-nowrap">{{T "admin.groups.col_scope"}}</th>
        <th class="text-nowrap text-end">{{T "admin.groups.col_members"}}</th>
        <th class="text-nowrap text-end">{{T "admin.groups.col_perms"}}</th>
        <th class="text-nowrap">{{T "admin.groups.col_sort"}}</th>
        <th class="text-nowrap">{{T "admin.groups.col_status"}}</th>
        <th class="text-end text-nowrap" style="width:3.5rem">{{T "admin.groups.col_actions"}}</th>
      </tr></thead>
      <tbody>
      {{range .Data.Rows}}
      {{$id := index . "id"}}{{$gid := asInt $id}}{{$uc := asInt (index . "user_count")}}
      <tr>
        <td class="text-muted font-monospace">{{$id}}{{if eq $gid 1}} <span class="badge bg-dark">{{T "admin.groups.badge_system"}}</span>{{end}}</td>
        <td><code class="small">{{index . "slug"}}</code></td>
        <td class="fw-medium">{{index . "name"}}</td>
        <td class="text-break" style="max-width:14rem">{{if index . "description"}}{{index . "description"}}{{else}}<span class="text-muted">—</span>{{end}}</td>
        <td>{{if eq (asInt (index . "categories_scope_mode")) 2}}<span class="badge bg-info text-dark">{{T "admin.groups.scope_whitelist"}}</span>{{else}}<span class="badge bg-secondary">{{T "admin.groups.scope_all"}}</span>{{end}}</td>
        <td class="text-end">{{index . "user_count"}}</td>
        <td class="text-end">{{index . "perm_count"}}</td>
        <td>{{index . "sort_order"}}</td>
        <td>{{if eq (asInt (index . "status")) 1}}<span class="badge bg-success">{{T "admin.groups.status_on"}}</span>{{else}}<span class="badge bg-secondary">{{T "admin.groups.status_off"}}</span>{{end}}</td>
        <td class="text-end">
          <div class="dropdown d-inline-block">
            <button type="button" class="btn btn-sm btn-light border rounded-circle p-2" style="width:2rem;height:2rem" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false" title="{{T "admin.groups.actions"}}">
              <i class="bx bx-dots-vertical-rounded fs-5 lh-1"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 py-1">
              <li>
                <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-admin-group-edit"
                  data-id="{{$id}}"
                  data-slug="{{index . "slug"}}"
                  data-name="{{index . "name"}}"
                  data-description="{{index . "description"}}"
                  data-categories_scope_mode="{{index . "categories_scope_mode"}}"
                  data-sort_order="{{index . "sort_order"}}"
                  data-status="{{index . "status"}}">
                  <i class="bx bx-edit-alt text-primary"></i><span>{{T "admin.groups.edit"}}</span>
                </button>
              </li>
              {{if and (ne $gid 1) (eq $uc 0)}}
              <li><hr class="dropdown-divider my-1"></li>
              <li>
                <form method="post" action="/admin/groups" class="cs-admin-ajax-form mb-0" data-cs-confirm="{{T "admin.groups.confirm_delete"}}">
                  <input type="hidden" name="_action" value="delete">
                  <input type="hidden" name="id" value="{{$id}}">
                  <button type="submit" class="dropdown-item d-flex align-items-center gap-2 text-danger"><i class="bx bx-trash"></i><span>{{T "admin.groups.delete"}}</span></button>
                </form>
              </li>
              {{end}}
            </ul>
          </div>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="10" class="text-center text-muted py-4">{{T "admin.groups.empty"}}</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>

<script>
(function () {
  var L = {
    modalMissing: {{jsString (T "admin.groups.modal_missing")}},
    createHint: {{jsString (T "admin.groups.create_hint")}},
    labelSlug: {{jsString (T "admin.groups.label_slug")}},
    labelName: {{jsString (T "admin.groups.label_name")}},
    labelDesc: {{jsString (T "admin.groups.label_desc")}},
    labelScope: {{jsString (T "admin.groups.label_scope")}},
    scopeAll: {{jsString (T "admin.groups.scope_opt_all")}},
    scopeWl: {{jsString (T "admin.groups.scope_opt_wl")}},
    labelSort: {{jsString (T "admin.groups.label_sort")}},
    labelStatus: {{jsString (T "admin.groups.label_status")}},
    statusOn: {{jsString (T "admin.groups.status_on")}},
    statusOff: {{jsString (T "admin.groups.status_off")}},
    btnCreate: {{jsString (T "admin.groups.btn_create_submit")}},
    createTitle: {{jsString (T "admin.groups.create_title")}},
    slugRo: {{jsString (T "admin.groups.slug_readonly")}},
    btnSave: {{jsString (T "admin.groups.btn_save")}},
    editPrefix: {{jsString (T "admin.groups.edit_title_prefix")}}
  };
  function esc(t) {
    return String(t == null ? '' : t)
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;');
  }
  function openForm(title, html) {
    if (window.layer && typeof window.layer.open === 'function') {
      window.layer.open({
        type: 1,
        title: title,
        area: ['min(520px, 94vw)', 'auto'],
        shadeClose: true,
        content: html
      });
      return;
    }
    alert(L.modalMissing);
  }
  $(document).on('click', '.js-admin-group-create', function () {
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap p-3">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/groups">'
      + '<input type="hidden" name="_action" value="create">'
      + '<p class="admin-form-modal-hint mb-3">' + L.createHint + '</p>'
      + '<div class="mb-3"><label class="form-label">' + L.labelSlug + '</label>'
      + '<input class="form-control form-control-sm" name="slug" required autocomplete="off" placeholder="registered_member"></div>'
      + '<div class="mb-3"><label class="form-label">' + L.labelName + '</label>'
      + '<input class="form-control form-control-sm" name="name" required maxlength="64" autocomplete="off"></div>'
      + '<div class="mb-3"><label class="form-label">' + L.labelDesc + '</label>'
      + '<textarea class="form-control form-control-sm" name="description" rows="2" maxlength="255"></textarea></div>'
      + '<div class="row g-2 mb-3">'
      + '<div class="col-sm-6"><label class="form-label">' + L.labelScope + '</label>'
      + '<select class="form-select form-select-sm" name="categories_scope_mode">'
      + '<option value="1">' + L.scopeAll + '</option>'
      + '<option value="2">' + L.scopeWl + '</option>'
      + '</select></div>'
      + '<div class="col-sm-3"><label class="form-label">' + L.labelSort + '</label>'
      + '<input class="form-control form-control-sm" type="number" name="sort_order" value="50"></div>'
      + '<div class="col-sm-3"><label class="form-label">' + L.labelStatus + '</label>'
      + '<select class="form-select form-select-sm" name="status"><option value="1">' + L.statusOn + '</option><option value="0">' + L.statusOff + '</option></select></div>'
      + '</div>'
      + '<div class="d-flex justify-content-end gap-2"><button type="submit" class="btn btn-primary btn-sm">' + L.btnCreate + '</button></div>'
      + '</form></div>';
    openForm(L.createTitle, html);
  });
  $(document).on('click', '.js-admin-group-edit', function () {
    var btn = $(this);
    var id = String(btn.data('id') || '');
    var slug = String(btn.data('slug') || '');
    var name = String(btn.data('name') || '');
    var desc = btn.attr('data-description');
    if (typeof desc === 'undefined' || desc === false) desc = '';
    var cm = String(btn.data('categories_scope_mode') != null ? btn.data('categories_scope_mode') : '1');
    var sort = String(btn.data('sort_order') != null ? btn.data('sort_order') : '0');
    var st = String(btn.data('status') != null ? btn.data('status') : '1');
    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap p-3">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/groups">'
      + '<input type="hidden" name="_action" value="update">'
      + '<input type="hidden" name="id" value="' + esc(id) + '">'
      + '<div class="mb-3"><label class="form-label">' + L.slugRo + '</label>'
      + '<div class="form-control form-control-sm bg-light text-muted">' + esc(slug) + '</div></div>'
      + '<div class="mb-3"><label class="form-label">' + L.labelName + '</label>'
      + '<input class="form-control form-control-sm" name="name" required maxlength="64" value="' + esc(name) + '" autocomplete="off"></div>'
      + '<div class="mb-3"><label class="form-label">' + L.labelDesc + '</label>'
      + '<textarea class="form-control form-control-sm" name="description" rows="2" maxlength="255">' + esc(desc) + '</textarea></div>'
      + '<div class="row g-2 mb-3">'
      + '<div class="col-sm-6"><label class="form-label">' + L.labelScope + '</label>'
      + '<select class="form-select form-select-sm" name="categories_scope_mode">'
      + '<option value="1"' + (cm === '1' ? ' selected' : '') + '>' + L.scopeAll + '</option>'
      + '<option value="2"' + (cm === '2' ? ' selected' : '') + '>' + L.scopeWl + '</option>'
      + '</select></div>'
      + '<div class="col-sm-3"><label class="form-label">' + L.labelSort + '</label>'
      + '<input class="form-control form-control-sm" type="number" name="sort_order" value="' + esc(sort) + '"></div>'
      + '<div class="col-sm-3"><label class="form-label">' + L.labelStatus + '</label>'
      + '<select class="form-select form-select-sm" name="status">'
      + '<option value="1"' + (st === '1' ? ' selected' : '') + '>' + L.statusOn + '</option>'
      + '<option value="0"' + (st === '0' ? ' selected' : '') + '>' + L.statusOff + '</option>'
      + '</select></div>'
      + '</div>'
      + '<div class="d-flex justify-content-end gap-2"><button type="submit" class="btn btn-primary btn-sm">' + L.btnSave + '</button></div>'
      + '</form></div>';
    openForm(L.editPrefix + id, html);
  });
})();
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}