{% extends 'marietje/base.html' %}
{% load static %}
{% load tz %}

{% block title %}User Stats{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h1>User Statistics</h1>

        <div class="row display-flex">
            {% if not stats %}
            <div class="col-xs-12 alert alert-danger">
                <strong>Stats unavailable :(</strong>
            </div>
            {% else %}
            {% if current_age_text %}
            <div class="col-xs-12 alert alert-info">
                <strong>{{ current_age_text }}</strong>
            </div>
            {% endif %}
            <div class="col-md-6">
                <h2>Most played songs</h2>
                <p>You have requested <strong> {{ stats.unique_requests }} </strong> different songs a total of
                <strong> {{ stats.total_requests }} </strong> times. This means 
                <strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests
                have been unique. These are the song you have requested the most.</p>
                <h4>Top {{ stats.stats_top_count }}:</h4>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Artist</th>
                                <th>Title</th>
                                <th style="white-space: nowrap; text-align: right;"># Requests</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.most_played_songs %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.song__artist }}</td>
                                <td>{{ stat.song__title }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Most played artists</h2>
                <p>These are the artists you have requested the most.</p>
                <h4>Top {{ stats.stats_top_count }}:</h4>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Artist</th>
                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.most_played_artists %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.song__artist }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Uploads requested</h2>
                <p>You have uploaded a total of <strong> {{stats.total_uploads }} </strong> songs. The left column
                shows how many times these have been requested by other people. The right column shows how many times
                you requested your own songs. In total your songs have been queued 
                <strong> {{stats.total_played_uploads }} </strong> times by others and
                <strong> {{stats.total_played_user_uploads }} </strong> times by yourself.</p>
                <h4>Top {{ stats.stats_top_count }}:</h4>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Artist</th>
                                <th>Title</th>
                                <th style="white-space:nowrap; text-align: right;"># Others</th>
                                <th style="white-space:nowrap;"># You</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.most_played_uploads %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.song__artist }}</td>
                                <td>{{ stat.song__title }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                                <td>{{ stat.user_total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Upload artists requested</h2>
                <p>The left column shows how many times songs from artists uploaded by you have been requested by
                other people. The right column shows how many times you requested those songs.</p>
                <h4>Top {{ stats.stats_top_count }}:</h4>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Artist</th>
                                <th style="white-space:nowrap; text-align: right;"># Others</th>
                                <th style="white-space:nowrap;"># You</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.most_played_uploaded_artists %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.song__artist }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                                <td>{{ stat.user_total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Most played uploaders</h2>
                <p>These are the people whose songs you have requested the most.</p>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Uploader</th>
                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.most_played_uploaders %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.song__user__name }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                                <td>({% widthratio stat.total stats.total_requests 100 %}%)</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Biggest fans</h2>
                <p>These are the people that have requested your songs the most.</p>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stats.biggest_fans %}
                            <tr>
                                <th>{{ forloop.counter }}</th>
                                <td>{{ stat.user__name }}</td>
                                <td style="text-align: right;">{{ stat.total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}