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

{% block title %}Fiche film - {{ film.titre }}{% endblock %}
{% block titre %}
    {%  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 %}
    {% 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-8">
            <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">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-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-4">
            <div class="card border-info">
                <div class="card-header">
                    <h5>Commentaires</h5>
                </div>
                <div class="card-body">
                    <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('@App/videotheque/form_commentaire.html.twig') }}
                    </div>
                    <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 %}#}
                                <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 %}
    <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 %}