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

{% macro website_tabs(websites) %}
  {% if websites %}
    <section class="feed-item-item feed-item-website feed-item-website-tabs">
      <ol>
        {% for website in websites %}
          {% set website = apps.transform(website) %}
          {% set name = website.name|translate(website) %}
          <li class="mkt-tile">
            <button class="feed-item-website-tabs-tab">
              {{ deferred_icon(website.icons['64'], name) }}
            </button>
            <a href="{{ website.url }}" class="feed-item-website-tabs-content mkt-website-link" data-product="{{ website|json }}">
              <h1>{{ name }}</h1>
              <p>{{ _('Visit this top site!') }}</p>
            </a>
          </li>
        {% endfor %}
      </ol>
    </section>
  {% endif %}
{% endmacro %}

{% macro website_carousel(websites) %}
  {% if websites %}
    <div class="feed-item-item feed-item-website feed-item-website-carousel">
      <ol>
      {% for website in websites %}
        {% set website = apps.transform(website) %}
        {% set name = website.name|translate(website) %}
        <li>
          <a class="mkt-tile mkt-website-link" data-slug="{{ website.slug }}" data-id="{{ website.id }}" href="{{ website.url }}" data-content-type="{{ website.contentType }}" data-product="{{ website|json }}">
            <span class="mkt-app-heading">
              {{ deferred_icon(website.icons['64'], name) }}
              <span class="info mkt-tile-info">
                <h3 class="mkt-app-name" title="{{ name }}">{{ name }}</h3>
                {{ market_button(website, data_attrs={
                  'manifest_url': website.manifest_url,
                  'source': src,
                  'slug': website.slug
                }) }}
              </span>
            </span>
          </a>
        </li>
      {% endfor %}
      </ol>
      <a class="feed-item-website-carousel-next" href="#">
        <span>{{ _('Show me another site') }}</span>
        <span class="feed-item-website-carousel-counter"></span>
      </a>
    </div>
  {% endif %}
{% endmacro %}