{% from "_macros/market_button.html" import market_button %}
{% include '_macros/more_button.html' %}

<section class="main">
  <div class="subheader">
    <h1> {{ title }} </h1>
  </div>
</section>

<section class="main full app-list-page c langpacks">
  <header class="secondary-header">
    <h2>{{ subtitle }}</h2>
  </header>
  {% defer (url=anonApiParams('langpacks', params), pluck='objects', paginate='.app-list') %}
    <ul class="app-list {{ 'paginated' if response.meta.next }}">
      {% for langpack in this %}
        {% set app = transform_to_app(langpack) %}
        <li class="app-list-app">
          <div class="product mkt-tile langpack" data-id="{{ app.pk }}">
            <h3>{{ app.language_display }}</h3>
            {{ market_button(app, data_attrs={'manifest_url': app.manifest_url,
                                              'slug': app.slug}) }}
          </div>
        </li>
      {% endfor %}
      {% if response.meta.next %}
        {# Render the more button if there's another page of results #}
        {{ more_button(response.meta.next) }}
      {% endif %}
    </ul>
  {% placeholder %}
    <p class="spinner padded alt"></p>
  {% empty %}
    <p class="no-results">
      {{ _('No language packs found.') }}
    </p>
  {% except %}
    <p class="no-results">
      {% if error == 400 or error == 404 %}
        {{ _('No language packs found.') }}
      {% elif error == 500 %}
        {{ _('An internal server error occurred. Please try again later.') }}
      {% endif %}
    </p>
  {% end %}
</section>