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

<div class="admin-section-head">
  <div>
    <h2>Propagandas da vitrine</h2>
    <p>As imagens ativas rodam no topo da página inicial e no cabeçalho dos catálogos.</p>
  </div>
  <div class="admin-section-head__actions">
    <a class="btn btn--green btn--sm" href="<%= url('/admin/banners/novo') %>"><%- icon('plus') %> Novo banner</a>
  </div>
</div>

<section class="panel">
  <div class="panel__head">
    <h2>Banners cadastrados</h2>
    <span class="badge"><%= banners.length %> no total</span>
  </div>

  <% if (banners.length) { %>
  <div class="panel__body">
    <div class="banner-admin-list">
      <% banners.forEach(function(banner) { %>
      <article class="banner-admin">
        <span class="banner-admin__thumb">
          <img src="<%= url(banner.imagem) %>" alt="" loading="lazy" width="300" height="125">
        </span>
        <div class="banner-admin__info">
          <strong><%= banner.titulo %></strong>
          <p><%= banner.etiqueta %> · <%= banner.subtitulo %></p>
          <div class="banner-admin__meta">
            <span class="badge <%= banner.ativo === false ? 'badge--off' : 'badge--on' %>"><%= banner.ativo === false ? 'Inativo' : 'Ativo' %></span>
            <span class="badge">Ordem <%= banner.ordem %></span>
            <% if (banner.cta) { %><span class="badge badge--gold"><%= banner.cta %></span><% } %>
          </div>
        </div>
        <div class="banner-admin__actions">
          <a class="admin-icon-btn" href="<%= url(banner.link || '/') %>" target="_blank" rel="noopener" aria-label="Abrir destino do banner"><%- icon('external-link') %></a>
          <a class="admin-icon-btn" href="<%= url('/admin/banners/' + banner.id + '/editar') %>" aria-label="Editar banner"><%- icon('pencil') %></a>
          <form action="<%= url('/admin/banners/' + banner.id + '/excluir') %>" method="post" data-confirm="Excluir o banner “<%= banner.titulo %>”?">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button class="admin-icon-btn admin-icon-btn--danger" type="submit" aria-label="Excluir banner"><%- icon('trash') %></button>
          </form>
        </div>
      </article>
      <% }); %>
    </div>
  </div>
  <% } else { %>
  <div class="admin-empty">
    <span class="admin-empty__icon"><%- icon('image') %></span>
    <h3>Nenhum banner cadastrado</h3>
    <p>Adicione uma propaganda para destacar promoções e novidades.</p>
    <a class="btn btn--green btn--sm" href="<%= url('/admin/banners/novo') %>"><%- icon('plus') %> Criar banner</a>
  </div>
  <% } %>

  <div class="panel__foot">
    <span>Dica: use imagens horizontais, com pelo menos 1600 px de largura.</span>
    <a href="<%= url('/') %>" target="_blank" rel="noopener">Ver página inicial</a>
  </div>
</section>

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