{{define "admin/dict_table.html"}}
{{template "admin_shell_open" .}}
<style>
.cs-admin-dict-page .cs-admin-icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #475569;
}
.cs-admin-dict-page .cs-admin-icon-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a;
}
.cs-admin-dict-page .cs-admin-row-dropdown .dropdown-menu {
  min-width: 11rem;
  font-size: 0.875rem;
  border-radius: 10px;
}
.cs-admin-dict-page .cs-admin-row-dropdown .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
}
.cs-admin-dict-page .cs-admin-row-dropdown form.cs-admin-ajax-form .dropdown-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}
</style>

<div class="cs-admin-list-page cs-admin-dict-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-list-ul"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{.Title}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.dict.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <button type="button" class="btn btn-primary btn-sm js-admin-dict-add"><i class="bx bx-plus me-1"></i>{{T "admin.dict.add"}}</button>
  </div>
</header>

<div class="card cs-admin-section"><div class="cs-admin-section__body cs-admin-section__body--flush"><div class="table-responsive">
<table class="table table-hover align-middle mb-0 small">
  <thead class="table-light"><tr>
    <th>ID</th><th>slug</th>{{if .Data.DictHasParent}}<th>parent_id</th>{{end}}<th>{{T "admin.dict.col_name_zh"}}</th>{{if .Data.DictHasNameEn}}<th>{{T "admin.dict.col_name_en"}}</th>{{end}}<th>{{T "admin.dict.col_sort"}}</th><th>{{T "admin.dict.col_status"}}</th><th class="text-end text-nowrap" style="width:3.5rem">{{T "admin.dict.col_ops"}}</th>
  </tr></thead>
  <tbody>
  {{range .Data.Rows}}
  <tr>
    <td class="text-muted">#{{index . "id"}}</td>
    <td><code class="small">{{index . "slug"}}</code></td>
    {{if $.Data.DictHasParent}}<td>{{index . "parent_id"}}</td>{{end}}
    <td class="fw-medium">{{index . "name_zh"}}</td>
    {{if $.Data.DictHasNameEn}}<td>{{index . "name_en"}}</td>{{end}}
    <td>{{index . "sort_order"}}</td>
    <td>{{if eq (asInt (index . "status")) 1}}<span class="badge bg-success">{{T "admin.dict.enabled"}}</span>{{else}}<span class="badge bg-secondary">{{T "admin.dict.disabled"}}</span>{{end}}</td>
    <td class="text-end">
      <div class="dropdown cs-admin-row-dropdown d-inline-block">
        <button type="button" class="btn btn-sm btn-light border cs-admin-icon-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false" title="{{T "admin.dict.ops_title"}}">
          <i class="bx bx-dots-vertical-rounded fs-5 lh-1" aria-hidden="true"></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-dict-edit"
              data-id="{{index . "id"}}"
              data-slug="{{index . "slug"}}"
              data-name="{{index . "name_zh"}}"
              {{if $.Data.DictHasNameEn}}data-name-en="{{index . "name_en"}}"{{end}}
              data-sort="{{index . "sort_order"}}"
              data-status="{{index . "status"}}"
              {{if $.Data.DictHasParent}}data-parent="{{if index . "parent_id"}}{{index . "parent_id"}}{{else}}0{{end}}"{{end}}>
              <i class="bx bx-edit-alt text-primary"></i><span>{{T "admin.dict.edit"}}</span>
            </button>
          </li>
          <li><hr class="dropdown-divider my-1"></li>
          <li>
            <form method="post" action="/admin/dict/{{$.Data.DictMenuSlug}}" class="cs-admin-ajax-form mb-0" data-cs-confirm="{{T "admin.dict.confirm_del"}}">
              <input type="hidden" name="_action" value="delete">
              <input type="hidden" name="id" value="{{index . "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.dict.delete"}}</span></button>
            </form>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  {{else}}
  <tr><td colspan="{{.Data.DictColspan}}" class="text-center text-muted py-4">{{T "admin.dict.empty"}}</td></tr>
  {{end}}
  </tbody>
</table>
</div></div></div>

<script>
(function () {
  var Ldict = {
    slugMax64: {{jsString (T "admin.dict.slug_max_64")}},
    slugMax32: {{jsString (T "admin.dict.slug_max_32")}},
    parentHint: {{jsString (T "admin.dict.parent_hint")}},
    titleNew: {{jsString (T "admin.dict.title_new")}},
    titleEdit: {{jsString (T "admin.dict.title_edit")}},
    hintNew: {{jsString (T "admin.dict.hint_new_html")}},
    hintEdit: {{jsString (T "admin.dict.hint_edit_html")}},
    labelSlug: {{jsString (T "admin.dict.label_slug")}},
    slugRule: {{jsString (T "admin.dict.slug_rule")}},
    labelNameZh: {{jsString (T "admin.dict.label_name_zh")}},
    labelNameEn: {{jsString (T "admin.dict.label_name_en")}},
    nameEnHint: {{jsString (T "admin.dict.name_en_hint")}},
    labelSort: {{jsString (T "admin.dict.label_sort")}},
    labelStatus: {{jsString (T "admin.dict.label_status")}},
    enabled: {{jsString (T "admin.dict.enabled")}},
    disabled: {{jsString (T "admin.dict.disabled")}},
    add: {{jsString (T "admin.dict.add")}},
    save: {{jsString (T "admin.dict.save")}},
    layerMissing: {{jsString (T "admin.dict.layer_missing")}}
  };
  var slug = {{jsString .Data.DictMenuSlug}};
  var dictHasParent = {{if .Data.DictHasParent}}true{{else}}false{{end}};
  var dictHasNameEn = {{if .Data.DictHasNameEn}}true{{else}}false{{end}};
  var esc = function (t) {
    return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;');
  };

  function openDictModal(opts) {
    var id = opts.id || '0';
    var isNew = opts.isNew === true;
    var s = String(opts.slug || '');
    var name = String(opts.name || '');
    var nameEn = String(opts.nameEn || '');
    var sort = String(opts.sort != null ? opts.sort : '0');
    var st = String(opts.status != null ? opts.status : '1');
    var parent = String(opts.parent != null ? opts.parent : '0');
    var slugMaxHint = slug === 'categories' ? Ldict.slugMax64 : Ldict.slugMax32;

    var parentBlock = '';
    if (dictHasParent) {
      parentBlock = ''
        + '<div class="admin-modal-field">'
        + '<label class="form-label" for="adm-dict-parent-' + esc(id) + '">parent_id</label>'
        + '<input id="adm-dict-parent-' + esc(id) + '" class="form-control" type="number" inputmode="numeric" name="parent_id" value="' + esc(parent) + '" min="0" step="1">'
        + '<div class="form-text">' + Ldict.parentHint + '</div>'
        + '</div>';
    }

    var titleBar = isNew ? Ldict.titleNew : (Ldict.titleEdit + id);
    var hint = isNew
      ? '<p class="admin-form-modal-hint">' + Ldict.hintNew + '</p>'
      : '<p class="admin-form-modal-hint">' + Ldict.hintEdit + '</p>';

    var html = ''
      + '<div class="admin-modal-embed admin-form-modal-wrap">'
      + '<form method="post" class="admin-form-modal cs-admin-ajax-form" data-cs-reload="1" action="/admin/dict/' + esc(slug) + '">'
      + '<input type="hidden" name="id" value="' + esc(id) + '">'
      + hint
      + '<div class="admin-modal-field">'
      + '<label class="form-label" for="adm-dict-slug-' + esc(id) + '">' + Ldict.labelSlug + '</label>'
      + '<input id="adm-dict-slug-' + esc(id) + '" class="form-control font-monospace" name="slug" value="' + esc(s) + '" required autocomplete="off" maxlength="' + (slug === 'categories' ? '64' : '32') + '" pattern="[a-z][a-z0-9_]*">'
      + '<div class="form-text">' + Ldict.slugRule + slugMaxHint + '</div>'
      + '</div>'
      + parentBlock
      + '<div class="admin-modal-field">'
      + '<label class="form-label" for="adm-dict-name-' + esc(id) + '">' + Ldict.labelNameZh + '</label>'
      + '<input id="adm-dict-name-' + esc(id) + '" class="form-control" name="name_zh" value="' + esc(name) + '" required autocomplete="off">'
      + '</div>';
    if (dictHasNameEn) {
      html += ''
        + '<div class="admin-modal-field">'
        + '<label class="form-label" for="adm-dict-name-en-' + esc(id) + '">' + Ldict.labelNameEn + '</label>'
        + '<input id="adm-dict-name-en-' + esc(id) + '" class="form-control" name="name_en" value="' + esc(nameEn) + '" autocomplete="off">'
        + '<div class="form-text">' + Ldict.nameEnHint + '</div>'
        + '</div>';
    }
    html += ''
      + '<div class="admin-modal-field">'
      + '<div class="row g-4">'
      + '<div class="col-sm-5">'
      + '<label class="form-label" for="adm-dict-sort-' + esc(id) + '">' + Ldict.labelSort + '</label>'
      + '<input id="adm-dict-sort-' + esc(id) + '" class="form-control" type="number" inputmode="numeric" name="sort_order" value="' + esc(sort) + '">'
      + '</div>'
      + '<div class="col-sm-7">'
      + '<label class="form-label" for="adm-dict-st-' + esc(id) + '">' + Ldict.labelStatus + '</label>'
      + '<select id="adm-dict-st-' + esc(id) + '" class="form-select" name="status">'
      + '<option value="1"' + (st === '1' ? ' selected' : '') + '>' + Ldict.enabled + '</option>'
      + '<option value="0"' + (st === '0' ? ' selected' : '') + '>' + Ldict.disabled + '</option>'
      + '</select>'
      + '</div>'
      + '</div>'
      + '</div>'
      + '<div class="admin-form-modal-actions">'
      + '<button type="submit" class="btn btn-primary">' + (isNew ? Ldict.add : Ldict.save) + '</button>'
      + '</div>'
      + '</form></div>';

    if (window.layer && typeof window.layer.open === 'function') {
      window.layer.open({
        type: 1,
        title: titleBar,
        area: ['min(520px, 94vw)', 'auto'],
        shadeClose: true,
        content: html
      });
    } else {
      alert(Ldict.layerMissing);
    }
  }

  $(document).on('click', '.js-admin-dict-add', function () {
    openDictModal({ isNew: true, id: '0', slug: '', name: '', nameEn: '', sort: '0', status: '1', parent: '0' });
  });

  $(document).on('click', '.js-admin-dict-edit', function () {
    var btn = $(this);
    openDictModal({
      isNew: false,
      id: btn.data('id'),
      slug: btn.data('slug'),
      name: btn.data('name'),
      nameEn: dictHasNameEn ? btn.data('name-en') : '',
      sort: btn.data('sort'),
      status: btn.data('status'),
      parent: dictHasParent ? btn.data('parent') : undefined
    });
  });
})();
</script>

</div>
{{template "admin_shell_close" .}}
{{end}}