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

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

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

{% block title %}{{ parent() }} - Fiche film - {{ film.titre }}{% endblock %}
{% block titre %}
    <div class="d-flex">
        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <div id="vue-app">
                <Seen
                    class="me-2"
                    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-2"
                    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>
            </div>
        {% endif %}

        {{ film.titre }}
    </div>
   
    
    {% if film.note > 0 %}
        <p>
            <input class="rating"
               data-disabled="true"
               data-show-clear="false"
               data-show-caption="false"
               data-theme="krajee-fa"
               min=0
               max=5
               style="display:none;"
               data-step=0.5
               data-size="xs"
               value="{{ film.note }}">
        </p>
    {% endif %}
{% endblock %}

{%  block body %}
    {% if estEnSalle(film.dateSortie) %}
    <div class="text-center alert alert-success" role="alert">
        <i class="fa fa-film"></i> EN SALLE
    </div>
    {% endif %}
    {% if bientotEnSalle(film.dateSortie) %}
    <div class="text-center alert alert-info" role="alert">
        <i class="fa fa-clock-o"></i> BIENTOT EN SALLE
    </div>
    {% endif %}
  
    <div class="row">
        <div class="col">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <div class="d-flex">
                        <h5 class="">Fiche technique</h5>
                        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                            <div class="ms-auto">
                                <a data-bs-toggle="tooltip" title="Modifier la fiche du film" href="{{ path('videotheque_modifier', {'id': film.id}) }}"><i class="fa fa-edit fa-lg"></i></a>
                                {% if is_granted('ROLE_ADMIN') %}<a href="{{ path('videotheque_supprimer', {'id': film.id})  }}"><i class="fa fa-trash fa-lg", style="color:Tomato;"></i></a>{% endif %}

                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-4">Année</dt>
                        <dd class="col-8">{{ film.annee | date('Y') }}</dd>
                        <dt class="col-4">Réalisateur(s)</dt>
                        <dd class="col-8">
                        {% for realisateur in film.realisateurs %}
                            <a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
                        {% endfor %}
                        </dd>
                        <dt class="col-4">Genre</dt>
                        <dd class="col-8">
                        {% for genre in film.genres %}
                            <a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-info">{{ genre.name }}</span></a>
                        {% endfor %}
                        </dd>
                        {% if film.lien is not null %}
                        <dt class="col-4">Lien</dt>
                        <dd class="col-8"><a href="{{ film.lien }}"><i class="fa fa-external-link"></i></a></dd>
                        {% endif %}
                        {% if film.dateSortie %}
                            <dt class="col-4">Sortie</dt>
                            <dd class="col-8">
                                {{ film.dateSortie | date('d/m/y')}}
                            </dd>
                        {% endif %}
                    </dl>
                </div>
                <div class="card-footer">
                    <dl class="row">
                        <dt class="col-4">Suivi par</dt>
                        <dd class="col-8">
                            {% for user in film.usersWantToView %}
                                <span>{{ user.username }}</span>&nbsp;
                            {% endfor %}
                        </dd>
                        <dt class="col-4">Vu par</dt>
                        <dd class="col-8">
                            {% for user in film.usersWhoSeen %}
                                <span>{{ user.username }}</span>&nbsp;
                            {% endfor %}
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header">
                        <h5>Informations complémentaires</h5>
                </div>
                <div class="card-body">
                    {% if film.information is not null %}
                        <p>{{ film.information | nl2br }}</p>
                    {% else %}
                        <p>Pas d'information</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h5>Bande Annonce</h5>
                </div>
                <div class="card-body text-center">
                    {% for mediaVideo in film.mediaVideos %}
                        <div class="ratio ratio-4x3 mb-3">
                            {{ mediaVideo.video|raw }}
                        </div>
                    {% else %}  
                        <p>Pas encore de bande annonce</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col">
            <div id="coms" class="card shadow mb-4">
                <div class="card-header">
                    <h5>Commentaires</h5>
                </div>
                <div class="card-body" data-controller="collapser">
                    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                            <p>
                                <a data-bs-toggle="collapse" role="button" href="#collapseCommentaire" aria-expanded="false" aria-controls="collapseCommentaire">Commenter <i data-collapser-target="button" class="fa fa-chevron-right"></i></a>
                            </p>
                            <div class="collapse" id="collapseCommentaire" data-collapser-target="collapse">
                            {{ include('videotheque/form_commentaire.html.twig') }}
                            </div>
                    {% endif %}
                    <div class="list-group">
                        {% for commentaire in film.commentaires %}
                            <div class="list-group-item">
                                <p class="mb-1"><strong>Posté par {{ commentaire.user.username }}</strong></p>
                                {% if commentaire.note > 0 %}
                                    <input class="rating"
                                           data-disabled="true"
                                           data-show-clear="false"
                                           data-show-caption="false"
                                           data-theme="krajee-fa"
                                           min=0
                                           max=5
                                           data-step=1
                                           data-size="xs"
                                           value="{{ commentaire.note }}">
                                {% endif %}
                                {% if commentaire.contenu != "" %}
                                    <p>{{ commentaire.contenu | show_links | raw | sanitize_html | nl2br }}</p>
                                {%  endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}