{% extends "community/base.html" %}

{% if area == 'questions' %}
  {% set title = _('Top Contributors - Support Forum') %}
{% elif area == 'kb' %}
  {% set title = _('Top Contributors - Knowledge Base') %}
{% elif area == 'l10n' %}
  {% set title = _('Top Contributors - Localization') %}
{% endif %}
{% set crumbs = [(url('community.home'), _('Community Hub')),
                 (None, title)] %}

{% block content %}
  <article class="community-results">

    <section class="community-results-header">
      <h1 class="sumo-page-heading">{{ title }}</h1>

      {# Locale Filter #}
      <div class="inline-form locales-selects">
      {% if locales %}
        <div class="selector">
          <button type="button" class="ts-select-trigger">
            <!-- arrow icon using icon font -->
            <span aria-hidden="true" data-icon-arrow="&#xe800;" class="selector-arrow">
                <span class='current-selected'>
                  {% if not locale %}
                    {{ _('Select by Locale') }}
                  {% else %}
                    {{ settings.LANGUAGES_DICT[locale.lower()] }}
                  {% endif %}
                </span>
            </span>
          </button>
          <div class="select-options ts-modal" aria-expanded="false">
            {% set base_url = url('community.top_contributors', area=area) %}
            {% if product %}
              {% set base_url = base_url|urlparams(product=product.slug) %}
            {% endif %}
            <ul class="ts-options" tabindex="-1">
              <li>
                <a href="{{ base_url }}" {% if not locale %} aria-checked="true" class="selected"{% endif %}>
                  {{ _('All locales') }}
                </a>
              </li>
              {% for l in locales %}
                <li>
                  <a href="{{ base_url|urlparams(locale=l) }}"{% if l == locale %} aria-checked="true" class="selected"{% endif %}>
                    {{ settings.LANGUAGES_DICT[l.lower()] }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endif %}

      {# Product Filter #}
      {% if products %}
        <div class="selector">
          <button type="button" class="ts-select-trigger">
            <!-- arrow icon using icon font -->
            <span aria-hidden="true" data-icon-arrow="&#xe800;" class="selector-arrow">
                <span class='current-selected'>
                  {% if not product %}
                    {{ _('Filter by Product') }}
                  {% else %}
                    {{ pgettext('DB: products.Product.title', product.title) }}
                  {% endif %}
                </span>
            </span>
          </button>
          <div class="select-options ts-modal" aria-expanded="false">
            {% set base_url = url('community.top_contributors', area=area) %}
            {% if locale %}
              {% set base_url = base_url|urlparams(locale=locale) %}
            {% endif %}
            <ul class="ts-options" tabindex="-1">
              <li>
                <a href="{{ base_url }}" {% if not product %} aria-checked="true" class="selected"{% endif %}>
                  {{ _('All products') }}
                </a>
              </li>
              {% for p in products %}
                <li>
                  <a href="{{ base_url|urlparams(product=p.slug) }}"{% if p == product %} aria-checked="true" class="selected"{% endif %}>
                     {{ pgettext('DB: products.Product.title', p.title) }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endif %}
      </div>

      <p class="sumo-page-intro">
        {{ _('There are {total} users with at least one contribution in the last 90 days.')|f(total=total) }}
      </p>

    </section>

    <section class="sumo-page-section">
      <div class="sumo-card-grid">
        <div class="scroll-wrap">
          {% for result in results %}
            <div class="card elevation-01 results-user">
              {% if result['user']['avatar'] %}
                <img src="{{ result['user']['avatar'] }}" alt="" class="user-img-results card--img" />
              {% endif %}
              <span class="numbered">{{ loop.index + ((page - 1) * page_size) }}</span>
              <div class="card--details user-details">
                <h2 class="card--title">{{ result['user']['display_name'] }}</h2>
                <ul class="results-user-details">
                  <li>{{ result['user']['username'] }}</li>
                  <li>{{ _('Contributions in last 90 days: {count}')|f(count=result['count']) }}</li>
                  <li><a rel="nofollow" href="{{ url('users.profile', result['user']['id']) }}">{{ _('View Profile') }}</a></li>
                  <li><a href="{{ url('messages.new')|urlparams(to=result['user']['username']) }}">{{ _('Private Message') }}</a></li>
                  {% if result['user']['days_since_last_activity'] is not undefined %}
                    <li>
                      {{ _('Days since last activity:') }}
                      {{ result['user']['days_since_last_activity'] }}
                    </li>
                  {% endif %}
                </ul>
              </div>
            </div>
          {% endfor %}
        </div>
    </div>

    {% if total > page_size %}
      {% set base_url = url('community.top_contributors', area=area) %}
      {% if product %}
        {% set base_url = base_url|urlparams(product=product.slug) %}
      {% endif %}
      {% if locale %}
        {% set base_url = base_url|urlparams(locale=locale) %}
      {% endif %}
      <section class="pagination">
        <ol class="pagination cf">
          {% for i in range((total/page_size)|round(method='ceil')|int) %}
            <li{% if i + 1 == page %} class="selected"{% endif %}>
              <a href="{{ base_url|urlparams(page=i + 1) }}"{% if i + 1 == page %} class="btn-page"{% endif %}>
                {{ i + 1 }}
              </a>
            </li>
          {% endfor %}
        </ol>
      <section>
    {% endif %}

    </section>

  </article>
{% endblock %}