{% extends "_layout.html" %}
{% load i18n gravatar socialaccount %}

{% block js_views %}{{ block.super }},relation{% endblock %}

{% block main_content %}
  <div class="ui page stackable grid">
    <div class="four wide column">
      <img class="ui image small circular bordered" src="{% gravatar this_user 400 %}"><br>
    </div>
    <div class="eight wide column">
      <h2 class="ui header">
        {{ this_user.username }}
        <div class="sub header">
          <a href="https://twitter.com/share?text={% trans "Look at my amiibo collection!" %}" class="twitter-share-button" data-via="amiibofindr">Tweet</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          <div class="fb-like" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
        </div>
        <div class="ui statistics">
          <div class="statistic no-margin-bottom">
            <div class="value">
              {{ stats.figures_count }}
            </div>
            <div class="label">
              {% trans 'Figures' %}
            </div>
          </div>
          <div class="statistic no-margin-bottom">
            <div class="value">
              {{ stats.cards_count }}
            </div>
            <div class="label">
              {% trans 'Cards' %}
            </div>
          </div>
        </div>
      </h2>
    </div>
    <div class="ui four wide column right aligned">
      {% if user.is_authenticated %}
        {% get_social_accounts this_user as accounts %}
        {% if accounts %}
          <h2>{% trans "Contact me in:" %}</h2>
          <div class="ui list">
            {% for provider, profiles in accounts.items %}
              {% for profile in profiles %}
                <div class="item">
                  <a class="ui button tiny {{ provider }} {% if provider == 'google' %}plus{% endif %}" href="{{ profile.get_profile_url }}">
                    <i class="{{ provider }} icon"></i>
                    {{ profile }}
                  </a>
                </div>
              {% endfor %}
            {% endfor %}
          </div>
        {% endif %}
      {% endif %}
    </div>
    {% if user.pk == this_user.pk %}
      <div class="sixteen wide column">
        <div class="ui text-center">
          {% trans "Want everyone to see your collection? Spread the word!" %}
          <a href="https://twitter.com/share?text={% trans "Look at my amiibo collection!" %}" class="twitter-share-button" data-via="amiibofindr">Tweet</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          <div class="fb-share-button" data-layout="button"></div>
        </div>
      </div>
    {% endif %}
    <div class="eight wide column">
      <div class="ui three item menu">
        <a href="{% url 'profile:main-filter' this_user.username type 'own' %}" class="item {% if relation == 'own' %}active{% endif %}">{% trans "Have it" %}</a>
        <a href="{% url 'profile:main-filter' this_user.username type 'want' %}" class="item {% if relation == 'want' %}active{% endif %}">{% trans "Want it" %}</a>
        <a href="{% url 'profile:main-filter' this_user.username type 'trade'%}" class="item {% if relation == 'trade' %}active{% endif %}">{% trans "Trade it" %}</a>
      </div>
    </div>
    <div class="eight wide column">
      <div class="ui two item menu">
        <a href="{% url 'profile:main-filter' this_user.username 'figures' relation %}" class="item {% if type == 'figures' %}active{% endif %}">{% trans "Figures" %}</a>
        <a href="{% url 'profile:main-filter' this_user.username 'cards' relation %}" class="item {% if type == 'cards' %}active{% endif %}">{% trans "Cards" %}</a>
      </div>
    </div>
    <div class="sixteen wide column">
      {% if amiibo_list %}
        <div class="ui {% if show == "cards" %}eight{% else %}five{% endif %} doubling cards" data-component="collectionList">
          {% for amiibo in amiibo_list %}
            {% include "amiibo/widgets/amiibo-card.html" with amiibo=amiibo %}
          {% endfor %}
        </div>
      {% else %}
        <div class="ui message info text-center">
          {% trans "Oooops, seems this user have nothing for that." %}
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
