{% extends 'front/base.html' %}
{% load static %}
{% block title %} {{title}} - {{seo_settings.meta_title}} {% endblock title %}
{% block title1 %} {{title}} - {{seo_settings.meta_title}} {% endblock title1 %}
{% block title2 %} {{title}} - {{seo_settings.meta_title}} {% endblock title2 %}
{% block content %}
    <main class="creasoft-wrap">

        <div class="line_wrap">
            <div class="line_item"></div>
            <div class="line_item"></div>
            <div class="line_item"></div>
            <div class="line_item"></div>
            <div class="line_item"></div>
        </div>


        <section class="breadcrumbs">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                            <div class="breadcrumb-cnt">
                                <h1>{{ category.title }}</h1>
                                <span><a href="{% url "homePageFront" %}">Home</a><i class="bi bi-arrow-right"></i>Blogs<i class="bi bi-arrow-right"></i>{{ category.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="blog-grid sec-mar-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="sidebar-widget">
                            <div class="widget-search">
                                <form action="{% url "blogPageFront" %}" method="GET">
                                    <input type="text" name="search" value="{{ request.GET.search }}" placeholder="Search Here">
                                    <button type="submit"><i class="bi bi-search"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="sidebar-widget">
                            <h4>Categories</h4>
                            <ul class="category">
                                {% for category in categories %}
                                    <li><a href="{% url "blogsByCategory" category.slug %}">{{ category.title }}<i class="bi bi-arrow-right"></i></a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="sidebar-widget">
                            <h4>Related Blogs</h4>
                            {% for blog in blogs|slice:":5" %}
                                <div class="recent-post">
                                    <div class="recent-thumb">
                                        <a href="{% url "blogDetails" blog.slug %}"><img src="{{ blog.getTHumb }}" style="border-radius:5px;" alt="thumbnail"></a>
                                    </div>
                                    <div class="recent-post-cnt">
                                        <span>{{ blog.created_at }}</span>
                                        <h5><a href="{% url "blogDetails" blog.slug %}">{{ blog.title }}</a></h5>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="blog-item-grid">
                            <div class="row g-4">
                                {% for blog in blogs %}
                                    <div class="col-md-6">
                                        <div class="single-blog">
                                            <div class="blog-thumb">
                                                <a href="{% url "blogDetails" blog.slug %}"><img src="{{ blog.getTHumb }}" alt></a>
                                                <div class="tag">
                                                    <a href="{% url "blogsByCategory" blog.category.slug %}">{{ blog.category }}</a>
                                                </div>
                                            </div>
                                            <div class="blog-inner">
                                                <div class="author-date">
                                                    <a href="#">By, {{ blog.author }}</a>
                                                    <a href="#">{{ blog.created_at }}</a>
                                                </div>
                                                <h4><a href="{% url "blogDetails" blog.slug %}">{{ blog.title }}</a></h4>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="load-more">
                            <ul class="paginations">
                                <li><a href="?page=1"><i class="fas fa-long-arrow-alt-left"></i></a></li>
                                {% for page in blogs.paginator.page_range %}
                                    <li{% if page == blogs.number %} class="active"{% endif %}><a href="?page={{ page }}">{{ page }}</a></li>
                                {% endfor %}
                                <li><a href="?page={{ blogs.paginator.num_pages }}"><i class="fas fa-long-arrow-alt-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
{% endblock %}