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

{% load i18n %}
{% load hk_generic %}
{% load static %}


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


{% block content %}

<div class="row">

<div class="overview col-tn-12 col-sm-12">
    <div class="row">
    <div class="col-md-3">
    <div class="col-12">
        <section id="title">
            <h2>
                {% if mlist.display_name %}
                    {{ mlist.display_name }}
                {% else %}
                    {{ mlist.name|until:"@" }}
                {% endif %}
            </h2>
            <p id="description">{{ mlist.description|default_if_none:"" }}</p>
        </section> <!-- /title & description -->

        <!-- Overview Page for small screens. -->
        <ul class="nav nav-tabs d-md-none">
            <li class="nav-item">
                <a href="#home" class="nav-link active">{% trans "Home" %}</a>
            </li>
            <li class="nav-item">
                <a href="#stats" class="nav-link">{% trans "Stats" %}</a>
            </li>
            <li class="nav-item">
              <a href="{% url 'hk_archives_latest' mlist_fqdn=mlist.name %}" class="nav-link">{% trans "Threads" %}</a>
            </li>
            {% if posting_enabled %}
            <li class="nav-item">
              <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}"
                 class=" nav-link{% if not user.is_authenticated %}disabled"
                 title="{% trans 'You must be logged-in to create a thread.' %}{% endif %}"><i class="fa fa-plus"></i> New</a>
            </li>
            {% endif %}
        </ul>

        <!-- Overview page for large screens. -->
        <div class="d-none d-md-block">
            <a id="home"></a>
            <div class="list-actions">
              {% if posting_enabled %}
                <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}"
                    class="btn btn-outline-primary {% if not user.is_authenticated %} disabled" title="{% trans 'You must be logged-in to create a thread.' %}{% 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>
              {% endif %}
                </br>

                {% include 'hyperkitty/fragments/month_list.html' with show_dropdown='True' pagename='overview' %}
                </br>

                {% if 'postorius' in INSTALLED_APPS %}
                <!-- Subscription -->
                <a class="btn btn-outline-primary" href="{% url 'list_summary' mlist.list_id %}">
                    <i class="fa fa-inbox"></i>
                    {% trans '<span class="d-none d-md-inline">Manage s</span><span class="d-md-none">S</span>ubscription' %}</a>
                   </br>
                {% endif %}
                <a href="{% url 'hk_archives_latest' mlist_fqdn=mlist.name %}" class="btn btn-outline-primary">{% trans "All Threads" %}</a>
                </br>
                {% if user.is_staff or user.is_superuser %}
                    <a href="{% url 'hk_list_delete' mlist_fqdn=mlist.name %}" class="btn btn-danger">{% trans "Delete" %}</a>
                {% endif %}
            </div>
        </div> <!-- /container, navbar & search (tiny/xs screens), new thread button -->
    </div> <!-- /container, title/description + the elements above -->

    <div class="stats col-12 order-3">
        <div class="anchor-link">
            <a id="stats"></a>
        </div>
        <h3>{% trans "Activity Summary" %}</h3>
        <div class="chart">
            <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>
        <ul class="list-stats list-unstyled">
            <li><i class="fa fa-user"></i>{{ mlist.recent_participants_count }} {% trans "participants" %}</li>
            <li><i class="fa fa-comments"></i>{{ mlist.recent_threads_count }} {% trans "discussions" %}</li>
        </ul>

        <div class="row">
        <section id="most-active-poster" class="col-12 col-sm-6 col-md-12">
            <h3>{% trans "Most active posters" %}</h3>
            <div 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">
            <h3>{% trans "Prominent posters" %}</h3>
            {% 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 class="col-md-9">

    <div class="discussions col-12">

      <ul class="nav nav-pills" role="tablist">

        <li class="nav-item">
          <a href="#most-recent" aria-controls="most-recent" role="tab" data-toggle="pill" class="nav-link active" aria-selected="true">Recent</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#most-active" aria-controls="most-active" role="tab" data-toggle="pill" aria-selected="false">Most Active</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#most-popular" aria-controls="most-popular" role="tab" data-toggle="pill" aria-selected="false">Most Popular</a>
        </li>

        {% if user.is_authenticated %}

        <li class="nav-item">
          <a class="nav-link" href="#flagged" aria-controls="flagged" role="tab" data-toggle="pill" aria-selected="false">Favorites</a>
        </li>

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

    </div>

    <div class="tab-content discussions pull-right col-12">
        <div id="most-recent" role="tabpanel" class="tab-pane active">
            <h3>{% trans "Recently active discussions" %}</h3>
            <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">
            <h3>{% trans "Most popular discussions" %}</h3>
            <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">
            <h3>{% trans "Most active discussions" %}</h3>
            <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">
            <h3>{% trans "Discussions You've Flagged" %} ({{ flagged_threads|length }})
                {% if flagged_threads %}<i class="fa fa-caret-right"></i>{% endif %}
            </h3>
            <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">
            <h3>{% trans "Discussions You've Posted to" %} ({{ threads_posted_to|length }})
                {% if threads_posted_to %}<i class="fa fa-caret-right"></i>{% endif %}
            </h3>
            <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>
    <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 %}
