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

<div class="page-head">
  <div>
    <h1>{page.title}</h1>
    <p class="muted"><a href="/admin/news">{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>
    <button type="button" class="tabs-btn" data-tab="fields">{lang key="admin.tab_fields"}</button>
  </nav>

  <section class="tabs-pane active" data-pane="general">
    <div class="form-row form-row-title-cover">
      <div class="form-group">
        <label>{lang key="admin.title"}</label>
        <input type="text" name="title" value="{row.title}" required>
      </div>
      <div class="form-group">
        <label>{lang key="admin.cover"}</label>
        <div class="cover-inline">
          <input type="hidden" name="cover" id="news-cover" value="{row.cover}">
          <div class="cover-thumb" id="news-cover-preview">
            [if {row.cover}]<img src="{row.cover|thumb}" alt="">[/if]
          </div>
          <button type="button" class="cover-del" data-cover-clear="#news-cover" data-cover-preview="#news-cover-preview" title="{lang key="admin.remove"}">×</button>
          <button type="button" class="btn btn-secondary" data-media-picker="#news-cover" data-media-preview="#news-cover-preview">{icon name="camera" size="16"} {lang key="admin.choose_cover"}</button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>
        {lang key="admin.short_description"} ({lang key="admin.short_desc_hint"})
        <button type="button" class="ai-btn" data-ai-task="summarize" data-ai-target='[name="short"]' data-ai-args-from='{"text":"[name=body]"}' title="{lang key="admin.ai_generate_article"}">{icon name="sparkles" size="14"} AI</button>
      </label>
      <textarea name="short" rows="3">{row.short}</textarea>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label>{lang key="admin.category"}</label>
        <select name="category_id">
          <option value="">{lang key="admin.no_category"}</option>
          [foreach var="categories" as="c"]
            <option value="{c.id}" [if {row.category_id}={c.id}]selected[/if]>{c.prefix}{c.title}</option>
          [/foreach]
        </select>
      </div>
      <div class="form-group">
        <label>{lang key="admin.status"}</label>
        <select name="status">
          <option value="published" [if {row.status}="published"]selected[/if]>{lang key="admin.published"}</option>
          <option value="draft" [if {row.status}="draft"]selected[/if]>{lang key="admin.draft"}</option>
        </select>
      </div>
    </div>

    <input type="hidden" name="body_format" value="html">
    <div class="form-group">
      <label>
        {lang key="admin.content_label"}
        <button type="button" class="ai-btn" data-ai-task="generate_article" data-ai-target='[name="body"]' data-ai-args-from='{"title":"[name=title]","hint":"[name=short]"}' title="{lang key="admin.ai_generate_article"}">{icon name="sparkles" size="14"} AI</button>
      </label>
      <textarea name="body" rows="20" data-celena-editor>{row.body|raw}</textarea>
    </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=body]"}'>{icon name="sparkles" size="14"} {lang key="admin.ai_fill_seo"}</button>
    </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"}">
      <small class="help">{lang key="admin.url_preview"}: /news/{row.slug}</small>
    </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="3">{row.seo_description}</textarea>
    </div>
    <div class="form-group">
      <label>OpenGraph {lang key="admin.image"}</label>
      <div class="cover-inline">
        <input type="hidden" name="og_image" id="news-og" value="{row.og_image}">
        <div class="cover-thumb" id="news-og-preview">
          [if {row.og_image}]<img src="{row.og_image|thumb}" alt="">[/if]
        </div>
        <button type="button" class="cover-del" data-cover-clear="#news-og" data-cover-preview="#news-og-preview" title="{lang key="admin.remove"}">×</button>
        <button type="button" class="btn btn-secondary" data-media-picker="#news-og" data-media-preview="#news-og-preview">{icon name="camera" size="16"} {lang key="admin.choose_image"}</button>
      </div>
    </div>
  </section>

  <section class="tabs-pane" data-pane="fields">
    {include file="_partials/custom_fields.tpl"}
  </section>

  <div class="form-actions">
    <button class="btn btn-primary" type="submit">{lang key="admin.save"}</button>
    <a class="btn btn-secondary" href="/admin/news">{lang key="admin.cancel"}</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"}
