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

<div class="page-head">
  <div>
    <h1>[if {row.id}]{row.title}[else]Новый баннер[/if]</h1>
    <p class="muted"><a href="/admin/banners">← К списку баннеров</a></p>
  </div>
</div>

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

  <div class="form-row">
    <div class="form-group">
      <label>Заголовок *</label>
      <input type="text" name="title" value="{row.title}" required>
    </div>
    <div class="form-group">
      <label>Размещение</label>
      <select name="placement">
        <option value="hero"    [if {row.placement}="hero"]selected[/if]>Hero (главный слайдер)</option>
        <option value="sidebar" [if {row.placement}="sidebar"]selected[/if]>Боковая панель</option>
        <option value="footer"  [if {row.placement}="footer"]selected[/if]>Футер</option>
        <option value="popup"   [if {row.placement}="popup"]selected[/if]>Pop-up</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label>Подзаголовок</label>
    <textarea name="subtitle" rows="2">{row.subtitle}</textarea>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Картинка (десктоп)</label>
      <div class="media-field">
        <div class="media-preview" id="banner-img-preview">[if {row.image}]<img src="{row.image|thumb}" alt="">[else]нет[/if]</div>
        <input type="hidden" name="image" id="banner-img" value="{row.image}">
        <button type="button" class="media-pick-btn" data-media-picker="#banner-img" data-media-preview="#banner-img-preview">{icon name="image" size="14"} Выбрать</button>
      </div>
    </div>
    <div class="form-group">
      <label>Картинка (мобильная, опционально)</label>
      <div class="media-field">
        <div class="media-preview" id="banner-mob-preview">[if {row.mobile_image}]<img src="{row.mobile_image|thumb}" alt="">[else]нет[/if]</div>
        <input type="hidden" name="mobile_image" id="banner-mob" value="{row.mobile_image}">
        <button type="button" class="media-pick-btn" data-media-picker="#banner-mob" data-media-preview="#banner-mob-preview">{icon name="image" size="14"} Выбрать</button>
      </div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Ссылка</label>
      <input type="url" name="url" value="{row.url}" placeholder="https://...">
    </div>
    <div class="form-group">
      <label>Текст кнопки</label>
      <input type="text" name="cta_label" value="{row.cta_label}" placeholder="Подробнее">
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Активен с</label>
      <input type="datetime-local" name="starts_at" value="{row.starts_at}">
    </div>
    <div class="form-group">
      <label>Активен до</label>
      <input type="datetime-local" name="ends_at" value="{row.ends_at}">
    </div>
    <div class="form-group">
      <label>Сорт.</label>
      <input type="number" name="sort_order" value="{row.sort_order}">
    </div>
  </div>

  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox" name="is_active" value="1" [if {row.is_active}]checked[/if]>
      Активен
    </label>
  </div>

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

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