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

<div class="page-head">
  <div>
    <h1>{page.title}</h1>
    <p class="muted"><a href="/admin/pages">← К списку</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">Основное</button>
    <button type="button" class="tabs-btn" data-tab="seo">SEO и настройки</button>
  </nav>

  {* ───────── Вкладка «Основное»: только заголовок и содержимое ───────── *}
  <section class="tabs-pane active" data-pane="general">
    <div class="form-group">
      <label>Заголовок</label>
      <input type="text" name="title" value="{row.title}" required>
    </div>

    <div class="form-group">
      <label>Содержимое</label>
      <textarea name="body" rows="22" data-celena-editor>{row.body|raw}</textarea>
    </div>
  </section>

  {* ───────── Вкладка «SEO и настройки»: всё остальное ───────── *}
  <section class="tabs-pane" data-pane="seo">
    <div class="form-row">
      <div class="form-group">
        <label>Статус</label>
        <select name="status">
          <option value="published" [if {row.status}="published"]selected[/if]>Опубликована</option>
          <option value="draft" [if {row.status}="draft"]selected[/if]>Черновик</option>
        </select>
      </div>
      <div class="form-group">
        <label>Формат содержимого</label>
        <select name="body_format">
          <option value="markdown" [if {row.body_format}="markdown"]selected[/if]>Markdown (рекомендуется)</option>
          <option value="html" [if {row.body_format}="html"]selected[/if]>HTML</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label>Slug (ЧПУ)</label>
      <input type="text" name="slug" value="{row.slug}" placeholder="авто из заголовка">
      <small class="help">URL: /p/{row.slug}</small>
    </div>

    <h3 style="margin:6px 0 14px">SEO</h3>
    <div class="form-group">
      <label>SEO Title</label>
      <input type="text" name="seo_title" value="{row.seo_title}">
      <small class="help">Если пусто — используется заголовок страницы.</small>
    </div>
    <div class="form-group">
      <label>SEO Description</label>
      <textarea name="seo_description" rows="3">{row.seo_description}</textarea>
    </div>
    <div class="form-group">
      <label>OpenGraph изображение</label>
      <div class="cover-inline">
        <input type="hidden" name="og_image" id="page-og" value="{row.og_image}">
        <div class="cover-thumb" id="page-og-preview">
          [if {row.og_image}]<img src="{row.og_image|thumb}" alt="">[/if]
        </div>
        <button type="button" class="cover-del" data-cover-clear="#page-og" data-cover-preview="#page-og-preview" title="Удалить">×</button>
        <button type="button" class="btn btn-secondary" data-media-picker="#page-og" data-media-preview="#page-og-preview">{icon name="camera" size="16"} Выбрать изображение</button>
      </div>
      <small class="help">Картинка для превью при шеринге в соцсетях (1200×630).</small>
    </div>

    {include file="_partials/custom_fields.tpl"}
  </section>

  <div class="form-actions">
    <button class="btn btn-primary" type="submit">Сохранить</button>
    <a class="btn btn-secondary" href="/admin/pages">Отмена</a>
  </div>
</form>

<script>
(function () {
  var tabs = document.querySelectorAll('.tabs-btn');
  var panes = document.querySelectorAll('.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"}
