{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>{page.title}</h1>
    <p class="muted"><a href="/admin/categories">{lang key="admin.back_to_list"}</a></p>
  </div>
</div>

<form method="post" action="{form_action}" class="form form-tabs">
  {csrf}

  <nav class="tabs-nav">
    <button type="button" class="tabs-btn active" data-tab="general">{lang key="admin.tab_general"}</button>
    <button type="button" class="tabs-btn" data-tab="seo">{lang key="admin.tab_seo"}</button>
  </nav>

  <section class="tabs-pane active" data-pane="general">
    <div class="form-row">
      <div class="form-group">
        <label>Применяется к</label>
        <select name="entity_type">
          [foreach var="entities" as="e"]
            <option value="{e.slug}" [if {row.entity_type}={e.slug}]selected[/if]>{e.label}</option>
          [/foreach]
        </select>
        <small class="help">К какой сущности относится категория. После создания изменить будет нельзя без переподписки записей.</small>
      </div>
      <div class="form-group">
        <label>{lang key="admin.sort_order"}</label>
        <input type="number" name="sort_order" value="{row.sort_order}" min="0">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label>{lang key="admin.name"}</label>
        <input type="text" name="title" value="{row.title}" required>
      </div>
      <div class="form-group">
        <label>{lang key="admin.slug"} (ЧПУ)</label>
        <input type="text" name="slug" value="{row.slug}" placeholder="{lang key="admin.auto_from_title"}">
      </div>
    </div>

    <div class="form-group">
      <label>{lang key="admin.description"}</label>
      <textarea name="description" rows="3">{row.description}</textarea>
    </div>

    <div class="form-group">
      <label>{lang key="admin.parent_category"}</label>
      <select name="parent_id">
        <option value="">— {lang key="admin.no"} —</option>
        [foreach var="parents" as="p"]
          <option value="{p.id}" [if {row.parent_id}={p.id}]selected[/if]>{p.prefix}{p.title}</option>
        [/foreach]
      </select>
      <small class="help">Родителем может быть только категория той же сущности.</small>
    </div>
  </section>

  <section class="tabs-pane" data-pane="seo">
    <div style="margin-bottom:16px">
      <button type="button" class="ai-btn" data-ai-task="generate_meta" data-ai-args-from='{"title":"[name=title]","content":"[name=description]"}'>{icon name="sparkles" size="14"} {lang key="admin.ai_fill_seo"}</button>
    </div>
    <div class="form-group">
      <label>{lang key="admin.seo_title_label"}</label>
      <input type="text" name="seo_title" value="{row.seo_title}">
    </div>
    <div class="form-group">
      <label>{lang key="admin.seo_description_label"}</label>
      <textarea name="seo_description" rows="2">{row.seo_description}</textarea>
    </div>
  </section>

  <div class="form-actions">
    <button class="btn btn-primary" type="submit">{lang key="admin.save"}</button>
    <a class="btn btn-secondary" href="/admin/categories">{lang key="admin.cancel"}</a>
  </div>
</form>

<script>
(function () {
  var tabs = document.querySelectorAll('.form-tabs .tabs-btn');
  var panes = document.querySelectorAll('.form-tabs .tabs-pane');
  tabs.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var target = btn.getAttribute('data-tab');
      tabs.forEach(function (t) { t.classList.toggle('active', t === btn); });
      panes.forEach(function (p) { p.classList.toggle('active', p.getAttribute('data-pane') === target); });
    });
  });
})();
</script>

{include file="_partials/foot.tpl"}
