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

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


{% block css %}
<link rel="stylesheet" href="{% static 'css/blog-standard.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 grid</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Blog grid</li>
            </ol>
        </div>
    </section>
    <section class="inner-section blog-grid">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="top-filter">
                                <div class="filter-show">
                                    <label class="filter-label">Show :</label>
                                    <select class="form-select filter-select" name="show_count" onchange="this.form.submit()">
                                        <option value="12" {% if request.GET.show_count == '12' %}selected{% endif %}>12</option>
                                        <option value="24" {% if request.GET.show_count == '24' %}selected{% endif %}>24</option>
                                        <option value="36" {% if request.GET.show_count == '36' %}selected{% endif %}>36</option>
                                    </select>
                                </div>
                                <div class="filter-short">
                                    <label class="filter-label">Short by :</label>
                                    <select class="form-select filter-select" name="sort_option" onchange="this.form.submit()">
                                        <option value="default" {% if request.GET.sort_option == 'default' %}selected{% endif %}>default</option>
                                        <option value="recent" {% if request.GET.sort_option == 'recent' %}selected{% endif %}>recent</option>
                                        <option value="featured" {% if request.GET.sort_option == 'featured' %}selected{% endif %}>featured</option>
                                        <option value="recommend" {% if request.GET.sort_option == 'recommend' %}selected{% endif %}>recommend</option>
                                    </select>
                                </div>
                                <div class="filter-action">
                                    <a href="?layout=grid" class="{% if request.GET.layout != 'list' %}active{% endif %}" title="Two Column">
                                        <i class="fas fa-th-large"></i>
                                    </a>
                                    <a href="?layout=list" class="{% if request.GET.layout == 'list' %}active{% endif %}" title="One Column">
                                        <i class="fas fa-th-list"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        {% if blogs %}
                            {% for blog in blogs %}
                                <div class="col-md-6 col-lg-6">
                                    <div class="blog-card shadow">
                                        <div class="blog-media">
                                            <a class="blog-img" href="#"><img src="{{ blog.featured_image.url }}" alt="{{ blog.title }}"></a>
                                        </div>
                                        <div class="blog-content">
                                            <ul class="blog-meta">
                                                <li><i class="fas fa-user"></i><span>{{ blog.author }}</span></li>
                                                <li><i class="fas fa-calendar-alt"></i><span>{{ blog.publish_date|date:"F d, Y" }}</span></li>
                                            </ul>
                                            <h6 class="blog-title"><a href="{% url 'blog_detail' blog.slug %}">{{ blog.title|truncatechars_html:70 }}</a></h6>
                                            <p class="blog-desc">{{ blog.content|safe|truncatechars_html:150 }}</p>
                                            <a class="blog-btn" href="{% url 'blog_detail' blog.slug %}"><span>read more</span><i class="icofont-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="col-md-12">
                                <p>No blogs available at the moment.</p>
                            </div>
                        {% endif %}
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="bottom-paginate">
                                <p class="page-info">Showing 12 of 60 Results</p>
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#"><i
                                                class="fas fa-long-arrow-alt-left"></i></a></li>
                                    <li class="page-item"><a class="page-link active" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">...</li>
                                    <li class="page-item"><a class="page-link" href="#">60</a></li>
                                    <li class="page-item"><a class="page-link" href="#"><i
                                                class="fas fa-long-arrow-alt-right"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 col-lg-4">
                    <div class="blog-widget">
                        <h3 class="blog-widget-title">Find blogs</h3>
                        <form class="blog-widget-form">
                            <input type="text" placeholder="Search blogs">
                            <button class="icofont-search-1"></button>
                        </form>
                    </div>
                    <div class="blog-widget">
                        <h3 class="blog-widget-title">popular feeds</h3>
                        <ul class="blog-widget-feed">
                            
                            {% if popular_feeds %}
                            
                            {% for popular_feed in popular_feeds %}
                            <li>
                                <a class="blog-widget-media" href="{% url 'blog_detail' popular_feed.slug %}">
                                    <img src="{{ popular_feed.featured_image.url }}" alt="blog-widget">
                                </a>
                                <h6 class="blog-widget-text">
                                    <a href="{% url 'blog_detail' popular_feed.slug %}">{{ popular_feed.title }}</a>
                                    <span>{{ popular_feed.publish_date|date:"F d, Y" }}</span>
                                </h6>
                            </li>
                            {% endfor %}
                                
                            {% else %}
                            <li>
                                <h6 class="blog-widget-text">
                                    <a href="javascript: void(0)">Popular blogs are not available.</a>
                                </h6>
                            </li>
                            {% endif %}
                                
                        </ul>
                    </div>
                    <div class="blog-widget">
                        <h3 class="blog-widget-title">top categories</h3>
                        <ul class="blog-widget-category">
                            {% if top_categories %}
                                {% for top_categorie in top_categories %}
                                    <li><a href="javascript: void(0)">{{ top_categorie.name }} <span>{{ top_categorie.count }}</span></a></li>
                                {% endfor %}
                            {% else %}
                                <li><a href="javascript: void(0)">Top categories are not available.</a></li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="blog-widget">
                        <h3 class="blog-widget-title">popular tags</h3>
                        <ul class="blog-widget-tag">
                            {% if popular_tags %}
                                <ul>
                                    {% for popular_tag in popular_tags %}
                                        <li><a href="javascript: void(0)">{{ popular_tag.name }}</a></li>
                                    {% endfor %}
                                </ul>
                            {% else %}
                                <p>Popular tags are not available.</p>
                            {% endif %}

                        </ul>
                    </div>
                    <div class="blog-widget">
                        <h3 class="blog-widget-title">follow us</h3>
                        <ul class="blog-widget-social">
                            {% if social_media %}
                                {% for profile in social_media %}
                                    {% 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 %}
                            {% else %}
                                <li>No social media profiles available.</li>
                            {% endif %}
                        </ul>
                        
                    </div>
                    <div class="blog-widget">
                        <a href="{% url 'contact' %}">
                            <img class="img-fluid" src="{% static 'images/promo/blog/01.jpg' %}" alt="promo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    {% include 'site/includes/newsletter.html' %}
    
    {% endblock content %}


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