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

{% 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 %}
	<div class="d-flex justify-content-between">
		<div class="">
			{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
			<p><a class="btn btn-primary" role="button" href="{{ path('videotheque_ajouter') }}"><i class="fa fa-plus-square fa-lg"></i> Ajouter un film</a></p>
			{% endif %}
		</div>
		<div class="">
			<p>Filtrer par film au dessus de
			<input class="rating"
				data-disabled="false"
				data-language="fr"
				data-show-clear="true"
				data-show-caption="false"
				data-theme="krajee-fa"
				data-toggle="star-filter"
				data-path="#tableFilms"
				style="display:none;"
				min=0
				max=5
				data-step=1
				data-size="sm"
				value="0">
			</p>
		</div>
	</div>


	<section id="tableFilms">
		
		{% 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') %}
						<div class="me-3">
							{%  if app.user.haveSeen(film) %}
								{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
							{% else %}
								{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-secondary"></i>' %}
							{% endif %}				
							<button     class="btn"
										data-fonction="switch"
										data-path="{{ path('maliste_modifier_vus') }}"
										data-content="{{ film.id }}"
										data-icone-actif = "fa fa-eye fa-lg text-success"
										data-icone-inactif = "fa fa-eye-slash fa-lg text-secondary">
								{{ vu_icone | raw }}
							</button>
						</div>
						<div class="me-3">
							{%  if app.user.wantToSee(film) %}
								{% set follow_icone = "fa fa-bookmark fa-lg" %}
								{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
							{% else %}
								{% set follow_icone = "fa fa-bookmark-o text-secondary fa-lg" %}
								{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
							{% endif %}
							<button		class="btn text-primary"
										data-fonction="switch"
										data-icone-actif="fa fa-bookmark fa-lg"
										data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
										data-path="{{ path('maliste_modifier_a_voir') }}"
										data-bs-toggle="tooltip"
										title="{{ follow_texte }}"
										data-content="{{ film.id }}">
								<i class="{{ follow_icone }}"></i>
							</button>
						</div>
					{% endif %}
					<div class="">
						<button class="btn text-primary" data-collapser-target="button" data-bs-toggle="collapse" data-bs-target="#collapse-id-{{ film.id }}"><i 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>
						<tr>
							<th>Informations</th>
							<td>{% if film.information %}{{ film.information | nl2br }}{% else %}Pas d'information{% endif %}</td>
						</tr>
						{% 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="">
						{% 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>
				<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 %}
	</section>
{% endblock %}