<%- include('partials/head', {
  title,
  pageTitle: 'Categorias',
  sectionLabel: 'Organização',
  active: 'categories'
}) %>

<% const formValues = typeof form !== 'undefined' && form ? form : {}; %>

<div class="admin-section-head">
  <div>
    <h2>Organize a navegação da vitrine</h2>
    <p>As categorias aparecem no menu lateral e nos filtros do catálogo.</p>
  </div>
</div>

<div class="admin-grid admin-grid--sidebar">
  <section class="panel">
    <div class="panel__head">
      <h2>Categorias cadastradas</h2>
      <span class="badge"><%= categories.length %> no total</span>
    </div>

    <% if (categories.length) { %>
    <div class="panel__body">
      <div class="category-admin-list">
        <% categories.forEach(function(category) { %>
        <div class="category-admin">
          <form action="<%= url('/admin/categorias/' + category.id) %>" method="post">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <div class="category-admin__row">
              <div class="field">
                <label for="nome-<%= category.id %>">Nome</label>
                <input id="nome-<%= category.id %>" name="nome" type="text" value="<%= category.nome %>" maxlength="60" required>
              </div>
              <div class="field">
                <label for="desc-<%= category.id %>">Descrição</label>
                <input id="desc-<%= category.id %>" name="descricao" type="text" value="<%= category.descricao || '' %>" maxlength="160">
              </div>
              <div class="field">
                <label for="ordem-<%= category.id %>">Ordem</label>
                <input id="ordem-<%= category.id %>" name="ordem" type="number" min="1" max="99" value="<%= category.ordem %>">
              </div>
              <div class="category-admin__actions">
                <button class="btn btn--green btn--sm" type="submit"><%- icon('check') %> Salvar</button>
              </div>
            </div>
            <p class="category-admin__meta">
              <span>/<%= category.slug %></span>
              <span>·</span>
              <span><%= category.total %> <%= category.total === 1 ? 'produto' : 'produtos' %></span>
            </p>
          </form>

          <form action="<%= url('/admin/categorias/' + category.id + '/excluir') %>" method="post" data-confirm="Excluir a categoria “<%= category.nome %>”? Só é possível excluir categorias sem produtos.">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button class="admin-icon-btn admin-icon-btn--danger category-admin__delete" type="submit" aria-label="Excluir categoria <%= category.nome %>"><%- icon('trash') %></button>
          </form>
        </div>
        <% }); %>
      </div>
    </div>
    <% } else { %>
    <div class="admin-empty">
      <span class="admin-empty__icon"><%- icon('grid') %></span>
      <h3>Nenhuma categoria cadastrada</h3>
      <p>Crie a primeira categoria ao lado para organizar os produtos.</p>
    </div>
    <% } %>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Nova categoria</h2></div>
    <div class="panel__body">
      <form class="admin-form" action="<%= url('/admin/categorias') %>" method="post">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">

        <div class="<%= errors.nome ? 'field has-error' : 'field' %>">
          <label for="nova-nome">Nome <span class="req">*</span></label>
          <input id="nova-nome" name="nome" type="text" value="<%= formValues.nome || '' %>" maxlength="60" placeholder="Ex.: Decoração" required>
          <% if (errors.nome) { %><span class="field__error"><%= errors.nome %></span><% } %>
        </div>

        <div class="field">
          <label for="nova-descricao">Descrição</label>
          <input id="nova-descricao" name="descricao" type="text" value="<%= formValues.descricao || '' %>" maxlength="160" placeholder="Uma frase curta sobre a categoria">
        </div>

        <div class="field">
          <label for="nova-ordem">Ordem de exibição</label>
          <input id="nova-ordem" name="ordem" type="number" min="1" max="99" value="<%= formValues.ordem || categories.length + 1 %>">
          <small class="hint">Números menores aparecem primeiro.</small>
        </div>

        <button class="btn btn--green btn--full" type="submit"><%- icon('plus') %> Criar categoria</button>
      </form>
    </div>
  </section>
</div>

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