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

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

{% block content %}
<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. </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># 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: middle;">{{ stat.total }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-6">
        <h2>Most played Artists</h2>
        <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="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> by yourself.
        <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="text-align: right;">Others</th>
                        <th>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.
        <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="text-align: right;">Others</th>
                        <th>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> The people whose songs you have queued the most are:</p>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Uploader</th>
                        <th style="text-align: right;"># Requests</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> The people that queued your songs the most are:</p>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>User</th>
                        <th style="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>
{% endblock %}