{% extends "dictionary/base.html" %}
{% load filters i18n cache %}
{% block title %}{{ safename }}{% if tabs.current %} - {% for name, safename in tabs.available.items %}{% if name == tabs.current %}{{ safename }}{% endif %}{% endfor %}{% endif %}{% endblock %}

{% cache None topic_list_description safename request.site_name %}
    {% block description %}{% blocktrans with site_name=request.site.name %}latest topics in {{ safename }} channel. join {{ site_name }} community to create a new topic in this channel or elaborate on existing topics.{% endblocktrans %}{% endblock %}
{% endcache %}

{% block content %}
    <div class="left-frame-in">
        <div>
            <h1>
                {% if request.GET.ordering and slug == "search" %}
                    <a class="expand" role="button"  tabindex="0" data-toggle="collapse" data-target="#search_form_extended_mobile" aria-expanded="false">{{ safename }}</a>
                {% else %}
                    <span>{{ safename }}</span>
                {% endif %}

            {% if slug == "popular" %}
                <span role="button" tabindex="0" title="{% trans "channel exclusions" %}" style="display: inline-block; vertical-align: baseline;" class="exclusion-button">
                    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <use href="#cog"></use>
                    </svg>
               </span>
            {% endif %}
            </h1>
        </div>

        {% if tabs %}
            <ul class="nav nav-tabs nav-fill">
            {% for name, safename in tabs.available.items %}
                <li class="nav-item">
                    <a class="nav-link{% if name == tabs.current %} active{% endif %}" href="?tab={{ name }}">{{ safename }}</a>
                </li>
            {% endfor %}
            </ul>
        {% endif %}

        {% if slug == "today" %}
            {% if refresh_count %}
                <form method="post">
                    {% csrf_token %}
                    <button class="refresh-button-mobile">{% trans "refresh" %} ({{ refresh_count }})</button>
                </form>
            {% endif %}
        {% endif %}

        {% if slug == "popular" %}
            <div class="exclusion-settings {% if not exclusions.active %}dj-hidden{% endif %}" id="exclusion-settings-mobile">
                <small>{% trans "personalize popular topics:" %}</small>
                <ul class="exclusion-choices">
                    {% for category in exclusions.available %}
                        <li><a role="button" tabindex="0" {% if category.slug in exclusions.active %}class="active"{% endif %} data-slug="{{ category.slug }}">#{{ category.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {% if slug == "today-in-history" %}
            <select class="mobile-topic-list form-control mb-2" id="mobile_year_changer" aria-label="{% trans "Year selector" %}">
                {% for y in year_range %}
                    <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
        {% endif %}


        {% if slug == "search" %}
            {# render search form, if request.GET.ordering has value, it means there is a search #}
            <form method="get" action="{% url 'topic_list' slug='search' %}" class="search_mobile mb-3{% if request.GET.ordering %} collapse{% endif %}" id="search_form_extended_mobile">
                {% include "dictionary/includes/forms/extended_search.html" with source="mobile" %}
                <button type="submit" class="btn btn-django stretch">{% trans "search fabulously" %}</button>
            </form>
        {% endif %}


        <ul id="topic-list-standalone" class="list-group topic-list">
            {% if page.object_list %}
                {% for topic in page.object_list %}
                    <li class="list-group-item">
                        <a href="{{ slug_identifier }}{{ topic.slug }}/{{ parameters }}">{{ topic.title }}<small class="total_entries">{% if topic.count %}{{ topic.count|humanize_count }}{% endif %}</small></a>
                    </li>
                {% endfor %}
            {% else %}
                <small class="mt-2">{% trans "nothing here" %}</small>
            {% endif %}
        </ul>

        {% include "dictionary/includes/paginaton.html" with stretch="yes" paginator=page %}
    </div>
{% endblock %}