{% extends 'news/base.html' %}
{% load staticfiles seo_tags news_tags %}
{% block seo %}
    {% seo post %}
{% endblock seo %}
{% block post %}
    <section id="blog-single">
        <div class="container">
            <!-- ========================================= CONTENT ========================================= -->
            <div class="posts col-md-9">
                <div class="post-entry">
                    <div class="clearfix">
                        <!-- ========================================== SECTION – HERO ========================================= -->
                        <div id="hero">
                            <div id="owl-main" class="owl-carousel owl-carousel-blog owl-inner-nav owl-ui-sm">
                                <div class="item">
                                    {% if post.image %}
                                        <img src="{{ post.image.image.url }}" alt="{{ post.image.image.captions }}">
                                    {% else %}
                                        <img src="{% static 'images/blog-post/slider-1.jpg' %}" alt="">
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <!-- ========================================= SECTION – HERO : END ========================================= -->
                    </div>

                    <div class="post-content">
                        <h2 class="post-title">{{ post.title }}</h2>
                        <ul class="meta">
                            {% if post.author %}
                                <li>{{ post.author }}</li>{% endif %}
                            <li>{{ post.published_date|date:'M d Y' }}</li>
                            <li>Просмотров {{ post.viewed }}</li>
                            <li><a href="{{ post.category.get_absolute_url }}">{{ post.category }}</a></li>
                            <li>{{ post.comments_set.all.count }} Comments</li>
                        </ul>
                        <p class="highlight">{{ post.text|safe }}</p>
                    </div>
                </div>

                <div class="meta-row">
                    <div class="inline">
                        <label>tag:</label>
                        {% for tag in post.tag.all %}
                            <span><a href="#">{{ tag.name }}</a>{% if not forloop.last %},{% endif %}</span>
                        {% endfor %}
                    </div>
                </div>

                {#        <div class="blog-post-author">#}
                {#            <div class="media">#}
                {#                <a href="#" class="pull-left"><img src="assets/images/blog-post/blog-author.jpg" alt=""></a>#}
                {#                <div class="media-body">#}
                {#                    <h4 class="media-heading"><a href="#">Jane Smith</a></h4>#}
                {#                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod#}
                {#                        tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,#}
                {#                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo#}
                {#                        consequat. </p>#}
                {#                </div>#}
                {#            </div>#}
                {#        </div>#}

                <section id="comments" class="inner-bottom-xs">
                    <h3>{{ post.comments_set.all.count }} Comments</h3>
                    <div class="comment-item">
                        <div class="row no-margin">
                            <div class="col-lg-1 col-xs-12 col-sm-2 no-margin">
                                <div class="avatar">
                                    <img src="assets/images/default-avatar.jpg" alt="avatar">
                                </div>
                            </div>
                            <div class="col-xs-12 col-lg-11 col-sm-10 no-margin-right">
                                <div class="comment-body">
                                    <div class="meta-info">
                                        <header class="row no-margin">
                                            <div class="pull-left">
                                                <h4 class="author"><a href="#">Angela</a></h4>
                                                <span class="date">- 21 hours ago</span>
                                                <span class="likes"><a href="#"><span class="likes-count">22</span><i
                                                        class="icon fa fa-thumbs-up"></i></a></span>
                                                <span class="dislikes"><a href="#"><i
                                                        class="icon fa fa-thumbs-down"></i></a></span>
                                            </div>
                                            <div class="pull-right">
                                                <a class="comment-reply" href="#">Reply</a>
                                            </div>
                                        </header>
                                    </div>
                                    <p class="comment-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                        volutpat. </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <div class="row no-margin">
                            <div class="col-lg-1 col-xs-12 col-sm-2 no-margin">
                                <div class="avatar">
                                    <img src="assets/images/default-avatar.jpg" alt="avatar">
                                </div>
                            </div>
                            <div class="col-xs-12 col-lg-11 col-sm-10 no-margin-right">
                                <div class="comment-body">
                                    <div class="meta-info">
                                        <header class="row no-margin">
                                            <div class="pull-left">
                                                <h4 class="author"><a href="#">Angela</a></h4>
                                                <span class="date">- 21 hours ago</span>
                                                <span class="likes"><a href="#"><span class="likes-count">22</span><i
                                                        class="icon fa fa-thumbs-up"></i></a></span>
                                                <span class="dislikes"><a href="#"><i
                                                        class="icon fa fa-thumbs-down"></i></a></span>
                                            </div>
                                            <div class="pull-right">
                                                <a class="comment-reply" href="#">Reply</a>
                                            </div>
                                        </header>
                                    </div>
                                    <p class="comment-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                        volutpat. </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="reply-block" class="leave-reply">
                    <form role="form" class="reply-form cf-style-1" action="" method="post">
                        {% csrf_token %}
                        <div class="row field-row">
                            <div class="col-xs-12">
                                <label>Комментарий</label>
                                <textarea name="text" rows="10" id="inputComment" class="form-control le-input"></textarea>
                            </div>
                        </div>

                        <button class="le-button big post-comment-button" type="submit">Отправить</button>
                    </form>

                </section>
            </div>
        </div>
    </section>

    {% comments_show post.id %}
{% endblock post %}