<%- include('partials/head', {
  title,
  pageTitle: 'Produtos',
  sectionLabel: 'Catálogo',
  active: 'products'
}) %>

<div class="admin-section-head">
  <div>
    <h2><%= products.length %> <%= products.length === 1 ? 'produto encontrado' : 'produtos encontrados' %></h2>
    <p>Gerencie fotos, descrições, preços de atacado e varejo.</p>
  </div>
  <div class="admin-section-head__actions">
    <a class="btn btn--green btn--sm" href="<%= url('/admin/produtos/novo') %>"><%- icon('plus') %> Novo produto</a>
  </div>
</div>

<form class="admin-filters" action="<%= url('/admin/produtos') %>" method="get" role="search">
  <div class="field">
    <label for="filtro-q">Buscar</label>
    <input id="filtro-q" type="search" name="q" value="<%= filters.q %>" placeholder="Nome, código ou descrição">
  </div>
  <div class="field">
    <label for="filtro-categoria">Categoria</label>
    <select id="filtro-categoria" name="categoria">
      <option value="">Todas as categorias</option>
      <% categories.forEach(function(category) { %>
      <option value="<%= category.slug %>" <%= filters.categoria === category.slug ? 'selected' : '' %>><%= category.nome %></option>
      <% }); %>
    </select>
  </div>
  <div class="admin-filters__actions">
    <button class="btn btn--green btn--sm" type="submit"><%- icon('search') %> Filtrar</button>
    <% if (filters.q || filters.categoria) { %>
    <a class="admin-filters__clear" href="<%= url('/admin/produtos') %>">Limpar</a>
    <% } %>
  </div>
</form>

<section class="panel">
  <% if (products.length) { %>
  <div class="table-wrap">
    <table class="admin-table admin-table--products">
      <thead>
        <tr>
          <th>Produto</th>
          <th>Categoria</th>
          <th>Preço varejo</th>
          <th>Preço atacado</th>
          <th>Mín. atacado</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% products.forEach(function(product) { %>
        <tr>
          <td>
            <a class="admin-product" href="<%= url('/admin/produtos/' + product.id + '/editar') %>">
              <span class="admin-product__thumb">
                <img src="<%= url(product.imagens[0]) %>" alt="" loading="lazy" width="42" height="42">
              </span>
              <span class="admin-product__info">
                <strong><%= product.nome %></strong>
                <small><%= product.sku %></small>
              </span>
            </a>
          </td>
          <td class="is-muted"><%= categoryName(product.categoria) %></td>
          <td class="is-nowrap"><strong><%= formatBRL(product.precoVarejo) %></strong></td>
          <td class="is-nowrap"><%= formatBRL(product.precoAtacado) %></td>
          <td class="is-nowrap is-muted"><%= product.minimoAtacado %> un.</td>
          <td>
            <div class="admin-statuses">
              <span class="badge <%= product.ativo === false ? 'badge--off' : 'badge--on' %>"><%= product.ativo === false ? 'Inativo' : 'Ativo' %></span>
              <% if (product.destaque) { %><span class="badge badge--gold">Destaque</span><% } %>
            </div>
          </td>
          <td>
            <div class="admin-actions">
              <a class="admin-icon-btn" href="<%= url('/atacado/produto/' + product.slug) %>" target="_blank" rel="noopener" aria-label="Ver <%= product.nome %> no site"><%- icon('external-link') %></a>
              <a class="admin-icon-btn" href="<%= url('/admin/produtos/' + product.id + '/editar') %>" aria-label="Editar <%= product.nome %>"><%- icon('pencil') %></a>
              <form action="<%= url('/admin/produtos/' + product.id + '/excluir') %>" method="post" data-confirm="Excluir o produto “<%= product.nome %>”? Essa ação não pode ser desfeita.">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button class="admin-icon-btn admin-icon-btn--danger" type="submit" aria-label="Excluir <%= product.nome %>"><%- icon('trash') %></button>
              </form>
            </div>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
  <% } else { %>
  <div class="admin-empty">
    <span class="admin-empty__icon"><%- icon('search') %></span>
    <h3>Nenhum produto encontrado</h3>
    <p>Ajuste os filtros ou cadastre um novo produto na vitrine.</p>
    <a class="btn btn--outline btn--sm" href="<%= url('/admin/produtos') %>">Limpar filtros</a>
  </div>
  <% } %>
</section>

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