{{define "admin/users.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-user" "Title" (T "admin.users.title") "Desc" (T "admin.users.desc"))}}

<div class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-group"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.users.list"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.users.count_prefix"}} {{len (index .Data "Users")}} {{T "admin.users.count_suffix"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body cs-admin-section__body--flush">
    <div class="table-responsive" data-nc-privacy-menu>
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr><th>ID</th><th>{{T "admin.users.col_username"}}</th><th>{{T "admin.users.col_email"}}</th><th>{{T "admin.users.col_sites"}}</th><th>{{T "admin.users.col_status"}}</th><th>{{T "admin.users.col_quota"}}</th><th>{{T "admin.users.col_ip"}}</th><th style="min-width:14rem">{{T "admin.users.col_actions"}}</th></tr>
        </thead>
        <tbody>
        {{range index .Data "Users"}}
        <tr>
          <td><span class="ut-admin-code">{{.id}}</span></td>
          <td class="fw-semibold">{{privacy "username" .username}}</td>
          <td class="small">{{privacy "email" .email}}</td>
          <td>{{.site_count}}</td>
          <td>
            {{if eq (asInt .status) 1}}<span class="badge rounded-pill text-bg-success">{{T "admin.users.status_ok"}}</span>
            {{else}}<span class="badge rounded-pill text-bg-secondary">{{T "admin.users.status_disabled"}}</span>{{end}}
          </td>
          <td>{{.max_sites}}</td>
          <td class="small">
            {{$ip := .last_ip}}
            {{if $ip}}
            <div>{{privacy "ip" $ip}}</div>
            {{if .last_ip_geo}}<div class="text-muted mt-1"><i class="bx bx-map"></i> {{.last_ip_geo}}</div>{{end}}
            {{else}}—{{end}}
          </td>
          <td>
            <form method="post" class="d-flex flex-wrap gap-1 ut-admin-inline-form js-admin-user-form">
              <input type="hidden" name="user_id" value="{{.id}}">
              <input type="number" name="max_sites" class="form-control form-control-sm" style="width:5rem" value="{{.max_sites}}" title="{{T "admin.users.max_sites_title"}}" min="0">
              <select name="status" class="form-select form-select-sm" style="width:5.5rem">
                <option value="1" {{if eq (asInt .status) 1}}selected{{end}}>{{T "admin.users.status_ok"}}</option>
                <option value="0" {{if eq (asInt .status) 0}}selected{{end}}>{{T "admin.users.status_disabled"}}</option>
              </select>
              <button type="submit" class="btn btn-sm btn-primary" title="{{T "admin.users.save_title"}}"><i class="bx bx-save"></i></button>
            </form>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="8" class="text-center text-muted py-4">{{T "admin.users.empty"}}</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
<script>
(function () {
  $('.js-admin-user-form').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.post('/admin/users', $form.serialize(), null, 'json')
      .done(function (res) {
        showAdminToast(!!(res && res.success), (res && res.message) || {{jsString (T "admin.users.saved")}});
      })
      .fail(function (xhr) {
        var msg = {{jsString (T "admin.users.save_fail")}};
        try { msg = JSON.parse(xhr.responseText).message || msg; } catch (err) {}
        showAdminToast(false, msg);
      })
      .always(function () { $btn.prop('disabled', false); });
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}