{% extends "_layout.html" %}
{% load i18n staticfiles %}

{% block page_title %}{% blocktrans with collection=selected_collection.name %}{{ collection }} amiibos in {% endblocktrans %}{{ block.super }}{% endblock %}

{% block meta_twitter_title %}{% blocktrans with collection=selected_collection.name %}{{ collection }} amiibos in {% endblocktrans %}{{ block.super }}{% endblock %}
{% block meta_og_title %}{% blocktrans with collection=selected_collection.name %}{{ collection }} amiibos in {% endblocktrans %}{{ block.super }}{% endblock %}

{% block meta_twitter_url %}{{ amiibo.get_absolute_url }}{% endblock %}
{% block meta_og_url %}{{ amiibo.get_absolute_url }}{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <i class="right chevron icon divider"></i>
  {% if selected_collection %}
    <span class="active section">{{ selected_collection.name }}</span>
  {% else %}
    <span class="active section">{% trans "All amiibo" %}</span>
  {% endif %}
{% endblock %}

{% block js_views %}{{ block.super }},collection-search{% endblock %}

{% block main_content %}
  <div class="ui page grid">
    <div class="sixteen wide column">
      {% if selected_collection.name %}<h1>{{ selected_collection.name }}</h1>{% endif %}
      <div class="ui icon big fluid input">
        <input type="text" placeholder="{% trans 'Search...' %}" data-component="collectionSearchInput">
        <i class="inverted circular cancel link icon" data-component="collectionSearchReset"></i>
      </div>
    </div>
    <div class="sixteen wide column">
      <div class="ui five doubling cards" data-component="collectionList">
        {% for amiibo in amiibo_list %}
          {% include "amiibo/widgets/amiibo-card.html" with amiibo=amiibo %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}
