{% extends 'website/base/base.html' %}
{% block title %} Blog Detail {% endblock %}

{% block stylesheets %}
<meta name="description" content="{{ blog.description }}">
<meta name="keywords" content="{{ blog.keywords }}">



<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/news.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/blog-details.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/sidebar.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">

<style>
    body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
</style>



{% endblock stylesheets %}

{% block content %}





     


        <!-- sidebar-page-container -->
        <section class="sidebar-page-container pt_150 pb_150">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-8 col-md-12 col-sm-12 content-side">
                        <div class="blog-details-content">
                            <div class="news-block-two">
                                <div class="inner-box">
                                    <figure class="image-box"><img src="{{ blog.cover.url }}" alt="{{ blog.title }}"></figure>
                                    <div class="lower-content" style="padding-right: 30px; padding-left: 30px; padding-bottom: 30px;">
                                        <div style="color: black;" class="date-box">{{ blog.date|date:"d" }}<span style="color: black !important;">{{ blog.date|date:"M" }}</span></div>
                                        <h2>{{ blog.title }}</h2>
                                        <p>{{ blog.content|safe }}</p>
                                        
                                    </div>
                                </div>
                            </div>
                           
                            <div class="post-share-option mb_60">
                                <ul class="post-share">
                                    <li><span style="color: white;">Share This :</span></li>
                                    <li><a href="blog-detail.html"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="blog-detail.html"><i class="fab fa-pinterest"></i></a></li>
                                    <li><a href="blog-detail.html"><i class="fab fa-twitter"></i></a></li>
                                </ul>
                            </div>

                            <!-- <div class="author-box mb_60">
                                <h3>{{ blog.author }}</h3>
                                <span class="designation">{{ blog.role }}</span>
                            </div> -->
                            
                            <div class="comment-form-area">
                                <h3 style="color: white;">Leave A Comments</h3>
                                <div class="form-inner">
                                    <form method="post" action="blog-detail.html">
                                        <div class="row clearfix">
                                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                                <input type="text" name="name" placeholder="Your name" required>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                                <input type="email" name="email" placeholder="Your email" required>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                                <textarea name="message" placeholder="Type message"></textarea>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn">
                                                <button type="submit" class="theme-btn btn-two"><span>Post a Comment</span></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 col-sm-12 sidebar-side">
                        <div class="blog-sidebar default-sidebar ml_20" style="border-radius: 10px;">
                            <!-- <div class="sidebar-widget search-widget mb_70">
                                <div class="widget-title mb_18">
                                    <h3>Search</h3>
                                </div>
                                <div class="search-inner">
                                    <form method="post" action="">
                                        <div class="form-group">
                                            <input type="search" name="search-field" placeholder="Search..." required>
                                            <button type="submit"><img src="../static/website/assets/images/icons/icon-15.png" alt=""></button>
                                        </div>
                                    </form>
                                </div>
                            </div> -->
                            <div class="sidebar-widget post-widget mb_40">
                                <div class="widget-title mb_25">
                                    <h3>Latest News</h3>
                                </div>
                                {% for latest_blog in latest_blogs %}
                                <div class="post-inner">
                                    <div class="post">
                                        <figure class="post-thumb">
                                            <a href="{% url 'blog_details' slug=latest_blog.slug %}">
                                                <img src="{{ latest_blog.blogs_thumbnail.url }}" alt="{{ latest_blog.title }}">
                                            </a>
                                        </figure>
                                        <h5>
                                            <a href="{% url 'blog_details' slug=latest_blog.slug %}" style="color: black; text-decoration: none;" onmouseover="this.style.color='black'" onmouseout="this.style.color='black'">
                                                {{ latest_blog.title }}
                                            </a>
                                        </h5>
                                        <span class="post-date"><i class="icon-39"></i>{{ latest_blog.date }}</span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- sidebar-page-container end -->


        


         

        <!--Scroll to top-->
        <div class="scroll-to-top">
            <div>
                <div class="scroll-top-inner">
                    <div class="scroll-bar">
                        <div class="bar-inner"></div>
                    </div>
                    <div class="scroll-bar-text">Go To Top</div>
                </div>
            </div>
        </div>
        <!-- Scroll to top end -->
        
    </div>

    {% block javascripts %}
    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}