{% extends 'base.html' %}
{% load static %}

{%block body%}

<main class="main">
    <div class="page-content mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 m-auto">
                    <div class="single-page pt-50 pr-30">
                        <div class="single-header style-2">
                            <div class="row">
                                <div class="col-xl-10 col-lg-12 m-auto">
                                    {% if messages %}
                                    {% for message in messages %}
                      
                                    <div  id="message"  class="mt-30 alert align-middle alert-{{message.tags}}">
                                       
                                        <span class="align-middle"> {{message}}</span>
                                    </div>
                      
                                    {% endfor %}
                                    {% endif %}
                                    <h6 class="mb-10"><a href="{% url 'blog:category' post.post_supercategory.slug %}">{{post.post_supercategory}}</a></h6>
                                    <h2 class="mb-10">{{ post.title}}</h2>
                                    <div class="single-header-meta">
                                        <div class="entry-meta meta-1 font-xs mt-15 mb-15">
                                            <a class="author-avatar" href="#">
                                                <img class="img-circle" src="{{ post.author.image.url}}" alt="">
                                            </a>
                                            <span class="post-by">By <a href="#">{{ post.author}}</a></span>
                                            <span class="post-on has-dot">{{post.post_date}}</span>
                                            
                                        </div>
                                        <div class="social-icons single-share">
                                            <ul class="text-grey-5 d-inline-block">
                                                <li class="mr-5"><a href="#"><img src="assets/imgs/theme/icons/icon-bookmark.svg" alt=""></a></li>
                                                <li><a href="#"><img src="assets/imgs/theme/icons/icon-heart-2.svg" alt=""></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <figure class="single-thumbnail">
                            <img src="{{ post.post_image.url}}" alt="">
                        </figure>
                        <div class="single-content">
                            <div class="row">
                                <div class="col-xl-10 col-lg-12 m-auto">
                                    {{post.content|safe}}
                                    <!--Entry bottom-->
                                    <div class="entry-bottom mt-50 mb-30">
                                        <!-- <div class="tags w-50 w-sm-100">
                                            <a href="blog-category-big.html" rel="tag" class="hover-up btn btn-sm btn-rounded mr-10">deer</a>
                                            <a href="blog-category-big.html" rel="tag" class="hover-up btn btn-sm btn-rounded mr-10">nature</a>
                                            <a href="blog-category-big.html" rel="tag" class="hover-up btn btn-sm btn-rounded mr-10">conserve</a>
                                        </div>
                                        <div class="social-icons single-share">
                                            <ul class="text-grey-5 d-inline-block">
                                                <li><strong class="mr-10">Share this:</strong></li>
                                                <li class="social-facebook"><a href="#"><img src="assets/imgs/theme/icons/icon-facebook.svg" alt=""></a></li>
                                                <li class="social-twitter"> <a href="#"><img src="assets/imgs/theme/icons/icon-twitter.svg" alt=""></a></li>
                                                <li class="social-instagram"><a href="#"><img src="assets/imgs/theme/icons/icon-instagram.svg" alt=""></a></li>
                                                <li class="social-linkedin"><a href="#"><img src="assets/imgs/theme/icons/icon-pinterest.svg" alt=""></a></li>
                                            </ul>
                                        </div> -->
                                    </div>
                                    <!--Author box-->
                                    <!-- <div class="author-bio p-30 mt-50 border-radius-15 bg-white">
                                        <div class="author-image mb-30">
                                            <a href="author.html"><img src="assets/imgs/blog/author-1.png" alt="" class="avatar"></a>
                                            <div class="author-infor">
                                                <h5 class="mb-5">Barbara Cartland</h5>
                                                <p class="mb-0 text-muted font-xs">
                                                    <span class="mr-10">306 posts</span>
                                                    <span class="has-dot">Since 2012</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="author-des">
                                            <p>Hi there, I am a veteran food blogger sharing my daily all kinds of healthy and fresh recipes. I find inspiration in nature, on the streets and almost everywhere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet id enim, libero sit. Est donec lobortis cursus amet, cras elementum libero</p>
                                        </div>
                                    </div> -->
                                    <!--Comment form-->
                                    <div class="comment-form">
                                        <h3 class="mb-15 text-center mb-30">Leave a Comment</h3>
                                        {% if not user.is_authenticated %}
                                        <h6  class="mb-15 text-center mb-30">Please login to be able to comment</h6>
                                        {%endif%}
                                        <div class="row">
                                            <div class="col-lg-9 col-md-12  m-auto">
                                                <form class="form-contact comment_form mb-50" method="POST" action="{%url 'blog:postdetail' post.post_Slug %}" id="commentForm">
                                                    {% csrf_token %}
                                                    <div class="row">
                                                        
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <input class="form-control" name="name" id="name" type="text" placeholder="Name" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <input class="form-control" name="email" id="email" type="email" placeholder="Email" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9" placeholder="Write Comment" required></textarea>
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="form-group">
                                                        <button type="submit" class="button button-contactForm">Post Comment</button>
                                                    </div>
                                                    
                                                </form>
                                                <div class="comments-area">
                                                    <h3 class="mb-30">Comments</h3>
                                                    <div class="comment-list   m-auto">
                                                    {% for comment in comments%}
                                                    
                                                    <div class="single-comment justify-content-between d-flex mb-30">
                                                        <div class="user justify-content-between d-flex">
                                                            <div class="thumb text-center">
                                                                <img src="{{comment.profile.image.url}}" alt="">
                                                                <a  class="font-heading text-brand">{{comment.name}}</a>
                                                            </div>
                                                            <div class="desc">
                                                                <div class="d-flex justify-content-between mb-10">
                                                                    <div class="d-flex align-items-center">
                                                                        <span class="font-xs text-muted">{{comment.comment_date}} </span>
                                                                    </div>
                                                                    
                                                                </div>
                                                                <p class="mb-10">{{comment.body}}</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>

{%endblock body%}