{% extends "base.html" %}
{% load static %}
{% load reactpy %}

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

{% block content %}
<!-- content    -->
<div class="content">
    {% if messages %}
    {% for msg in messages  %}
     <script>alert("Invalid email address, perhaps you typed in the wrong format. Please try again!")</script>
    {% endfor %}
  {% endif %}
    <!-- hero-slider-wrap     -->
    <div class="hero-slider-wrap fl-wrap">
        <!-- hero-slider-container     -->
        <div class="hero-slider-container multi-slider fl-wrap full-height">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {% for post in hero_posts  %}
                                          <!-- swiper-slide -->
                    <div class="swiper-slide">
                        <div class="bg-wrap">
                            <div class="bg" data-bg="{{post.post_image_1.url}}"
                                data-swiper-parallax="40%"></div>
                            <div class="overlay"></div>
                        </div>
                        <div class="hero-item fl-wrap">
                            <div class="container">
                                <a class="post-category-marker" href="post-details/?post-id={{post.id}}">{{post.post_tag}}</a>
                                <div class="clearfix"></div>
                                <h2><a href="post-details/?post-id={{post.id}}">{{post.title}}</a></h2>
                                <h4>{{post.paragraph_1|slice:"200"}}...</h4>
                                <div class="clearfix"></div>
                                <div class="author-link"><a href="post-details/?post-id={{post.id}}}}"><img
                                            src="https://res.cloudinary.com/dyyzfuezg/image/upload/v1719858829/img_u5b6rz.png" alt=""> <span>By
                                            {{post.posted_by}}</span></a></div>
                                <span class="post-date"><i class="far fa-clock"></i> {{post.date}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- swiper-slide  end   -->
                    {% endfor %}

                </div>
            </div>
        </div>
        <!-- hero-slider-container  end   -->
        <!-- hero-slider_controls-wrap   -->
        <div class="hero-slider_controls-wrap">
            <div class="container">
                <div class="hero-slider_controls-list multi-slider_control">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {% for post in hero_posts  %}
                            <!-- swiper-slide  -->
                            <div class="swiper-slide">
                                <div class="hsc-list_item fl-wrap">
                                    <div class="hsc-list_item-media">
                                        <div class="bg-wrap">
                                            <div class="bg" data-bg="{{post.post_image_1.url}}"></div>
                                        </div>
                                    </div>
                                    <div class="hsc-list_item-content fl-wrap">
                                        <h4>{{post.title}}</h4>
                                        <span class="post-date"><i class="far fa-clock"></i> {{post.date}}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- swiper-slide end   -->
                             {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="multi-pag"></div>
            </div>
        </div>
        <!-- hero-slider_controls-wrap end  -->
        <div class="slider-progress-bar act-slider">
            <span>
                <svg class="circ" width="30" height="30">
                    <circle class="circ2" cx="15" cy="15" r="13" stroke="rgba(255,255,255,0.4)" stroke-width="1"
                        fill="none" />
                    <circle class="circ1" cx="15" cy="15" r="13" stroke="#e93314" stroke-width="2" fill="none" />
                </svg>
            </span>
        </div>
    </div>
    <!-- hero-slider-wrap  end   -->
    
        <!--section   -->
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="main-container fl-wrap fix-container-init">
                            <div class="section-title">
                                <h2>Most recent posts</h2>
                                <h4>Don't miss daily news</h4>
                            </div>
                            <!-- box-widget -->
                            <div class="box-widget fl-wrap">
                                <div class="box-widget-content">
                                    <div class="search-widget fl-wrap">
                                        <form action="." method="GET">
                                            <input name="q" id="se12" type="text" class="search" placeholder="{{query}}" value="" />
                                            <button class="search-submit2" id="submit_btn12"><i class="far fa-search"></i> </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- box-widget  end -->
                            <div class="list-post-wrap">

                                {% if not posts %}
                                    <!--list-post-->	
                                    <div class="list-post fl-wrap">
                                    <div class="list-post-media">
                                        <a href="post-details/?post-id={{post.id}}">
                                            <div >
                                                <div class="bg" data-bg="https://res.cloudinary.com/dyyzfuezg/image/upload/v1719869400/img_zkdawq.avif"></div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="list-post-content">
                                        <p>We couldn't find a title that matched your search. Could you please search using other keywords like epoo, education, student, etc...</p>
                                        <ul class="post-opt">
                                            <!-- <li><i class="far fa-comments-alt"></i> 6 </li> -->
                                        </ul>
                                    </div>
                                </div>
                                <!--list-post end-->
                                
                                {% else %}

                                {% for post in posts  %}
                                <!--list-post-->	
                                    <div class="list-post fl-wrap">
                                    <div class="list-post-media">
                                        <a href="post-details/?post-id={{post.id}}">
                                            <div class="bg-wrap">
                                                <div class="bg" data-bg="{{post.post_image_1.url}}"></div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="list-post-content">
                                        <a class="post-category-marker" href="post-details/?post-id={{post.id}}">{{post.post_tag}}</a>
                                        <h3><a href="post-details/?post-id={{post.id}}">{{post.title}}</a></h3>
                                        <span class="post-date"><i class="far fa-clock"></i>{{post.date}}</span>
                                        <p>{{post.paragraph_1|slice:"200"}}...</p>
                                        <ul class="post-opt">
                                            <!-- <li><i class="far fa-comments-alt"></i> 6 </li> -->
                                            <li><i class="fal fa-eye"></i>  {{post.views}} </li>
                                        </ul>
                                        <div class="author-link"><a href="post-details/?post-id={{post.id}}"><img src="https://res.cloudinary.com/dyyzfuezg/image/upload/v1719858829/img_u5b6rz.png" alt="">  <span>By {{post.posted_by}}</span></a></div>
                                    </div>
                                </div>
                                <!--list-post end-->	
                                {% endfor %}	
                                
                                {% endif %}
                            </div>
                            <div class="clearfix"></div>				
                        </div>
                    </div>
                    <div class="col-md-4">
                        <!-- sidebar   -->
                        <div class="sidebar-content fl-wrap fixed-bar">																						
                            <!-- box-widget -->
                            <div class="box-widget fl-wrap">
                                <div class="box-widget-content">
                                    <!-- content-tabs-wrap -->
                                    <div class="content-tabs-wrap tabs-act tabs-widget fl-wrap">
                                        <div class="content-tabs fl-wrap">
                                            <ul class="tabs-menu fl-wrap no-list-style">
                                                <li class="current"><a href="#tab-popular"> Popular Posts </a></li>
                                                <li><a href="#tab-resent">Recent Posts</a></li>
                                            </ul>
                                        </div>
                                        <!--tabs -->                       
                                        <div class="tabs-container">
                                            <!--tab -->
                                            <div class="tab">
                                                <div id="tab-popular" class="tab-content first-tab">
                                                    <div class="post-widget-container fl-wrap">
                                                        {% for post in most_viewed  %}
                                                        <!-- post-widget-item -->
                                                        <div class="post-widget-item fl-wrap">
                                                            <div class="post-widget-item-media">
                                                                <a href="post-details/?post-id={{post.id}}"><img src="{{post.post_image_1.url}}"  alt=""></a>
                                                            </div>
                                                            <div class="post-widget-item-content">
                                                                <h4><a href="post-details/?post-id={{post.id}}">{{post.title}}</a></h4>
                                                                <ul class="pwic_opt">
                                                                    <li><span><i class="far fa-clock"></i> {{post.date}}</span></li>
                                                                    <!-- <li><span><i class="far fa-comments-alt"></i> 12</span></li> -->
                                                                    <li><span><i class="fal fa-eye"></i> {{post.views}}</span></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <!-- post-widget-item end -->
                                                        {% endfor %}																											
                                                    </div>
                                                </div>
                                            </div>
                                            <!--tab  end-->
                                            <!--tab -->
                                            <div class="tab">
                                                <div id="tab-resent" class="tab-content">
                                                    <div class="post-widget-container fl-wrap">	
                                                        {% for post in hero_posts  %}																											
                                                        <!-- post-widget-item -->
                                                        <div class="post-widget-item fl-wrap">
                                                            <div class="post-widget-item-media">
                                                                <a href="post-details/?post-id={{post.id}}"><img src="{{post.post_image_1.url}}"  alt=""></a>
                                                            </div>
                                                            <div class="post-widget-item-content">
                                                                <h4><a href="post-details/?post-id={{post.id}}">{{post.title}}</a></h4>
                                                                <ul class="pwic_opt">
                                                                    <li><span><i class="far fa-clock"></i> {{post.date}}</span></li>
                                                                    <!-- <li><span><i class="far fa-comments-alt"></i> 05</span></li> -->
                                                                    <li><span><i class="fal fa-eye"></i> {{post.views}}</span></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <!-- post-widget-item end -->	
                                                         {% endfor %}												
                                                    </div>
                                                </div>
                                            </div>
                                            <!--tab end-->							
                                        </div>
                                        <!--tabs end-->  
                                    </div>
                                    <!-- content-tabs-wrap end -->
                                </div>
                            </div>
                            <!-- box-widget  end -->					
                        </div>
                        <!-- sidebar  end -->
                    </div>
                </div>
                <div class="limit-box fl-wrap"></div>
            </div>
        </section>
        <!-- section end -->

    {% endblock content %}