{% extends 'base.html' %}

{% block title %}{{ video.title }} · {% if video.metadata.series_name %}{{ video.metadata.series_name }} ·{% endif %} {{ super() }}{% endblock %}

{% block content %}
    <div class="relative">
        <video controls poster="{{ video.thumbnail.large }}" preload="none" width="960" height="720">
            {% for file in video._embedded.files %}
                <source type="{{ file.mime_type }}" src="/video/{{ video.id }}-{{ file.quality }}.{{ file.format }}" {% if file.quality != 'adaptive' %}media="(min-height: {{ file.quality }}x)" data-quality="{{ file.quality }}" data-co2="{{ file.size.formatted }} (~{{ file.size.bytes|co2 }})"{% endif %}>
            {% endfor %}
            {% for track in video.tracks.subtitles %}
                <track kind="{{ track.kind }}" label="{{ track.label }}" srclang="{{ track.srclang }}" src="{{ track._links.vtt.href }}">
            {% endfor %}
        </video>
        {% if next %}
            <a href="/video/{{ next }}/?autoplay" class="next" rel="next">Next episode</a>
        {% endif %}
    </div>
    <div class="wrapper">
        <h1>{{ video.title }}</h1>
        <div class="meta">
            {% if video.metadata.series_id %}
                <a href="/series/{{ video.metadata.series_id }}/">{{ video.metadata.series_name }}</a>
                <a href="/series/{{ video.metadata.series_id }}/#season-{{ video.metadata.season_number }}" class="hidden-link">Season {{ video.metadata.season_number }}</a>,
                Episode {{ video.metadata.episode_number }}
                &middot;
            {% endif %}
            {{ video.duration|duration }} &middot;
            <time title="{{ video|release|isodate }}">{{ video|release|reldate }}</time>
            {% if video._links.video_page %}&middot; <a class="hidden-link" href="{{ video._links.video_page.href }}" referrerpolicy="no-referrer">Watch on dropout.tv</a>{% endif %}
        </div>
        {%+ if video.description %}<div class="description">{{ video.description|linebreaks }}</div>{% endif %}
        {% if video.tags %}
            <ul class="tags">
                {% for tag in video.tags %}
                    <li class="tag"><a href="/search/?q=tags: {{ tag }}" rel="tag">#{{ tag }}</a></li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>

    <script src="/static/video.js" type="module"></script>
{% endblock %}