{% import "macros.html" as macros %}
{% extends "base.html" %}

{% block content %}
    <main id="main">
        <div class="mb-5">
            <h1 class="text-xlg font-weight-black mb-2">Videobox Home</h1>
            <p class="text-muted">
                Tracking <strong>{{ "{:,}".format(total_series) }}</strong> series and
                <strong>{{ "{:,}".format(total_releases) }}</strong> torrents • {% if last_sync %}Updated on {{last_sync.timestamp | human_date_time }} UTC{% endif %}
            </p>
        </div>

        {% if server_alert %}
            <p class="border rounded p-3 mb-5" style="max-width: fit-content">
                ⚠️ {{server_alert}}
            </p>
        {% endif %}

        {% if today_series %}
            <h2 class="text-lg font-weight-black mb-4">Today’s episode</h2>
    
            <section class="today-series">
                {% set episode_hash = 'e' ~ today_series.episode.id %}
                <div class="card-episode">
                    <a href="{{ url_for('main.series_detail', series_id=today_series.id, _anchor=episode_hash) }}">
                        <img class="card-episode__image w-100 img-fluid rounded" loading="lazy" src="{{ today_series.episode.thumbnail_url }}" width="300" height="170"
                        alt="Still for episode {{today_series.episode.season_episode_id}}" />
                    </a>           
                </div>
                <div>
                    <h2 class="text-sm text-muted text-uppercase mb-3">{{ today_series.name }} • {{today_series.episode.season_episode_id}}</h2>
                    <h3 class="text-lg mb-2">
                        <a class="" href="{{ url_for('main.series_detail', series_id=today_series.id, _anchor=episode_hash) }}">
                            {{ today_series.episode.name }} 
                        </a>
                    </h3>
                    <p class="body-copy mb-1">
                        {{ today_series.episode.overview }}
                    </p>
                    <p class="text-muted text-sm">Aired on {{today_series.episode.aired_on|human_date}} • {{ "{:,}".format(today_series.total_completed)}} downloads</p>
                </div>
            </section>
            
            <hr class="my-5">
        {% endif %}

        <!-- FEATURED SERIES -->

        <section>
            <h2 class="text-lg font-weight-black mb-4">Featured series</h2>
            <div class="mobile-carousel">
                {% for series in featured_series %}
                    <div class="mobile-carousel__item">
                        {{ macros.render_series_card(series) }}
                    </div>            
                {% endfor %}
            </div>    
        </section>

        <hr class="my-5">

        <!-- TAGS -->

        <section>
            <h2 class="text-lg font-weight-black mb-4">Popular tags</h2>
            <div class="d-flex" style="gap: .5rem">
                {% for tag in top_tags %}
                    <a class="badge--outline" href="{{ url_for( 'main.tag_detail', slug=tag.slug) }}">{{tag.name}}</a>            
                {% endfor %}
            </div>
        </section>

        <hr class="my-5">
        
        <!-- STATS -->
<!-- 
        <section>
            <h2 class="text-lg font-weight-black mb-4">Your library</h2>                
            <dl class="d-flex mb-2" style="gap: 2rem">
                <div>
                    <dt class="text-uppercase text-sm">
                        Series
                    </dt>
                    <dd class="line-height-1 zero text-xlg font-weight-black">
                        {{ "{:,}".format(total_series) }}
                    </dd>
                </div>
                <div>
                    <dt class="text-uppercase text-sm">
                        Episodes
                    </dt>
                    <dd class="line-height-1 zero text-xlg font-weight-black">
                        {{ "{:,}".format(total_episodes) }}
                    </dd>
                </div>
                <div>
                    <dt class="text-uppercase text-sm">
                        Torrents
                    </dt>
                    <dd class="line-height-1 zero text-xlg font-weight-black">
                        {{ "{:,}".format(total_releases) }}
                    </dd>
                </div>
            </dl>
            {% if last_sync %}
                <p class="text-muted text-sm">Last updated on {{last_sync.timestamp | human_date_time }} UTC</p>
            {% endif %}                    
        </section> -->

        <p class="text-muted mb-2">
            <small><strong>This is Videobox {{version}}</strong></small>
        </p>

        <p class="text-muted body-copy">
            <small>Videobox doesn’t host any copyrighted content. TV series information and
              images are provided by <a rel="noreferrer" href="https://www.themoviedb.org/">The Movie DB</a>, but we are not endorsed or
              certified by The Movie DB or its affiliates.</small>
        </p>

        {% if today_series and today_series.fanart_url %}
            <div class="series-fanart" style="background-image: url('{{ today_series.fanart_url }}');"></div>
        {% endif %}        
    </main>
{% endblock %}


