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

 {%block body%}

 <main class="main">
    <div class="page-header mt-30 mb-75">
        <div class="container">
            <div class="archive-header">
                <div class="row align-items-center">
                    <div class="col-xl-3">
                        <h1 class="mb-15">Blog & News</h1>
                        <div class="breadcrumb">
                            <a href="{%url 'home:index'%}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                            <span></span> Blog & News
                        </div>
                    </div>
                    <!-- <div class="col-xl-9 text-end d-none d-xl-block">
                        <ul class="tags-list">
                            <li class="hover-up">
                                <a href="blog-category-grid.html"><i class="fi-rs-cross mr-10"></i>Shopping</a>
                            </li>
                            <li class="hover-up active">
                                <a href="blog-category-grid.html"><i class="fi-rs-cross mr-10"></i>Recips</a>
                            </li>
                            <li class="hover-up">
                                <a href="blog-category-grid.html"><i class="fi-rs-cross mr-10"></i>Kitchen</a>
                            </li>
                            <li class="hover-up">
                                <a href="blog-category-grid.html"><i class="fi-rs-cross mr-10"></i>News</a>
                            </li>
                            <li class="hover-up mr-0">
                                <a href="blog-category-grid.html"><i class="fi-rs-cross mr-10"></i>Food</a>
                            </li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="page-content mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- <div class="shop-product-fillter mb-50">
                        <div class="totall-product">
                            <h2>
                                <img class="w-36px mr-10" src="assets/imgs/theme/icons/category-1.svg" alt="" />
                                Recips Articles
                            </h2>
                        </div>
                        <div class="sort-by-product-area">
                            <div class="sort-by-cover mr-10">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps"></i>Show:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> 50 <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a class="active" href="#">50</a></li>
                                        <li><a href="#">100</a></li>
                                        <li><a href="#">150</a></li>
                                        <li><a href="#">200</a></li>
                                        <li><a href="#">All</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="sort-by-cover">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps-sort"></i>Sort:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span>Featured <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a class="active" href="#">Featured</a></li>
                                        <li><a href="#">Newest</a></li>
                                        <li><a href="#">Most comments</a></li>
                                        <li><a href="#">Release Date</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="loop-grid">
                        <div class="row">
                            {% for post in posts%}
                            <article class="col-xl-3 col-lg-4 col-md-6 text-center hover-up mb-30 animated">
                                <div class="post-thumb">
                                    <a href="{%url 'blog:postdetail' post.post_Slug %}">
                                        <img class="border-radius-15" src="{{post.post_image.url}}" alt="" />
                                    </a>
                                    <!-- <div class="entry-meta">
                                        <a class="entry-meta meta-2" href="blog-category-grid.html"><i class="fi-rs-heart"></i></a>
                                    </div> -->
                                </div>
                                <div class="entry-content-2">
                                    <h6 class="mb-10 font-sm"><a class="entry-meta text-muted" href="{% url 'blog:category' post.post_supercategory.slug %}">{{post.post_supercategory}}</a></h6>
                                    <h4 class="post-title mb-15">
                                        <a href="{%url 'blog:postdetail' post.post_Slug %}">{{post.title|truncatechars:40}}</a>
                                    </h4>
                                    <div class="entry-meta font-xs color-grey mt-10 pb-10">
                                        <div>
                                            <span class="post-on mr-10"> {{post.post_date|date:"j F o"}}</span>
                                            <span class="hit-count has-dot mr-10">{{post.views}} Views</span>
                                            
                                        </div>
                                    </div>
                                </div>
                            </article>
                            {% endfor %}
                        </div>
                    </div>
                    {%if posts.has_other_pages %}
                    <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-start">
                                {%if posts.has_previous%}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{posts.previous_page_number}}"><i class="fi-rs-arrow-small-left"></i></a>
                                </li>
                                {%endif%}
                                <li class="page-item active"><a class="page-link" href="#">{{posts.number}}</a></li>
                                {%if posts.paginator.num_pages > posts.number  %}
                                
                                <li class="page-item"><a class="page-link" href="?page={{posts.number|add:1}}">{{posts.number|add:1}}</a></li>
                                {%endif%}
                                 <!-- <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                                <li class="page-item"><a class="page-link dot" href="#">...</a></li>
                                
                                <li class="page-item"><a class="page-link" href="?page={{posts.paginator.num_pages}}">{{posts.paginator.num_pages}}</a></li>
                                {%if posts.has_next%}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{posts.next_page_number}}"><i class="fi-rs-arrow-small-right"></i></a>
                                </li>
                                {%endif%}
                            </ul>
                        </nav>
                    </div>
                    {%endif%} 
                </div>
            </div>
        </div>
    </div>
</main>

 {%endblock body%}