{% extends "home/base_settings.html" %}
{% load static %}
{% block settings_content %}
<div class="title-bar">
    <h1>Your Archive</h1>
</div>
<div class="settings-item">
    <h2>Main overview</h2>
    <div id="primaryBox" class="info-box info-box-4">
        <p id="loading">Loading...</p>
    </div>
</div>
<div class="settings-item">
    <h2>Watch Progress</h2>
    <div id="watchBox" class="info-box info-box-3">
        <p id="loading">Loading...</p>
    </div>
</div>
<div class="settings-item">
    <h2>Download History</h2>
    <div id="downHistBox" class="info-box info-box-4">
        <p id="loading">Loading...</p>
    </div>
</div>

<div class="settings-item">
    <h2>Biggest Channels</h2>
    <div class="info-box info-box-3">
        <div class="info-box-item">
            <table class="agg-channel-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th class="agg-channel-right-align">Videos</th>
                    </tr>
                </thead>
                <tbody id="biggestChannelTableVideos"></tbody>
            </table>
        </div>

        <div class="info-box-item">
            <table class="agg-channel-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th class="agg-channel-right-align">Duration</th>
                    </tr>
                </thead>
                <tbody id="biggestChannelTableDuration"></tbody>
            </table>
        </div>
        
        <div class="info-box-item">
            <table class="agg-channel-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th class="agg-channel-right-align">Media Size</th>
                    </tr>
                </thead>
                <tbody id="biggestChannelTableMediaSize"></tbody>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript" src="{% static 'stats.js' %}"></script>
{% endblock settings_content %}
