<%- include('partials/head', {
  title,
  pageTitle: isNew ? 'Novo banner' : 'Editar banner',
  sectionLabel: 'Divulgação',
  active: 'banners'
}) %>

<%
  const fieldClass = (key) => errors && errors[key] ? 'field has-error' : 'field';
  const formAction = isNew ? '/admin/banners/novo' : '/admin/banners/' + banner.id;
%>

<div class="admin-section-head">
  <div>
    <h2><%= isNew ? 'Crie uma nova propaganda' : 'Atualize o banner selecionado' %></h2>
    <p>Imagens horizontais funcionam melhor: proporção aproximada de 12:5.</p>
  </div>
  <div class="admin-section-head__actions">
    <a class="btn btn--outline btn--sm" href="<%= url('/admin/banners') %>"><%- icon('arrow-left') %> Voltar</a>
  </div>
</div>

<div class="admin-grid admin-grid--sidebar">
  <form class="admin-form" action="<%= formAction %>" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="imagemAtual" value="<%= banner.imagem || '' %>">

    <section class="panel">
      <div class="panel__head"><h2>Conteúdo do banner</h2></div>
      <div class="panel__body">
        <div class="form-grid">
          <div class="<%= fieldClass('etiqueta') %>">
            <label for="etiqueta">Etiqueta</label>
            <input id="etiqueta" name="etiqueta" type="text" value="<%= banner.etiqueta || '' %>" maxlength="50" placeholder="Ex.: Promoção do dia">
            <% if (errors.etiqueta) { %><span class="field__error"><%= errors.etiqueta %></span><% } else { %><small class="hint">Texto pequeno acima do título.</small><% } %>
          </div>

          <div class="<%= fieldClass('titulo') %>">
            <label for="titulo">Título <span class="req">*</span></label>
            <input id="titulo" name="titulo" type="text" value="<%= banner.titulo || '' %>" maxlength="100" required>
            <% if (errors.titulo) { %><span class="field__error"><%= errors.titulo %></span><% } %>
          </div>

          <div class="<%= fieldClass('subtitulo') %> field--full">
            <label for="subtitulo">Subtítulo <span class="req">*</span></label>
            <textarea id="subtitulo" name="subtitulo" rows="3" maxlength="200" required><%= banner.subtitulo || '' %></textarea>
            <% if (errors.subtitulo) { %><span class="field__error"><%= errors.subtitulo %></span><% } %>
          </div>

          <div class="field">
            <label for="cta">Texto do botão</label>
            <input id="cta" name="cta" type="text" value="<%= banner.cta || '' %>" maxlength="40" placeholder="Ex.: Ver ofertas">
          </div>

          <div class="<%= fieldClass('link') %>">
            <label for="link">Link do botão</label>
            <input id="link" name="link" type="text" value="<%= banner.link || '' %>" maxlength="300" placeholder="/varejo?categoria=utilidades-domesticas">
            <% if (errors.link) { %><span class="field__error"><%= errors.link %></span><% } else { %><small class="hint">Use um caminho interno (/varejo) ou uma URL completa.</small><% } %>
          </div>

          <div class="field">
            <label for="alt">Descrição da imagem (acessibilidade)</label>
            <input id="alt" name="alt" type="text" value="<%= banner.alt || '' %>" maxlength="140" placeholder="Descreva o que aparece na foto">
          </div>

          <div class="field">
            <label for="foco">Foco da imagem</label>
            <select id="foco" name="foco">
              <option value="center" <%= banner.foco === 'center' ? 'selected' : '' %>>Centro</option>
              <option value="center top" <%= banner.foco === 'center top' ? 'selected' : '' %>>Topo</option>
              <option value="center bottom" <%= banner.foco === 'center bottom' ? 'selected' : '' %>>Base</option>
              <option value="left center" <%= banner.foco === 'left center' ? 'selected' : '' %>>Esquerda</option>
              <option value="right center" <%= banner.foco === 'right center' ? 'selected' : '' %>>Direita</option>
              <option value="center 55%" <%= banner.foco === 'center 55%' ? 'selected' : '' %>>Centro (55%)</option>
            </select>
          </div>

          <div class="field">
            <label for="ordem">Ordem de exibição</label>
            <input id="ordem" name="ordem" type="number" min="1" max="99" value="<%= banner.ordem || 1 %>">
          </div>
        </div>

        <label class="check">
          <input type="checkbox" name="ativo" <%= banner.ativo === false ? '' : 'checked' %>>
          <span><strong>Banner ativo</strong><small>Exibido no carrossel do site</small></span>
        </label>
      </div>
    </section>

    <section class="panel">
      <div class="panel__head"><h2>Imagem</h2></div>
      <div class="panel__body">
        <% if (errors.imagem) { %><span class="field__error"><%= errors.imagem %></span><% } %>

        <div class="banner-preview">
          <% if (banner.imagem) { %>
          <img src="<%= url(banner.imagem) %>" alt="Prévia do banner" width="600" height="250">
          <% } else { %>
          <span class="banner-preview__empty">A prévia aparece depois do envio da imagem</span>
          <% } %>
        </div>

        <label class="upload-box">
          <%- icon('upload') %>
          <strong data-upload-label><%= banner.imagem ? 'Substituir imagem' : 'Enviar imagem' %></strong>
          <small>JPG, PNG ou WebP · até 8 MB · recomendado 2400 × 1000 px</small>
          <span class="upload-box__cta">Escolher arquivo</span>
          <input type="file" name="imagemNova" accept="image/jpeg,image/png,image/webp,image/gif" <%= banner.imagem ? '' : 'required' %>>
        </label>
      </div>
    </section>

    <div class="form-actions">
      <a class="btn btn--outline" href="<%= url('/admin/banners') %>">Cancelar</a>
      <button class="btn btn--green" type="submit">
        <%- icon('check') %>
        <%= isNew ? 'Criar banner' : 'Salvar alterações' %>
      </button>
    </div>
  </form>

  <aside class="admin-grid">
    <section class="panel">
      <div class="panel__head"><h2>Como fica no site</h2></div>
      <div class="panel__body">
        <p class="admin-help-text">O banner ocupa o carrossel da página inicial e também aparece desfocado atrás do logo no topo dos catálogos. Evite textos importantes muito próximos das bordas.</p>
      </div>
    </section>

    <section class="panel">
      <div class="panel__head"><h2>Checklist</h2></div>
      <div class="panel__body">
        <ul class="admin-checklist">
          <li><%- icon('check') %> Imagem nítida e horizontal</li>
          <li><%- icon('check') %> Título curto e direto</li>
          <li><%- icon('check') %> Botão com link válido</li>
          <li><%- icon('check') %> Descrição para acessibilidade</li>
        </ul>
      </div>
    </section>
  </aside>
</div>

<%- include('partials/foot') %>
