{% extends 'base.html.twig' %}

{% block title %}{{ parent() }} - Évènements{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-pills mt-2 mb-4">
                    {% for key, name in days %}
                        <li class="nav-item">
                            <a class="nav-link {% if date == key %}bg-dark text-white{% else %}text-dark{% endif %}" href="{{ path('events', {date: key}) }}">{{ name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            {% for snapshot in snapshots %}
                {% if date == snapshot.date.format('Y-m-d') %}
                    <div class="col-xs-1 col-sm-6 col-md-3 mb-4">
                        <a href="{{ asset(snapshot.movie ? snapshot.movie : snapshot.picture) }}" data-title="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="snapshot-link" data-template="{{ snapshot.movie ? '#snapshot-movie-template' : '#snapshot-picture-template' }}">
                            <img src="{{ asset(snapshot.thumbnail) }}?v={{ snapshot.thumbnailChecksum }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="img-fluid shadow-sm p-3 bg-light rounded">
                        </a>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

    <div id="snapshot-view"></div>

    <template id="snapshot-picture-template">
        <div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
            <div class="modal-dialog modal-xl">
                <div class="modal-content bg-dark">
                    <div class="modal-header">
                        <h5 class="modal-title">{title}</h5>
                    </div>
                    <div class="modal-body">
                        <img src="{src}" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show"></div>
    </template>

    <template id="snapshot-movie-template">
        <div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
            <div class="modal-dialog modal-xl">
                <div class="modal-content bg-dark">
                    <div class="modal-header">
                        <h5 class="modal-title">{title}</h5>
                    </div>
                    <div class="modal-body">
                        <video controls class="modal-movie border border-dark shadow-sm rounded-lg">
                            <source src="{src}" type="video/mp4" />
                        </video>
                        <a href="{{ path('download_snapshot') }}?src={src}">
                            <button class="btn btn-info">Télécharger</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show"></div>
    </template>
{% endblock %}