{% load imagekit %}


<div class="video-content">
    <h3>{{ video.title }}</h3>

    {% if speakers %}
        <span class="video-speakers">With: <strong>{% for speaker in speakers %}{{ speaker.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</strong></span>
    {% endif %}

    <video controls {% if video.preview %}poster="{{ video.preview.url }}"{% endif %}>
        {% for source in sources %}
            <source src="{{ source.file.url }}" type="{{ source.type }}">
        {% endfor %}

        {% with source=sources|first %}
            <a href="{{ source.file.url }}">
                {% if video.preview %}
                    <img src="{{ video.preview.url }}">
                {% else %}
                    <span>Download video</span>
                {% endif %}
            </a>
        {% endwith %}
        {% if video.captions_file %}
            <track src="{{ video.captions_file.url }}">
        {% endif %}
    </video>

    {% if chapters %}
        <div class="chapters">
            <ul>
                {% for chapter in chapters %}
                    <li><a id="chapter-{{ chapter.pk }}" href="#{{ chapter.seconds }}">{% if chapter.preview %}{% thumbnail "75x56" chapter.preview %}{% endif %}{{ chapter.title }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
</div>