{% import 'macros/stickers.html' as stick %}
{% import 'macros/layout.html' as layout %}




{% call layout.details('/filter', 'md:hidden') %}
  {% call layout.filter_summary("filter-summary-mobile", current_local_href, search, search_count, hx_select) %}
      <div
          class="col-span-12 min-w-0 grid grid-cols-1 gap-1 bg-gray-100 px-2"
          role="list">

          
          <div class="flex flex-row items-start gap-2">
            {% if sort %}
              <ul class="relative inline-flex items-center justify-center gap-2">
                <!-- sticker icon -->
                {% for k,l,i in sort_options %}
                  {% if k == sort %}
                    {% set key = k %}
                    {% set label = l %}
                    {% set icon = i %}
                    <li role="listitem">  
                      {{ stick.sticker(asset_url(icon), label, True)}}
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
              {% endif %}
              {% if liked %}
                <div class="flex flex-col items-center gap-1 pb-1">
                    <i aria-hidden="true"
                      class="fa-solid fa-heart text-red-500 text-[40px] leading-none"
                    ></i>
                    {% if liked_count is not none %}
                      <div class="
                        {{'text-[10px] text-stone-500' if liked_count != 0 else 'text-md text-red-500 font-bold'}}
                        mt-1 leading-none tabular-nums"
                      >
                        {{ liked_count }}
                      </div>
                    {% endif %}
                    </div>
              {% endif %}
              {% if selected_labels and selected_labels|length %}
                <ul class="relative inline-flex items-center justify-center gap-2">
                  {% for st in selected_labels %}
                    {% for s in labels %}
                      {% if st == s.name %}
                        <li role="listitem" class="flex flex-col items-center gap-1 pb-1">
                            {{ stick.sticker(asset_url('nav-labels/' + s.name + '.svg'), s.name, True)}}
                            {% if s.count is not none %}
                              <div class="
                                {{'text-[10px] text-stone-500' if s.count != 0 else 'text-md text-red-500 font-bold'}}
                                mt-1 leading-none tabular-nums
                              "
                              >
                                {{ s.count }}
                              </div>
                            {% endif %}
                        </li>
                      {% endif %}
                    {% endfor %}
                  {% endfor %}
                </ul>
              {% endif %}
              {% if selected_stickers and selected_stickers|length %}
                <ul class="relative inline-flex items-center justify-center gap-2">
                {% for st in selected_stickers %}
                  {% for s in stickers %}
                    {% if st == s.name %}
                      <li role="listitem" class="flex flex-col items-center gap-1 pb-1">
                        <!-- sticker icon -->
                        {{ stick.sticker(asset_url('stickers/' + s.name + '.svg'), s.name, True)}}
                          {% if s.count is not none %}
                            <span class="
                              {{'text-[10px] text-stone-500' if s.count != 0 else 'text-md text-red-500 font-bold'}}
                              mt-1 leading-none tabular-nums
                            "
                            >
                              {{ s.count }}
                            </span>
                          {% endif %}
                      </li>
                    {% endif %}
                  {% endfor %}
                {% endfor %}
              </ul>
            {% endif %}
          </div>

          {% if selected_brands and selected_brands|length %}
          <ul class_="w-full grid grid-cols-12 items-center gap-3 px-4 py-3">
            {% for b in selected_brands %}
              <li role="listitem" class="flex flex-row items-center gap-2">
                {% set ns = namespace(count=0) %}
                {% for brand in brands %}
                  {% if brand.name == b %}
                    {% set ns.count = brand.count %}
                  {% endif %}
                {% endfor %}
                {% if ns.count %}
                  <div class="text-md">{{ b }}</div>
                  <div class="text-md">{{ ns.count }}</div>
                {% else %}
                  <div class="text-md text-red-500">{{ b }}</div>
                  <div class="text-xl text-red-500">0</div>
                {% endif %}
              </li>
            {% endfor %}


          </ul>
          {% endif %}
        </div>
  {% endcall %}
  <div id="filter-details-mobile"  style="display:contents">
    {% include "_types/browse/mobile/_filter/index.html" %}
  </div>
{% endcall %}