{% include '_macros/addon_tile.html' %}
{% include '_macros/more_button.html' %}

<section class="addon-promo">
  <img src="{{ media('/fireplace/img/icons/addons.svg') }}" alt="">
  <h1>{{ _('Add-ons') }}</h1>
  <p>{{ _('Customize your device with powerful features.') }}</p>
</section>

<section class="main full container-list">
  {% defer (url=api('addon_list'), pluck='objects', as='addon', key='slug',
            paginate='.addon-list') %}
    <ul class="addon-list">
      {% for addon in this %}
        <li>
          {{ addon_tile(addon) }}
        </li>
      {% endfor %}
      {% if response.meta.next %}
        {{ more_button(response.meta.next) }}
      {% endif %}
    </ul>
  {% placeholder %}
    <p class="spinner padded alt"></p>
  {% empty %}
    <p class="no-results">
      {{ _('No Firefox OS add-ons found.') }}
    </p>
  {% except %}
    <p class="no-results">
      {% if error == 400 or error == 404 %}
        {{ _('No Firefox OS add-ons found.') }}
      {% elif error == 500 %}
        {{ _('An internal server error occurred. Please try again later.') }}
      {% endif %}
    </p>
  {% end %}
</section>