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

{% block content %} 
    <main id="main">
        <div class="fanart border-bottom mb-5" style="background-image: url({{ today_series.fanart_url if today_series and today_series.fanart_url else '' }});">
            <div class="mb-5">
                <h1 class="text-xlg font-weight-black mb-2">Videobox</h1>
                <p class="text-muted">
                    Tracking <strong>{{ "{:,}".format(total_series) }}</strong> series and
                    <strong>{{ "{:,}".format(total_releases) }}</strong> torrents • {% if last_sync %}Updated {{last_sync.timestamp|datetime_since(utc_now) }}&ensp;<a href="{{ url_for('main.update_history') }}">See history</a>{% 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 }}" 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>
            {% endif %}
        </div>

        <!-- 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">
        
        <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>
    </main>
{% endblock %}


