{% load filters functions i18n %}

{% firstofany left_frame left_frame_fallback as lfproxy %}

{% with lfproxy.context as lf %}
    {# CATEGORY NAME AND DATA OPTIONS @formatter:off #}
    <div class="m-0" id="category_holder" style="min-height: 35px; align-items: center;">

        <h2 class="p-0">

            {# CATEGORY SAFENAME #}
            <span id="current_category_name" style="vertical-align: sub;">{{ lf.safename }}</span>
            {# CATEGORY SAFENAME #}

            {# GUNDEM FILTER TOGGLER BUTTON #}
            <span {% if lf.slug != "popular" %}class="dj-hidden"{% else %}{{ lf.exclusions.active|yesno:'class="active",'|safe }}{% endif %} id="popular_excluder">
                <svg role="button" tabindex="0" class="exclusion-button" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <use href="#cog"></use>
                    <title>{% trans "channel exclusions" %}</title>
                </svg>
            </span>
            {# GUNDEM FILTER TOGGLER BUTTON END #}

            {# LOADING INDICATOR #}
            <span id="load_indicator" style="display: none;">
                <svg class="spinning" width="22" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <use href="#loading"></use>
                    <title>{% trans "loading" %}</title>
                </svg>
            </span>
            {# LOADING INDICATOR END #}
        </h2>

        {# YEAR SELECTOR START #}
        <select {% if lf.slug != "today-in-history" %}style="display: none;"{% endif %} class="year-select py-1 px-1 mb-1 form-control" id="year_select" aria-label="{% trans "Year selector" %}">
            {% for year in lf.year_range %}
                <option value="{{ year }}" {% if year == lf.year %}selected{% endif %}>{{ year }}</option>
            {% endfor %}
        </select>
        {# YEAR SELECTOR END #}
    </div>
    {# CATEGORY NAME AND DATA OPTIONS END #}

    {# GUNDEM FILTER OPTIONS #}
    <div class="dj-hidden exclusion-settings" id="exclusion-choices">
        <small style="display: block">{% trans "personalize popular topics:" %}</small>
        {% spaceless %}
            <ul class="exclusion-choices">
                {% if lf.slug == "popular" %}
                    {% for category in lf.exclusions.available %}
                        <li><a role="button" title="{{ category.description }}" {% if category.slug in lf.exclusions.active %}class="active"{% endif %} tabindex="0" data-slug="{{ category.slug }}">#{{ category.name }}</a></li>
                    {% endfor %}
                {% endif %}
            </ul>
        {% endspaceless %}
    </div>
    {# GUNDEM FILTER END #}

    {# TABS #}
    {% spaceless %}
    <ul class="nav nav-tabs nav-fill{% if not lf.tabs %} dj-hidden{% endif %}" id="left-frame-tabs">
    {% if lf.tabs %}
        {% for name, safename in lf.tabs.available.items %}
            <li class="nav-item">
                <a role="button" tabindex="0" data-lf-slug="{{ lf.slug }}" data-tab="{{ name }}" class="nav-link{% if name == lf.tabs.current %} active{% endif %}">{{ safename }}</a>
            </li>
        {% endfor %}
    {% endif %}
    </ul>
    {% endspaceless %}
    {# TABS #}


    {#  REFRESH BUTTON  #}
    <div role="button" tabindex="0" class="refresh-button {% if not lf.refresh_count %}dj-hidden{% endif %}" id="refresh_bugun" title="{% trans "make it rain" %}">{% trans "refresh" %} <span id="new_content_count">({{ lf.refresh_count }})</span></div>
    {#  REFRESH BUTTON  #}

    {# PAGINATION START #}
    <div id="lf_pagination_wrapper" class="lf_pagination index{% if lf.page.number == 1 or not lf.page.has_other_pages %} dj-hidden{% endif %}">
        <a title="{% trans "previous page" %}" class="mr-1" id="lf_navigate_before" role="button" tabindex="0">«</a>

        <select class="shadow-focus" id="left_frame_paginator" aria-label="{% trans "Page selector" %}">
            {% for page in lf.page.paginator.page_range %}
                <option value="{{ page }}" {% if page == lf.page.number %}selected{% endif %}>{{ page }}</option>
            {% endfor %}
        </select>

        <span class="mx-2">&sol;</span>
        <a title="{% trans "last page" %}" id="lf_total_pages" role="button" tabindex="0">{{ lf.page.paginator.num_pages }}</a>
        <a title="{% trans "subsequent page" %}" class="ml-1{{ lf.page.has_next|yesno:", d-none" }}" id="lf_navigate_after" role="button" tabindex="0">»</a>
    </div>
    {# PAGINATION END #}

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

    {# SHOW MORE LINK  #}
    <a role="button" tabindex="0" id="show_more" {% if lf.page.number != 1 or not lf.page.has_other_pages %}class="d-none"{% endif %}>{% trans "show more" %}</a>
    {# SHOW MORE LINK  #}
{% endwith %}