{% extends 'base.html.twig' %}

{% block og_title %}Article{% endblock %}

{% block og_description %}{{ article.contenu }}{% endblock %}

{% block title %}{{ parent() }} | Article{% endblock %}

{% block body %}
    <div id="page">
        <div class="sub_header_in sticky_header">
            <div class="container">
                <h1>Sparker Blog</h1>
            </div>
        </div>

        <main>
            <div class="container margin_60_35">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="singlepost">
                            <figure><img src="{{ article.imageArticle }}" alt="Image de l'article {{ article.titre }}">
                            </figure>
                            <h1>{{ article.titre }}</h1>
                            <div class="postmeta">
                                <ul>
                                    <li><a href="#"><i class="ti-folder"></i> {{ article.categorie.nomCategorie }}</a>
                                    </li>
                                    <li><a href="#"><i
                                                    class="ti-calendar"></i> {{ article.datePublication|date('d/m/Y') }}
                                        </a></li>
                                    <li><a href="#"><i class="ti-comment"></i> (14) Comments</a></li>
                                </ul>
                            </div>
                            <div class="post-content">
                                <p>{{ article.contenu }}</p>
                            </div>
                        </div>
                        <div id="comments">
                            <h5>Commentaires</h5>
                            <ul>
                                {% for commentairePrincipal in commentaires %}
                                    {% if commentairePrincipal.commentaire is null %}
                                        <li>
                                            <div class="avatar">
                                                <a href="#"><img src="img/avatar1.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="comment_right clearfix">
                                                <div class="comment_info">
                                                    Par
                                                    {% if commentairePrincipal.utilisateur is null %}
                                                        <span style="font-weight:bolder">Invité</span>
                                                    {% else %}
                                                        <span style="font-weight:bolder">{{ commentairePrincipal.utilisateur.prenom ~ ' '~ commentairePrincipal.utilisateur.nom }}</span>
                                                    {% endif %}
                                                    <span>|</span>{{ commentairePrincipal.dateCommentaire|date('d/m/Y') }}
                                                    <span>|</span>
                                                    <span><i class="icon-reply"></i>
                                                    <a href="{{ path('blog_commentaire_article',{'articleId': article.id, 'commentaireId': commentairePrincipal.id }) }}">Répondre</a></span>
                                                </div>
                                                <p>
                                                    {{ commentairePrincipal.contenu }}
                                                </p>
                                            </div>

                                            {% set commentairePrincipal_utilisateur = commentairePrincipal.utilisateur %}

                                            {% for commentaireSecondaire in commentairePrincipal.commentaires %}
                                                <ul class="replied-to">
                                                    {% if commentaireSecondaire.commentaire is not null and commentaireSecondaire.commentaire.id == commentairePrincipal.id %}
                                                        <li>
                                                            <div class="avatar">
                                                                <a href="#"><img src="img/avatar2.jpg" alt="">
                                                                </a>
                                                            </div>
                                                            <div class="comment_right clearfix">
                                                                <div class="comment_info">

                                                                    {% if commentairePrincipal_utilisateur  is null %}
                                                                        <div style="font-style: italic">
                                                                            Réponse à Invité
                                                                        </div>
                                                                    {% else %}
                                                                        <div style="font-style: italic">
                                                                            Réponse à {{ commentairePrincipal_utilisateur.prenom ~ ' ' ~ commentairePrincipal_utilisateur.nom }}
                                                                        </div>
                                                                    {% endif %}

                                                                    Par
                                                                    {% if commentaireSecondaire.utilisateur is null %}
                                                                        <span style="font-weight:bolder">Invité</span>
                                                                    {% else %}
                                                                        <span style="font-weight:bolder">{{ commentaireSecondaire.utilisateur.prenom ~ ' ' ~ commentaireSecondaire.utilisateur.nom }}</span>
                                                                    {% endif %}
                                                                    <span>|</span>{{ commentaireSecondaire.dateCommentaire|date('d/m/Y') }}
                                                                </div>
                                                                <p>
                                                                    {{ commentaireSecondaire.contenu }}
                                                                </p>
                                                            </div>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            {% endfor %}
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>

                        <hr>
                        {{ form_start(formCommentaire) }}
                        <h5>Laisser un commentaire</h5>
                        <div class="form-group">
                            {{ form_widget(formCommentaire.contenu) }}
                        </div>
                        <div class="form-group">
                            <button type="submit" id="submit2" class="btn_1 add_bottom_15">Valider</button>
                        </div>
                        {{ form_end(formCommentaire) }}

                    </div>
                    <!-- /col -->

                    <aside class="col-lg-3">
                        <div class="widget search_blog">
                            <div class="form-group">
                                <input type="text" name="search" id="search" class="form-control"
                                       placeholder="Search..">
                                <span><input type="submit" value="Search"></span>
                            </div>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Latest Post</h4>
                            </div>
                            <ul class="comments-list">
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-5.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-6.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                                <li>
                                    <div class="alignleft">
                                        <a href="#0"><img src="img/blog-4.jpg" alt=""></a>
                                    </div>
                                    <small>Category - 11.08.2016</small>
                                    <h3><a href="#" title="">Verear qualisque ex minimum...</a></h3>
                                </li>
                            </ul>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Categories</h4>
                            </div>
                            <ul class="cats">
                                <li><a href="#">Food <span>(12)</span></a></li>
                                <li><a href="#">Places to visit <span>(21)</span></a></li>
                                <li><a href="#">New Places <span>(44)</span></a></li>
                                <li><a href="#">Suggestions and guides <span>(31)</span></a></li>
                            </ul>
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-title">
                                <h4>Popular Tags</h4>
                            </div>
                            <div class="tags">
                                <a href="#">Food</a>
                                <a href="#">Bars</a>
                                <a href="#">Cooktails</a>
                                <a href="#">Shops</a>
                                <a href="#">Best Offers</a>
                                <a href="#">Transports</a>
                                <a href="#">Restaurants</a>
                            </div>
                        </div>
                        <!-- /widget -->
                    </aside>
                    <!-- /aside -->
                </div>
                <!-- /row -->
            </div>
            <!-- /container -->
        </main>

    </div>
    <!-- page -->

    <!-- Sign In Popup -->
    <div id="sign-in-dialog" class="zoom-anim-dialog mfp-hide">
        <div class="small-dialog-header">
            <h3>Sign In</h3>
        </div>
        <form>
            <div class="sign-in-wrapper">
                <a href="#0" class="social_bt facebook">Login with Facebook</a>
                <a href="#0" class="social_bt google">Login with Google</a>
                <div class="divider"><span>Or</span></div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" class="form-control" name="email" id="email">
                    <i class="icon_mail_alt"></i>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" class="form-control" name="password" id="password" value="">
                    <i class="icon_lock_alt"></i>
                </div>
                <div class="clearfix add_bottom_15">
                    <div class="checkboxes float-start">
                        <label class="container_check">Remember me
                            <input type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="float-end mt-1"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
                </div>
                <div class="text-center"><input type="submit" value="Log In" class="btn_1 full-width"></div>
                <div class="text-center">
                    Don’t have an account? <a href="register.html">Sign up</a>
                </div>
                <div id="forgot_pw">
                    <div class="form-group">
                        <label>Please confirm login email below</label>
                        <input type="email" class="form-control" name="email_forgot" id="email_forgot">
                        <i class="icon_mail_alt"></i>
                    </div>
                    <p>You will receive an email containing a link allowing you to reset your password to a new
                        preferred
                        one.</p>
                    <div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
                </div>
            </div>
        </form>
    </div>


    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ app.request.schemeAndHttpHost ~ app.request.pathInfo }}"
            },
            "headline": "{{ article.titre }}",
            "description": "{{article.contenu}}",
            "image": "",
            "author": {
                "@type": "Person",
                "name": "{{ article.utilisateur.prenom ~ ' ' ~ article.utilisateur.nom}}"
            },
            "publisher": {
                "@type": "Organization",
                "name": "Le nom de l'annuaire",
                "logo": {
                    "@type": "ImageObject",
                    "url": "https://le_nom_de_l_annuaire.com/img/logo.png"
                }
            },
            "datePublished": "{{ article.datePublication|date('d/m/Y')}}",
            "dateModified": ""
        }
    </script>


{% endblock %}