<%
  const drawerParams = new URLSearchParams();
  if (filtros && filtros.q) drawerParams.set('q', filtros.q);
  if (filtros && filtros.ordenar && filtros.ordenar !== 'relevancia') drawerParams.set('ordenar', filtros.ordenar);
  function drawerUrl(cat) {
    const params = new URLSearchParams(drawerParams);
    if (cat) params.set('categoria', cat);
    return url(`/${modo}${params.toString() ? '?' + params.toString() : ''}`);
  }
  function drawerSwitchUrl() {
    const params = new URLSearchParams();
    if (filtros && filtros.q) params.set('q', filtros.q);
    if (filtros && filtros.categoria) params.set('categoria', filtros.categoria);
    if (filtros && filtros.ordenar && filtros.ordenar !== 'relevancia') params.set('ordenar', filtros.ordenar);
    return url(`/${outroModo}${params.toString() ? '?' + params.toString() : ''}`);
  }
%>
<div class="drawer" id="catalog-drawer" data-drawer aria-hidden="true">
  <div class="drawer__backdrop" data-drawer-close></div>
  <aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="drawer-title" tabindex="-1">
    <header class="drawer__head">
      <div>
        <p class="eyebrow">Navegue pela vitrine</p>
        <h2 id="drawer-title">Categorias</h2>
      </div>
      <button class="icon-btn icon-btn--cream" type="button" data-drawer-close aria-label="Fechar menu">
        <%- icon('x') %>
      </button>
    </header>

    <div class="drawer__body">
      <nav class="drawer-nav" aria-label="Filtrar por categoria">
        <a class="drawer-nav__item <%= !filtros.categoria ? 'is-active' : '' %>" href="<%= drawerUrl('') %>">
          <span class="drawer-nav__icon"><%- icon('grid') %></span>
          <span class="drawer-nav__text"><strong>Todos os produtos</strong><small>Ver a vitrine completa</small></span>
          <span class="drawer-nav__count"><%= categorias.reduce(function(total, cat) { return total + cat.total; }, 0) %></span>
        </a>
        <% categorias.forEach(function(cat) { %>
        <a class="drawer-nav__item <%= filtros.categoria === cat.slug ? 'is-active' : '' %>" href="<%= drawerUrl(cat.slug) %>">
          <span class="drawer-nav__icon"><%- categoryIcon(cat.slug) %></span>
          <span class="drawer-nav__text"><strong><%= cat.nome %></strong><small><%= cat.descricao %></small></span>
          <span class="drawer-nav__count"><%= cat.total %></span>
        </a>
        <% }); %>
      </nav>

      <% if ((filtros && filtros.q) || (filtros && filtros.categoria)) { %>
      <a class="drawer__clear" href="<%= url('/' + modo) %>"><%- icon('rotate-ccw') %> Limpar busca e filtros</a>
      <% } %>

      <div class="drawer__mode">
        <div>
          <p class="eyebrow">Você está na vitrine</p>
          <strong><%= modeLabel(modo) %></strong>
        </div>
        <a class="btn btn--outline btn--sm" href="<%= drawerSwitchUrl() %>">
          Trocar para <%= modeLabel(outroModo) %>
          <%- icon('arrow-right') %>
        </a>
      </div>
    </div>

    <footer class="drawer__foot">
      <p>Precisa de ajuda para encontrar algo?</p>
      <a class="btn btn--green btn--full" href="<%= whatsappLink(settings.whatsapp, 'Olá! Estou no catálogo e gostaria de ajuda para encontrar um produto.') %>" target="_blank" rel="noopener">
        <%- icon('whatsapp') %>
        Falar com a loja
      </a>
    </footer>
  </aside>
</div>
