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

<div class="page-head">
  <div>
    <h1>{lang key="admin.settings_title"}</h1>
    <p class="muted">{lang key="admin.settings_subtitle"}</p>
  </div>
</div>

<form method="post" action="/admin/settings" class="form form-tabs">
  {csrf}

  <nav class="tabs-nav">
    <button type="button" class="tabs-btn active" data-tab="general">{lang key="admin.tab_site"}</button>
    <button type="button" class="tabs-btn" data-tab="seo">{lang key="admin.tab_seo"}</button>
    <button type="button" class="tabs-btn" data-tab="media">{lang key="admin.tab_media"}</button>
    <button type="button" class="tabs-btn" data-tab="perf">{lang key="admin.tab_performance"}</button>
    <button type="button" class="tabs-btn" data-tab="comments">{lang key="admin.tab_comments"}</button>
    <button type="button" class="tabs-btn" data-tab="privacy">{lang key="admin.tab_privacy"}</button>
  </nav>

  <section class="tabs-pane active" data-pane="general">
    <div class="form-row">
      <div class="form-group">
        <label>{lang key="admin.site_name"}</label>
        <input type="text" name="site_name" value="{opts.site_name}">
      </div>
      <div class="form-group">
        <label>{lang key="admin.site_url"}</label>
        <input type="url" name="site_url" value="{opts.site_url}">
      </div>
    </div>
    <div class="form-group">
      <label>{lang key="admin.site_tagline"}</label>
      <input type="text" name="site_tagline" value="{opts.site_tagline}">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>{lang key="admin.theme_active"}</label>
        <select name="theme">
          [foreach var="themes" as="th"]
            <option value="{th.slug}" [if {opts.theme}={th.slug}]selected[/if]>{th.name} ({th.slug})</option>
          [/foreach]
        </select>
      </div>
      <div class="form-group">
        <label>{lang key="admin.locale_default"}</label>
        <select name="locale">
          [foreach var="langs" as="l"]
            <option value="{l.code}" [if {opts.locale}={l.code}]selected[/if]>{l.name}</option>
          [/foreach]
        </select>
      </div>
    </div>
    <div class="form-group">
      <label>{lang key="admin.posts_per_page"}</label>
      <input type="number" name="posts_per_page" value="{opts.posts_per_page}" min="1" max="100">
    </div>
  </section>

  <section class="tabs-pane" data-pane="seo">
    <div class="form-group">
      <label>Title (главная)</label>
      <input type="text" name="seo_title" value="{opts.seo_title}" placeholder="пусто = название сайта">
    </div>
    <div class="form-group">
      <label>Description (главная)</label>
      <textarea name="seo_description" rows="3">{opts.seo_description}</textarea>
    </div>
    <div class="form-group">
      <label>Keywords (главная)</label>
      <input type="text" name="seo_keywords" value="{opts.seo_keywords}">
    </div>
  </section>

  <section class="tabs-pane" data-pane="media">
    <p class="muted" style="margin-top:0">Эти настройки применяются при загрузке новых файлов. Ранее загруженные изображения не пересжимаются.</p>
    <div class="form-row">
      <div class="form-group">
        <label>Макс. сторона оригинала, px</label>
        <input type="number" name="media_max_original" value="{opts.media_max_original}" min="200" max="8000">
        <small class="help">Если загружаемое изображение больше — оригинал уменьшится до этого размера. Рекомендуется 2000–2800.</small>
      </div>
      <div class="form-group">
        <label>Качество JPEG, %</label>
        <input type="number" name="media_jpeg_quality" value="{opts.media_jpeg_quality}" min="10" max="100">
        <small class="help">80–85 — оптимальный баланс размера и качества.</small>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>Миниатюра (thumb), px</label>
        <input type="number" name="media_thumb_size" value="{opts.media_thumb_size}" min="64" max="800">
        <small class="help">Квадратный crop. Подходит для аватарок, списков.</small>
      </div>
      <div class="form-group">
        <label>Качество WebP, %</label>
        <input type="number" name="media_webp_quality" value="{opts.media_webp_quality}" min="10" max="100">
        <small class="help">WebP при том же % даёт меньший файл, чем JPEG.</small>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>Средний размер (medium), px</label>
        <input type="number" name="media_medium_size" value="{opts.media_medium_size}" min="100" max="2000">
        <small class="help">Для карточек, предпросмотров.</small>
      </div>
      <div class="form-group">
        <label>Крупный размер (large), px</label>
        <input type="number" name="media_large_size" value="{opts.media_large_size}" min="200" max="4000">
        <small class="help">Для полного просмотра в статьях.</small>
      </div>
    </div>
  </section>

  <section class="tabs-pane" data-pane="perf">
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="cache_templates" value="1" [if {opts.cache_templates}="1"]checked[/if]> {lang key="admin.cache_templates"}</label>
      <small class="help">{lang key="admin.cache_templates_hint"}</small>
    </div>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="cache_data" value="1" [if {opts.cache_data}="1"]checked[/if]> {lang key="admin.cache_data"}</label>
    </div>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="cache_http" value="1" [if {opts.cache_http}="1"]checked[/if]> {lang key="admin.cache_http"}</label>
      <small class="help">{lang key="admin.cache_http_hint"}</small>
    </div>
  </section>

  <section class="tabs-pane" data-pane="comments">
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="comments_open" value="1" [if {opts.comments_open}="1"]checked[/if]> {lang key="admin.comments_open"}</label>
    </div>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="comments_moderate" value="1" [if {opts.comments_moderate}="1"]checked[/if]> {lang key="admin.comments_moderate"}</label>
    </div>
  </section>

  <section class="tabs-pane" data-pane="privacy">
    <p class="muted" style="margin-top:0">{lang key="admin.gdpr_intro"}</p>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="gdpr_enabled" value="1" [if {opts.gdpr_enabled}="1"]checked[/if]> {lang key="admin.gdpr_enabled"}</label>
    </div>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="gdpr_eu_only" value="1" [if {opts.gdpr_eu_only}="1"]checked[/if]> {lang key="admin.gdpr_eu_only"}</label>
      <small class="help">{lang key="admin.gdpr_eu_only_hint"}</small>
    </div>
    <div class="form-group">
      <label>{lang key="admin.gdpr_text"}</label>
      <textarea name="gdpr_text" rows="3">{opts.gdpr_text}</textarea>
      <small class="help">{lang key="admin.gdpr_text_hint"}</small>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>{lang key="admin.gdpr_accept"}</label>
        <input type="text" name="gdpr_accept_label" value="{opts.gdpr_accept_label}">
      </div>
      <div class="form-group">
        <label>{lang key="admin.gdpr_decline"}</label>
        <input type="text" name="gdpr_decline_label" value="{opts.gdpr_decline_label}">
      </div>
    </div>
    <div class="form-group">
      <label>{lang key="admin.gdpr_privacy_url"}</label>
      <input type="text" name="gdpr_privacy_url" value="{opts.gdpr_privacy_url}" placeholder="/p/privacy">
      <small class="help">{lang key="admin.gdpr_privacy_url_hint"}</small>
    </div>
  </section>

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

<form method="post" action="/admin/settings/clear-cache" class="form" style="margin-top:16px">
  {csrf}
  <h3 style="margin-top:0">{lang key="admin.clear_cache"}</h3>
  <p class="muted">{lang key="admin.clear_cache_hint"}</p>
  <div class="form-actions">
    <button class="btn btn-secondary" type="submit">{lang key="admin.clear_cache"}</button>
  </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"}
