{% include '_macros/app_tile.html' %}
{% include '_macros/more_button.html' %}
{% include '_macros/sort_toggle.html' %}

<section class="main">
  <div class="subheader cat-header desktop-cat-header">
    <h1 class="category-header-icon cat-{{ category }} cat-icon">
      {{ category_name }}
      {% if not isWebsiteCategories %}
        <a class="app-list-filters-expand-toggle" title="{{ _('Expand') }}"></a>
      {% endif %}
    </h1>
    <div class="sort-toggle-container">
      {{ category_sort_toggle(popularUrl, newUrl) }}
    </div>
  </div>
  <div class="subheader sort-toggle-container mobile-cat-header">
    {{ category_sort_toggle(popularUrl, newUrl) }}
    {% if not isWebsiteCategories %}
      <a class="app-list-filters-expand-toggle" title="{{ _('Expand') }}"></a>
    {% endif %}
  </div>
</section>

<section class="category app-list-page main full">
{% defer (url=endpoint, pluck='objects', as=getProductType, paginate='.app-list') %}
  <ul class="app-list {{ 'paginated' if response.meta.next }}">
    {% for app in this %}
      <li class="item result app-list-app">
        {{ app_tile(app, tray=True, alt_style=True, src=source) }}
      </li>
    {% endfor %}

    {# Render the more button if there's another page of results #}
    {% if response.meta.next %}
      {{ more_button(response.meta.next) }}
    {% endif %}
  </ul>
{% placeholder %}
  <p class="spinner padded alt"></p>
{% empty %}
  <h1 class="no-results">
    {{ _('No results found') }}
  </h1>
{% except %}
  <p class="no-results">
    {% if error == 400 or error == 404 %}
      {{ _('The category you requested does not exist.') }}
    {% elif error == 500 %}
      {{ _('An internal server error occurred. Please try again later.') }}
    {% endif %}
  </p>
{% end %}
</section>