{% extends "layout.html.twig" %}

{% block title %}{{ episode.title }}{% endblock %}

{% block content %}
<div class="row btn_retour">
    <a href="{{path ('episodes')}}" class="btn btn-info btn-sm pull-left" role="button">
        <span class="glyphicon glyphicon glyphicon-hand-left"></span> Retour à la liste</a>
</div>
<div class="jumbotron">
        <h1 class="indexTitle">Billet simple pour l'Alaska</h1>
        <h2 class="indexTitle">de Jean FORTEROCHE</h2>
</div>
<div>
    <div class="well">
        <h2>{{ episode.title }}</h2>
        <p>{{ episode.content | raw }}</p>
    </div>
    
    <div class="container well row">
        <h3>Ajouter un commentaire</h3>
        {{ form_start(commentForm, { 'attr': {'class': 'form-inline row'} })}}
        <div class="form-group">
            {{ form_widget(commentForm.idparent, { 'attr':  {
            'class': 'form-control',
            'value': '0'
            }}) }}
            {{ form_errors(commentForm.idparent) }}
        </div>
        <div class="col-sm-3"> 
            <div class="form-group col-sm-12">
                {{ form_widget(commentForm.author, { 'attr':  {
                    'class': 'form-control form-chp-comment',
                    'placeholder': 'Entrer votre nom',
                    'value': '',
                    'pattern': '^[^ ]{2}.*$'
                }}) }}
                {{ form_errors(commentForm.author) }}
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group col-sm-12">
                {{ form_widget(commentForm.content, { 'attr':  {
                    'class': 'form-control form-chp-comment',
                    'placeholder': 'Entrer votre commentaire',
                    'value': '',
                    'pattern': '^[^ ]{2}.*$'
                }}) }}
                {{ form_errors(commentForm.content) }}
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group">
                <input type="submit" class="btn btn-primary " value="Laisser un commentaire" />
            </div>
        </div>
        {{ form_end(commentForm) }}
        
        
        <h3>Commentaires</h3>
        {% for comment in comments %}
            <div class="{{ niveaux[loop.index0] }}" id={{ comment.id }}> 
                <strong>{{ comment.author }}</strong> : ({{ comment.dateCreated}}) 
                <div class="epi-comment-saisi">{{ comment.content }}</div> 
                {% if (niveaux[loop.index0] != 'Niv3' ) %}
                    <div class="btn_comm">
                         <!-- Trigger the modal with a button -->
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="affect({{ comment.id }})">Repondre</button>
                        {% if comment.comAModerer==0 %}
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal2" onclick="signaler({{ comment.id }})">Signaler</button>
                        {% endif %} 
                    </div> 
                {% else %}
                    {% if comment.comAModerer==0 %}
                        <div class="btn_comm">
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal2" onclick="signaler({{ comment.id }})">Signaler</button>
                        </div>
                    {% endif %} 
                {% endif %}
            </div>
        {% else %}
            Soyez le premier à laisser un commentaire.
        {% endfor %}
        
        <!-- Modal Ajouter commentaire -->
        <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content row">
                                   
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Commentaire</h4>
                    </div>
                    <div class="modal-body">
                        {% include 'comment-form.php' ignore missing %}
                    </div>
                </div>
                
            </div>
        </div>
      
        <!-- Modal Signaler commentaire -->
        <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Signaler un commentaire</h4>
                    </div>
                    <div class="modal-body">
                        <p>Voulez-vous signaler ce commentaire ?"</p>
                        {{ form_start(signalForm, { 'attr': {'class': 'form-inline'} })}}
                            <div class="form-group">
                                {{ form_widget(signalForm.id, { 'attr':  {
                                'class': 'form-control',
                                'value': '0'
                                }}) }}
                                {{ form_errors(signalForm.id) }}
                            </div>
                            <div class="form-group">
                                <input type="submit" class="btn btn-primary" value="Signaler" />
                            </div>                       
                        {{ form_end(signalForm) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}