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

{% block title %}
  
{% endblock title %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/blog-details.css' %}">

{% endblock css %}


{% block content %}
    <section class="inner-section single-banner" style="background: url({% static 'images/single-banner.jpg' %}) no-repeat center;">

        <div class="container">
            <h2>blog details</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'blogs' %}">Blog grid</a></li>
                <li class="breadcrumb-item active" aria-current="page">Blog Details</li>
            </ol>
        </div>
    </section>


    <section class="inner-section blog-details-part">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-xl-10">
                    <article class="blog-details" style="width: 100% !important;">
                        <a class="blog-details-thumb d-block" href="#">
                            <img src="{{ blog.featured_image.url }}" alt="blog">
                        </a>
                        <div class="blog-details-content">
                            <!-- Blog Meta -->
                            <ul class="blog-details-meta">
                                <li><i class="icofont-ui-calendar"></i><span>{{ blog.publish_date|date:"F d, Y" }}</span></li>
                                <li><i class="icofont-user-alt-3"></i><span>{{ blog.author }}</span></li>
                                <li><i class="icofont-speech-comments"></i><span>{{ blog.comments.count }} comments</span></li>
                                <li><i class="icofont-share-boxed"></i><span>34 shares</span></li>
                            </ul>
                
                            <!-- Blog Title -->
                            <h2 class="blog-details-title">{{ blog.title }}</h2>
                
                            <!-- Blog Content -->
                            <p class="blog-details-desc">{{ blog.content|safe }}</p>
                
                            <!-- Next and Previous Navigation -->
                            <div class="blog-details-navigate">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6">
                                        {% if prev_blog %}
                                            <div class="blog-details-prev">
                                                <h4><a href="{% url 'blog_details' slug=prev_blog.slug %}">{{ prev_blog.title }}</a></h4>
                                                <a class="nav-arrow" href="{% url 'blog_details' slug=prev_blog.slug %}">
                                                    <i class="icofont-arrow-left"></i>prev post
                                                </a>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 col-lg-6">
                                        {% if next_blog %}
                                            <div class="blog-details-next">
                                                <h4><a href="{% url 'blog_details' slug=next_blog.slug %}">{{ next_blog.title }}</a></h4>
                                                <a class="nav-arrow" href="{% url 'blog_details' slug=next_blog.slug %}">
                                                    next post <i class="icofont-arrow-right"></i>
                                                </a>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                
                            <!-- Other Blog Details Content (e.g., blockquote, images, etc.) -->
                
                            <!-- Blog Details Footer -->
                            <div class="blog-details-footer">
                                <!-- Share Icons -->
                                <ul class="blog-details-share">
                                    <li><span>share:</span></li>
                                    <li><a href="#" class="icofont-facebook"></a></li>
                                    <li><a href="#" class="icofont-twitter"></a></li>
                                    <li><a href="#" class="icofont-linkedin"></a></li>
                                    <li><a href="#" class="icofont-pinterest"></a></li>
                                    <li><a href="#" class="icofont-instagram"></a></li>
                                </ul>
                
                                <!-- Blog Tags -->
                                <ul class="blog-details-tag">
                                    <li><span>tags:</span></li>
                                    {% for tag in blog.tags.all %}
                                        <li><a href="javascript: void(0)">{{ tag.name }}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </article>
                    <div class="blog-details-profile">
                        <a href="#"><img src="{{ blog.author.user.image.url }}" alt="avatar"></a>
                        <h3>{{ blog.author.user.name }}</h3>
                        <h4>{{ blog.author.user.phone }}</h4>
                        <ul>
                            {% for profile in blog.author_social_profiles %}
                                {% if profile.name == 'Facebook' %}
                                    <li><a href="{{ profile.url }}" class="icofont-facebook"></a></li>
                                {% elif profile.name == 'Twitter' %}
                                    <li><a href="{{ profile.url }}" class="icofont-twitter"></a></li>
                                {% elif profile.name == 'LinkedIn' %}
                                    <li><a href="{{ profile.url }}" class="icofont-linkedin"></a></li>
                                {% elif profile.name == 'Pinterest' %}
                                    <li><a href="{{ profile.url }}" class="icofont-pinterest"></a></li>
                                {% elif profile.name == 'Instagram' %}
                                    <li><a href="{{ profile.url }}" class="icofont-instagram"></a></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                        <p>{{ blog.author.bio }}</p>
                    </div>
                    <div class="blog-details-navigate">
                        <div class="row">
                            <div class="col-md-6 col-lg-6">
                                {% if prev_blog %}
                                    <div class="blog-details-prev">
                                        <h4><a href="{% url 'blog_details' slug=prev_blog.slug %}">{{ prev_blog.title }}</a></h4>
                                        <a class="nav-arrow" href="{% url 'blog_details' slug=prev_blog.slug %}"><i
                                                class="icofont-arrow-left"></i>prev post</a>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 col-lg-6">
                                {% if next_blog %}
                                    <div class="blog-details-next">
                                        <h4><a href="{% url 'blog_details' slug=next_blog.slug %}">{{ next_blog.title }}</a></h4>
                                        <a class="nav-arrow" href="{% url 'blog_details' slug=next_blog.slug %}">next post<i
                                                class="icofont-arrow-right"></i></a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="blog-details-comment">
                        <h3 class="comment-title">{{ blog.comments.count }} Comments</h3>
                        <ul class="comment-list">
                            {% for comment in comments %}
                                <li class="comment-item">
                                    <div class="comment-media">
                                        <a class="comment-avatar" href="#">
                                            <img src="{{ comment.user.image.url }}" alt="{{ comment.user.name }}" style="width: 60px; height: 60px; border-radius: 50%;">
                                        </a>
                                        <h6 class="comment-meta">
                                            <a href="#">{{ comment.user.name }}</a>
                                            <span>{{ comment.created_at|date:"F d, Y" }}</span>
                                        </h6>
                                    </div>
                                    <p class="comment-desc">
                                        {{ comment.text }}
                                    </p>
                                    <form action="{% url 'reply_to_comment' comment.id %}" method="POST" class="comment-reply">
                                        {% csrf_token %}
                                        <input type="text" name="text" placeholder="Reply to your comment">
                                        <button type="submit"><i class="icofont-reply"></i>Reply</button>
                                    </form>
                                    <ul class="comment-reply-list">
                                        {% for reply in comment.reply_set.all %}
                                            <li class="comment-reply-item">
                                                <div class="comment-media">
                                                    <a class="comment-avatar" href="#">
                                                        <img src="{{ reply.user.image.url }}" alt="{{ reply.user.name }}" style="width: 60px; height: 60px; border-radius: 50%;">
                                                    </a>
                                                    <h6 class="comment-meta">
                                                        <a href="#">{{ reply.user.name }}</a>
                                                        <span>{{ reply.created_at|date:"F d, Y" }}</span>
                                                    </h6>
                                                </div>
                                                <p class="comment-desc">
                                                    {{ reply.text }}
                                                </p>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <form action="" method="POST" class="blog-details-form">
                        {% csrf_token %}
                        <h3 class="details-form-title">post comment</h3>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <textarea class="form-control" name="text"  placeholder="write your comment"></textarea>
                                </div>
                            </div>
                        </div>
                        <button class="form-btn" type="submit">post comment</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    {% include 'site/includes/newsletter.html' %}
    

    {% endblock content %}



    {% block js %}
      
    {% endblock js %}