{% extends "videotheque/base.html.twig" %}

{% block stylesheets %}
    {{ encore_entry_link_tags('vuejs') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('vuejs') }}
{% endblock %}

{% block title %}
{% if titre is defined %}{{ parent() }} - {{ titre }}{% else %}{{ parent() }}{% endif %}
{% endblock %}

{% block titre %}
{% if titre is defined %}{{ titre }}{% else %}{{ parent() }}{% endif %}
{% endblock %}

{% block body %}

	{{ include ('videotheque/_liste_header.html.twig') }}

	<section id="tableFilms">
		<div id="vue-app">
		
			{% for film in listeFilms %}
			<article class="card border-primary mb-4" data-controller="collapser" data-auteur="{{ film.authered.nomComplet }}">
				<div class="card-header d-flex justify-content-between">
					<h3 class="card-title"><a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
						{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
					</h3>
					<div class="d-flex">
						{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
							<Seen
								class="me-3 btn fa-lg"
								content="{{ film.id }}"
								:initial-state="{{ app.user in film.usersWantToView ? "true" : "false" }}"
								path="{{ path('maliste_modifier_a_voir') }}"
								state-on="fa fa-bookmark text-primary"
								text-on="Supprimer ce film de votre liste à voir"
								state-off="fa fa-bookmark-o text-secondary"
								text-off="Ajouter ce film à votre liste à voir"
							>
							</Seen>
							<Seen
								class="me-3 btn fa-lg"
								content="{{ film.id }}"
								:initial-state="{{ app.user in film.usersWhoSeen ? "true" : "false" }}"
								path="{{ path('maliste_modifier_vus') }}"
								state-on="fa fa-eye text-success"
								text-on="Marquer ce film comme non vu"
								state-off="fa fa-eye-slash text-secondary"
								text-off="Marquer ce film comme vu"
							>
							</Seen>
						{% endif %}
						<div class="">
							<button class="btn text-primary" data-bs-toggle="collapse" data-bs-target="#collapse-id-{{ film.id }}"><i data-collapser-target="button" class="fa fa-chevron-circle-right fa-lg"></i></button>
						</div>
					</div>
				</div>
				<div class="card-body collapse" id="collapse-id-{{ film.id }}" data-collapser-target="collapse">
					<table class="table">
						<tbody>
							<tr>
								<th style="width: 9em;">Année</th>
								<td>{{ film.annee | date('Y') }}</td>
							<tr>
							<tr>
								<th>Réalisateur(s)</th>
								<td>
									{% for realisateur in film.realisateurs %}
										<a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info rounded-pill text-dark">{{ realisateur.nomComplet }}</span></a>
									{% endfor %}
								</td>
							</tr>
							<tr>
								<th>Genre</th>
								<td>
								{% for genre in film.genres %}
									<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
								{% endfor %}
								</td>
							</tr>
							{% if film.information %}
							<tr>
								<th>Informations</th>
								<td>{{ film.information | nl2br }}</td>
							</tr>
							{% endif %}
							{% if film.dateSortie %}
								<tr>
									<th>Date de sortie</th>
									<td>{{ film.dateSortie | date('d/m/y')}}</td>
								</tr>
							{% endif %}
						</tbody>
					</table>
				</div>
				<div class="card-footer d-flex justify-content-between">
					<div class="d-flex">
						<div class="me-3">
							<input class="rating"
								data-theme="krajee-fa"
								data-language="fr"
								data-display-only="true"
								data-show-caption="false"
								style="display:none;"
								min=0
								max=5
								data-step=0.5
								data-size="xs"
								value="{{ film.note }}">
						</div>
						<div class="me-3">
							{% if film.nbComs %}
								<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}#coms"><span class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</span></a>
							{% endif %}
						</div>
						<div class="">
							{% if film.new %}<span class="badge text-bg-secondary">New</span>{% endif %}
							{% if estEnSalle(film.dateSortie) %}<span class="badge text-bg-success">En salle</span>{% endif %}
						</div>
					</div>
					<div class="">
					{%  if film.authered is defined %}
						Ajouté par 
						{{ film.authered.username }}
						{% if film.authered.activeNow %}
							<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
						{% else %}
							<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
						{% endif %}
					{% endif %}
					</div>
				</div>
			</article>
			{% endfor %}
		</div>
	</section>
{% endblock %}