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

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

	<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">
				<h4 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>	
				</h4>
				<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     type="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		type="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-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>
						{% if film.annee %}
						<tr>
							<th style="width: 9em;">Année</th>
							<td>{{ film.annee | date('Y') }}</td>
						<tr>
						{% endif %}
						<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 text-bg-warning">{{ 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 %}
						{% if bientotEnSalle(film.dateSortie) %}<span class="badge text-bg-info">Bientot</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 %}
	</section>
	{{ include('videotheque/_liste_footer.html.twig') }}
{% endblock %}