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

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

{% block head_feed %}
    <link rel="alternate" type="application/rss+xml" title="{{ mlist.display_name }}" href="{% url 'hk_list_feed' mlist_fqdn=mlist.name %}"/>
{% endblock %}

{% block content %}

    <div class="row">

        <div class="overview col-tn-12 col-sm-12">
            <div class="row">
                <div class="row">
                    <section id="title" class="col-auto">
                        <h1>
                            {% if mlist.display_name %}
                                {{ mlist.display_name }}
                            {% else %}
                                {{ mlist.name|until:"@" }}
                            {% endif %}
                        </h1>
                        {{ mlist.name }}
                        <p id="description">{{ mlist.description|default_if_none:"" }}</p>
                    </section> <!-- /title & description -->
                    <div class="discussions col-auto">
                        <ul class="nav nav-pills flex-nowrap" role="tablist">
                            <li class="nav-item">
                                <a href="#most-recent" aria-controls="most-recent" role="tab" data-bs-toggle="pill" class="nav-link active" aria-selected="true">{% trans 'Recent' %}</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#most-active" aria-controls="most-active" role="tab" data-bs-toggle="pill" aria-selected="false">{% trans 'Active' %}</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#most-popular" aria-controls="most-popular" role="tab" data-bs-toggle="pill" aria-selected="false">{% trans 'Popular' %}</a>
                            </li>

                            {% if user.is_authenticated %}
                                <li class="nav-item">
                                    <a class="nav-link" href="#flagged" aria-controls="flagged" role="tab" data-bs-toggle="pill" aria-selected="false">{% trans 'Favorites' %}</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" href="#posted-to" aria-controls="posted-to" role="tab" data-bs-toggle="pill" aria-selected="false">{% trans 'Posted' %}</a>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                <div class="col-md-9">

                    <div class="tab-content discussions pull-right col-12">
                        <div id="most-recent" role="tabpanel" class="tab-pane active">
                            <h2>{% trans "Recently active discussions" %}</h2>
                            <div data-load-from="{% url 'hk_list_overview_recent_threads' mlist.name %}">
                                <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                            </div>
                        </div>

                        <div id="most-popular" role="tabpanel" class="tab-pane">
                            <h2>{% trans "Most popular discussions" %}</h2>
                            <div data-load-from="{% url 'hk_list_overview_pop_threads' mlist.name %}">
                                <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                            </div>
                        </div>

                        <div id="most-active" role="tabpanel" class="tab-pane">
                            <h2>{% trans "Most active discussions" %}</h2>
                            <div data-load-from="{% url 'hk_list_overview_top_threads' mlist.name %}">
                                <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                            </div>
                        </div>
                        {% if user.is_authenticated %}
                            <div id="flagged" role="tabpanel" class="tab-pane">
                                <h2>{% trans "Discussions You've Flagged" %} ({{ flagged_threads|length }})
                                    {% if flagged_threads %}<i class="fa fa-caret-right"></i>{% endif %}
                                </h2>
                                <div data-load-from="{% url 'hk_list_overview_favorites' mlist.name %}">
                                    <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                                </div>
                            </div>
                            <div id="posted-to" role="tabpanel" class="tab-pane">
                                <h2>{% trans "Discussions You've Posted to" %} ({{ threads_posted_to|length }})
                                    {% if threads_posted_to %}<i class="fa fa-caret-right"></i>{% endif %}
                                </h2>
                                <div data-load-from="{% url 'hk_list_overview_posted_to' mlist.name %}">
                                    <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                                </div>
                            </div>
                        {% endif %}
                    </div> <!-- /container, for thread lists -->

                </div> <!-- /row, container for home, overview, & thread lists -->
                <div class="col-md-3">
                    <div class="">
                        <a href="{% url 'hk_archives_latest' mlist_fqdn=mlist.name %}" class="btn btn-primary mb-2">{% trans "All Threads" %}</a>
                        {% if posting_enabled %}
                            <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}" class="btn btn-success order-4 mb-2">
                                <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>
                        {% endif %}
                        {% if export_allowed %}
                            <button type="button" class="btn btn-outline-primary dropdown-toggle mb-2 d-none d-md-block" data-bs-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-download"></i>
                                {% trans "Download" %} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li class="dropdown-item"><a class="nav-link" href="{{ export.recent }}">{% trans "Past 30 days" %} <small>(mbox)</small></a></li>
                                <li class="dropdown-item"><a class="nav-link" href="{{ export.month }}">{% trans "This month" %} <small>(mbox)</small></a></li>
                                <li role="separator" class="dropdown-item divider"></li>
                                <li class="dropdown-item"><a class="nav-link" href="{% url 'hk_list_export_mbox' mlist_fqdn=mlist.name filename=mlist.name %}">
                                    {% trans "Entire archive" %} <small>(mbox)</small></a></li>
                            </ul>
                        {% endif %}
                        {% cache 86400 month_list_select LANGUAGE_CODE months_list mlist.name %}
                            {% include 'hyperkitty/fragments/month_list.html' with show_select='True' %}
                        {% endcache %}
                        {% if user.is_staff or user.is_superuser %}
                            <!-- Overview page for large screens. -->
                            <div class="d-none d-md-block mt-2">
                                <div class="list-actions">
                                    <a href="{% url 'hk_list_delete' mlist_fqdn=mlist.name %}" class="btn btn-danger">{% trans "Delete Archive" %}</a>
                                </div>
                            </div> <!-- /container, navbar & search (tiny/xs screens), new thread button -->
                        {% endif %}
                    </div> <!-- /container, title/description + the elements above -->

                    <div class="stats col w-100">
                        <div class="anchor-link">
                            <a id="stats"></a>
                        </div>
                        <h2>{% trans "Activity Summary" %}</h2>
                        <div class="chart w-100">
                            <p class="caption">{% trans "Post volume over the past <strong>30</strong> days." %}</p>
                            <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                        </div>

                        <p class="duration-text">
                            <span class="d-lg-block d-none">{% trans "The following statistics are from" %} </span>
                            <span class="d-lg-none">{% trans "In" %}</span>
                            {% trans "the past <strong>30</strong> days:" %}
                        </p>
                        <div class="list-stats list-unstyled">
                            <span><i class="fa fa-user"></i>{{ mlist.recent_participants_count }} {% trans "participants" %}</span>
                            <span><i class="fa fa-comments"></i>{{ mlist.recent_threads_count }} {% trans "discussions" %}</span>
                        </div>

                        <div class="row">
                            <section id="most-active-poster" class="col">
                                <h2>{% trans "Most active posters" %}</h2>
                                <div class="d-flex flex-md-column" data-load-from="{% url 'hk_list_overview_top_posters' mlist.name %}">
                                    <img alt="{% trans 'Loading...' %}" class="ajaxloader" src="{% static 'hyperkitty/img/ajax-loader.gif' %}" />
                                </div>

                            </section>

                            {% if top_author %}
                                <section id="discussion-maker" class="col-12 col-sm-6 col-md-12">
                                    <h2>{% trans "Prominent posters" %}</h2>
                                    {% for author in top_author %}
                                        <div class="maker row">
                                            <div class="inline-block maker-id col-tn-1">
                                                #{{forloop.counter}}
                                            </div>
                                            <div class="inline-block gravatar col-3 col-sm-4 col-md-3">
                                                {% if author.email %}
                                                    {% gravatar author.email 120 %}
                                                    <br />
                                                {% endif %}
                                            </div>
                                            <div class="gravatar-details inline-block col-7 col-sm-6 col-md-7">
                                                <ul class="list-unstyled">
                                                    <li><span class="maker-name">{{ author.name }}</span></li>
                                                    <li><span class="score">+{{author.kudos}}</span> {% trans "kudos" %}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </section>
                            {% endif %}

                        </div>
                    </div> <!-- /container, for list stats -->
                </div> <!-- col-3 -->
            </div>
            <a href="#" class="back-to-top d-none"><span class="glyphicon glyphicon-arrow-up"></span></a>
        </div> <!-- /overview, main content -->

    </div> <!-- /row, outer container -->

{% endblock %}

{% block additionaljs %}

    <script type="text/javascript" >
        $(document).ready(function() {
            setup_overview("{% url 'hk_list_recent_activity' mlist.name %}");
        });
    </script>

{% endblock %}
