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

	<div id="vue-app" class="">
		<table
			class="table table-bordered table-hover table-sm align-middle">
			<thead class="">
				<tr>
					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
						<th style="width:1em;"></th>
						<th style="width:1em;"></th>
						<th style="width:9em;">Ajouté par</th>
					{% endif %}
					<th>Titre</th>
					<th>Genre</th>
					<th>Réalisateur</th>
					<th style="width:5em;">Note</th>
					<th style="width:5em;">Année</th>
					<th style="width:6em;">Sortie</th>
				</tr>
			</thead>
			<tbody id="tableFilms">
				{% for film in listeFilms %}
				<tr data-auteur="{{ film.authered.nomComplet }}">
					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
						<td>
							<Seen
								class="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>
						</td>
						<td>
							<Seen
								class="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>
						</td>
						<td>
							{%  if film.authered is defined %}
								{% 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 %}
								{{ film.authered.username }}
							{% endif %}
						</td>
					{% endif %}
					<td>
						<a 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 %}
						{% if estEnSalle(film.dateSortie) %}<span class="badge text-bg-success">En salle</span>{% endif %}
						{% if film.nbComs %}<span class="badge bg-info rounded-pill" data-bs-toggle="tooltip" title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}

					</td>
					<td>
						{% if film.genres is defined %}
							{% for genre in film.genres %}
								<a href="{{ path("videotheque_listepargenre", {"id": genre.id}) }}"><span class="badge bg-secondary">{{ genre.name }}</span></a>
							{% endfor %}
						{% endif %}
					</td>
					<td>
					{% if film.realisateurs is defined %}
						{%  for realisateur in film.realisateurs %}
							<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
						{%  endfor %}
				{% endif %}
				</td>
				<td>
					{% if film.note > 0 %}
						<input class="rating"
							data-disabled="true"
							data-show-clear="false"
							data-show-caption="false"
							data-theme="krajee-fa"
							style="display:none;"
							min=0
							max=5
							data-step=0.5
							data-size="xs"
							value="{{ film.note }}">
					{% endif %}
				</td>
				<td>{{ film.annee | date('Y') }}</td>
				<td>{% if film.dateSortie %}{{ film.dateSortie | date('d/m/y')}}{% endif %}</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
{% endblock %}