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

{% block body %}
   
    <div class="uk-container uk-container-center">
    <div class="uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-3-4 tm-middle">
            <main class="tm-content">
                <section>
                    <div data-uk-slider class="">
                        <div class="uk-slider-container post-gallery">
                            <ul class="uk-slider uk-grid-width-medium-1-1">
                            </ul>
                            <a href="" class="tm-slidenav tm-post-gallery-previous" data-uk-slider-item="previous" draggable="false"><i class="uk-icon-angle-left"></i></a>
                            <a href="" class="tm-slidenav tm-post-gallery-next" data-uk-slider-item="next" draggable="false"><i class="uk-icon-angle-right"></i></a>
                        </div>
                    </div>
                    <div id="primary" class="site-content post-content">
                        <div class="main-heading">
                            <h1 class="tm-page-title">{{ post.title }}</h1>
                        </div>
                         

    <p class="post-metadata">
        <span class="metadata"><i class="fa fa-calendar"></i> {{ post.publishedAt|format_datetime('long', 'medium', '', 'UTC') }}</span>
        <span class="metadata"><i class="fa fa-user"></i> {{ post.author.fullName }}</span>
    </p>

    <span class="image">
                     <iframe class="block" width="800" height="500"  src="{{ post.summary | replace({'watch?v=': 'embed/'}) }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </a>
                  </span>

   

    <div id="post-add-comment" class="well">
        {# The 'IS_AUTHENTICATED_FULLY' role ensures that the user has entered
        their credentials (login + password) during this session. If they
        are automatically logged via the 'Remember Me' functionality, they won't
        be able to add a comment.
        See https://symfony.com/doc/current/security/remember_me.html#forcing-the-user-to-re-authenticate-before-accessing-certain-resources
        #}
        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
            {{ render(controller('App\\Controller\\BlogController::commentForm', {'id': post.id})) }}
        {% else %}
            <p>
                <a class="btn btn-success" href="{{ path('security_login', {'redirect_to': app.request.pathInfo}) }}">
                    <i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'action.sign_in'|trans }}
                </a>
                {{ 'post.to_publish_a_comment'|trans }}
            </p>
        {% endif %}
    </div>

    <h3>
        <i class="fa fa-comments" aria-hidden="true"></i> {{ 'post.num_comments'|trans({ 'count': post.comments|length }) }}
    </h3>

    {% for comment in post.comments %}
        <div class="row post-comment">
            <a name="comment_{{ comment.id }}"></a>
            <p class="col-sm-3">
                <strong>{{ comment.author.fullName }}</strong> {{ 'post.commented_on'|trans }}
                <strong>{{ comment.publishedAt|format_datetime('medium', 'short', '', 'UTC') }}</strong>
            </p>
            <div class="col-sm-9">
                {{ comment.content|markdown_to_html|sanitize_html }}
            </div>
        </div>
    {% else %}
        <div class="post-comment">
            <p>{{ 'post.no_comments'|trans }}</p>
        </div>
    {% endfor %}
                        <!-- #content -->
                    </div>
                    <!-- #primary -->
                </section>
            </main>
        </div>

        <aside class="tm-sidebar-b uk-width-medium-1-4 tm-middle">
        {% for video in video|slice(0, 4) %}
            <div class="uk-panel uk-panel-box widget_text">
                <div class="uk-panel-badge uk-badge uk-badge-success">top</div>
                <h3 class="uk-panel-title"><i class="uk-icon-bank"></i> {{video.author.fullname}}</h3>
                <a href="{{ path('video_detail', {'id': video.id}) }}">
                                        <img src="//img.youtube.com/vi/{{ video.summary[32 :] }}/0.jpg" class="attachment-thumbnail wp-post-image" alt="EVENTS" height="330" width="198">
                                    </a>
                <p>{{video.title}}</p>
            </div>
            
           {% endfor %}
        </aside>
    </div>
</div>
{% endblock %}