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

{% block title %}Fiche film{% endblock %}
{% block titre %}{% endblock %}

{%  block body %}
    <div class="row">
        <div class="col-8">
            <h1>
                {%  if film.usersWantToView.contains(app.user) %}
                    <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="fa fa-star"></i></a>
                {%  else %}
                    <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="fa fa-star-o"></i></a>
                {%  endif %}
                {{ film.titre }}
                {% if film.usersWhoSeen.contains(app.user) %}
                    <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i></a>
                    {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>#}
                {%  else %}
                    <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i></a>
                    {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>#}
                {%  endif %}
            </h1>
            <div class="row">
                <div class="col-7">
                    <div class="card border-info">
                        <div class="card-header">
                            <div class="row">
                                <h5 class="col-11">Fiche technique</h5>
                                <div class="col-1">
                                    <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>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <dl class="row">
                                <dt class="col-4">Réalisateur(s)</dt>
                            {% for realisateur in film.realisateurs %}
                                <dd class="col-8"><a href="{{ path('realisateur_modifier', {'id': realisateur.id}) }}"><span class="badge badge-info">{{ realisateur.nomComplet }}</span></a></dd>
                            {% endfor %}
                                <dt class="col-4">Année</dt>
                                <dd class="col-8">{{ film.annee | date('Y') }}</dd>
                                <dt class="col-4">Genre</dt>
                                {% for genre in film.genres %}
                                    <dd class="col-8"><a href="{{ path('genre_modifier', {'id': genre.id}) }}"><span class="badge badge-info">{{ genre.name }}</span></a></dd>
                            {% endfor %}
                            {% 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">
                                    <ul class="list-inline">
                                        {% for user in film.usersWantToView %}
                                            <li class="list-inline-item">{{  user.username }}</li>
                                        {% endfor %}
                                    </ul>
                                </dd>
                                <dt class="col-4">Vu par</dt>
                                <dd class="col-8">
                                    <ul class="list-inline">
                                        {% for user in film.usersWhoSeen %}
                                            <li class="list-inline-item">{{ user.username }}</li>
                                        {% endfor %}
                                    </ul>
                                </dd>
                            </dl>
                        </div>
                    </div>

                </div>
                <div class="col-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 style="height :200px ;width :300px;">
                                    {{ film.mediaVideo.video|raw }}
                                </div>
                            {% else %}
                                <p>Pas encore de bande annonce</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <h2>Commentaires</h2>
            {{ include('@App/videotheque/form_commentaire.html.twig') }}
            <div class="list-group">
                {% for commentaire in commentaires %}
                    <div class="list-group-item">
                        {#{% if commentaire.user == app.user %}
                            <a type="button" data-toggle="modal" data-target="#supprcommentaire" class="float-lg-right" id="supp_commentaire" href="#"><i class="fa fa-trash" style="color: Tomato"></i></a>
                        {% endif %}#}
                        <h5 class="mb-1"><strong>Posté par {{ commentaire.user.username }}</strong></h5>
                        <p class="mb-1">{{ commentaire.contenu }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
    <script>
        $(document).ready(function() {
            ecouterSuivi('boutonVoir', '', 'fa fa-star', '', 'fa fa-star-o', '{{ path('maliste_modifier_a_voir') }}');
            ecouterVu('boutonVu', 'badge badge-success', 'badge badge-danger', 'badge badge-secondary' ,'{{ path('maliste_modifier_vus') }}');
        });
    </script>
{%  endblock %}