{% extends "hyperkitty/base.html" %}
{% load i18n %}
{% load hk_generic %}
{% load pagination %}


{% block head_title %}
{{ list_title }} - {{ mlist.display_name|default:mlist.name }} - {{ block.super }}
{% endblock %}

{% block content %}

<div class="row">

{% include 'hyperkitty/fragments/month_list.html' %}
    <div id="thread-list" class="col-sm-12 col-md-10">
        <div class="thread-list-header row">
            <h1 class="col-12">
                <a href="{% url 'hk_list_overview' mlist_fqdn=mlist.name %}" class="list-name">
                    {% if mlist.display_name %}
                        {{ mlist.display_name }}
                    {% else %}
                        {{ mlist.name|until:"@" }}
                    {% endif %}
                </a>
                <small class="d-none d-md-block">{{ list_title }}</small>
                <div class="d-md-none">
                    {% include 'hyperkitty/fragments/month_list.html' with show_select='True' %}
                </div>
            </h1>
            <span class="list-address col-12">{{ mlist.name }}</span>
            <ul class="list-unstyled list-stats thread-list-info col-6 col-sm-8">
                {% if participants_count %}
                <li>
                    <i class="fa fa-user"></i>
                    {{ participants_count }} {% trans "participants" %}
                </li>
                {% endif %}
                <li>
                    <i class="fa fa-comment"></i>
                    {{ threads.paginator.count }} {% trans "discussions" %}
                </li>
            </ul>
            <div class="thread-new right col-6 col-sm-4" {% if not user.is_authenticated %}title="{% trans 'You must be logged-in to create a thread.' %}"{% endif %}>
                <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}"
                   class="btn btn-outline-primary{% if not user.is_authenticated %} disabled{% endif %}">
                    <i class="fa fa-plus"></i>
                    {% trans '<span class="d-none d-md-inline">Start a n</span><span class="d-md-none">N</span>ew thread' %}
                </a>
            </div>
        </div>

        {% for thread in threads %}
            {% include "hyperkitty/threads/summary_thread_large.html" %}
        {% empty %}
            <p>{% trans "Sorry no email threads could be found" %} {{ no_results_text }}.</p>
        {% endfor %}

        {% paginator threads bydate=True %}

    </div>

</div>

{% endblock %}

{% block additionaljs %}
<script>
$(document).ready(function() {
    $('span.expander').expander({
        slicePoint: 100,
        userCollapseText : '<br /><br /><a class="btn-expander"><i class="fa fa-minus-square-o" aria-label="View less"></i> View less</a>',
        expandText : '<br /><a class="btn-expander"><i class="fa fa-plus-square-o" aria-label="View more"></i> View more</a>',
        beforeExpand: function() {
            $(this).removeClass("collapsed");
            $(this).addClass("expanded");
        },
        onCollapse: function() {
            $(this).removeClass("expanded");
            $(this).addClass("collapsed");
        }
    });
    setup_category();

    // onchange event for month_list select (seen only in tiny/xs viewports)
    // only add this event listener if the element exists
    if ($('select#months-list').length > 0) {
        var months = {
            'January' : '1',
            'February' : '2',
            'March' : '3',
            'April' : '4',
            'May' : '5',
            'June' : '6',
            'July' : '7',
            'August' : '8',
            'September' : '9',
            'October' : '10',
            'November' : '11',
            'December' : '12',
        }
        $('select#months-list').change(function() {
            var date = $(this).val().split(' ');
            var url = "{% url 'hk_archives_with_month' year=9999 mlist_fqdn=mlist.name month=0 %}";
            url = url.replace('0', months[date[0]]);
            url = url.replace('9999', date[1]);
            window.parent.location.href = url;
        });
    }

});
</script>
{% endblock %}
