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

{% block title %}{{ parent() }} - Fiche film - {{ film.titre }}{% endblock %}
{% block titre %}
    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
        {%  if film.usersWantToView.contains(app.user) %}
            {% set follow_icone = "fa fa-star" %}
            {% set follow_texte = "Supprimer ce film de votre liste à voir" %}
        {% else %}
            {% set follow_icone = "fa fa-star-o" %}
            {% set follow_texte = "Ajouter ce film à votre liste à voir" %}
        {% endif %}
        <a href="#" data-fonction="switch"
                    data-icone-actif="fa fa-star"
                    data-icone-inactif="fa fa-star-o"
                    data-path="{{ path('maliste_modifier_a_voir') }}"
                    data-toggle="tooltip"
                    title="{{ follow_texte }}"
                    data-content="{{ film.id }}">
            <i class="{{ follow_icone }}"></i></a>
        {% if film.usersWhoSeen.contains(app.user) %}
            {% set vu_icone = '<i class="fa fa-eye text-success"></i>' %}
        {% else %}
            {% set vu_icone = '<i class="fa fa-eye-slash text-secondary"></i>' %}
        {% endif %}				
        <a href="#" data-fonction="switch"
                    data-path="{{ path('maliste_modifier_vus') }}"
                    data-content="{{ film.id }}"
                    data-icone-actif = "fa fa-eye text-success"
                    data-icone-inactif = "fa fa-eye-slash text-secondary">
            {{ vu_icone | raw }}</a>
    {% endif %}
    {{ film.titre }}
    
    {% 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
               data-step=0.5
               data-size="xs"
               value="{{ film.note }}">
        </p>
    {% endif %}
{% endblock %}

{%  block body %}
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-7">
                    <div class="card border-info">
                        <div class="card-header">
                            <div class="row">
                                <h5 class="col-10">Fiche technique</h5>
                                {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                                    <div class="col-2">
                                        <a data-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 badge-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 badge-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 %}
                            </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>
                <div class="col-sm-5">
                    <div class="card border-info">
                        <div class="card-header">
                            <h5>Bande Annonce</h5>
                        </div>
                        <div class="card-body">
                            {% if film.mediaVideo.video is defined %}
                                <div class="embed-responsive embed-responsive-4by3">
                                    {{ film.mediaVideo.video|raw }}
                                </div>
                            {% else %}
                                <p>Pas encore de bande annonce</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card border-info">
                <div class="card-header">
                    <h5>Commentaires</h5>
                </div>
                <div class="card-body">
                    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                            <p>
                                <a data-toggle="collapse" role="button" href="#collapseCommentaire" aria-expanded="false" aria-controls="collapseCommentaire">Commenter <i class="fa fa-chevron-down"></i></a>
                            </p>
                            <div class="collapse" id="collapseCommentaire">
                            {{ 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 class="mb-1">{{ commentaire.contenu }}</p>
                                {%  endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
{%  endblock %}