terrarium-web/templates/events.html.twig

73 lines
3.1 KiB
Twig

{% 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 %}