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

{% block central %}
      <!-- *** START PAGE MAIN CONTENT *** -->
        <main class="page_main_wrapper">
             <!-- START NEWSTRICKER -->
            <div class="container">
                <div class="newstricker_inner">
                    <div class="trending">En <strong>Tendance</strong></div>
                    <div class="news-ticker owl-carousel owl-theme">
                        {% for trend in trendItems %}
                        <div class="item">
                            <a href="#">{{ trend.content }}</a>
                        </div>
                       {% endfor %}
                    </div>
                </div>
            </div>
            <!--  END OF /. NEWSTRICKER -->
             <section class="slider-inner">
                <div class="container">
                    <div class="row thm-margin">
                        <div class="col-xs-12 col-sm-12 col-md-12 thm-padding">
                            <div class="slider-wrapper">
                                <div id="owl-slider" class="owl-carousel owl-theme">
                                    {% for sliderItem in sliderItems %}
                                    <!-- Slider item one -->
                                    <div class="item">
                                        <div class="slider-post post-height-1">
                                            <a href="{{ sliderItem.get_absolute_url }}" class="news-image"><img src="{{ sliderItem.cover.url }}" alt="" class="img-responsive"></a>
                                            <div class="post-text">
                                                {% for cat in sliderItem.categories.all %}
                                                    <span class="post-category">{{ cat.nom }}</span>
                                                {% endfor %}
                                                <h2><a href="{{ sliderItem.get_absolute_url }}">{{ sliderItem.title }}</a></h2>
                                                <ul class="authar-info">
                                                    <li class="authar"><a href="#">Par {{ sliderItem.author }}</a></li>
                                                    <li class="date">{{sliderItem.created_on | date:'d M Y'}}</li>
                                                    <li class="view"><a href="#">{{sliderItem.views}} Vue(s)</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.Slider item one -->
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

             <div class="container">
                <div class="row row-m">
                    <!-- START MAIN CONTENT -->
                    <div class="col-sm-8 col-p main-content">
                        <div class="theiaStickySidebar">
                            <!-- START POST CATEGORY STYLE ONE (Popular news) -->
                            <div class="post-inner">
                                <!--post header-->
                                <div class="post-head">
                                    <h2 class="title"><strong>Articles</strong> Les plus vues</h2>
                                </div>
                                <!-- post body -->
                                <div class="post-body">
                                    <div class="post-slider owl-carousel owl-theme">
                                        <!-- item one -->
                                        {% for most in mostViewedPost %}
                                            {% if forloop.first %}
                                                <div class="item">
                                                <div class="row">
                                                    <div class="col-sm-6 main-post-inner bord-right">
                                                        <article>
                                                            <figure>
                                                                <a href="{{ most.get_absolute_url }}"><img src="{{ most.cover.url }}" height="242" width="345" alt="" class="img-responsive"></a>

                                                                {% for cat in most.categories.all %}
                                                                    <span class="post-category">{{ cat.nom }}</span>
                                                                {% endfor %}
                                                            </figure>
                                                            <div class="post-info">
                                                                <h3><a href="{{ most.get_absolute_url }}">{{ most.title }}</a></h3>
                                                                <ul class="authar-info">
                                                                    <li><i class="ti-timer"></i>{{ most.created_on | date:'d M Y' }}</li>
                                                                    <li class="like"><a href="#"><i class="ti-eye"></i>{{ most.views }} vue(s)</a></li>
                                                                </ul>
                                                                <p>{{ most.body | truncatechars:30 }}</p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="news-list">
                                                            {% for mostS in mostViewedPosts %}
                                                            <div class="news-list-item">
                                                                <div class="img-wrapper">
                                                                    <a href="{{ mostS.get_absolute_url }}" class="thumb">
                                                                        <img src="{{ mostS.cover.url }}" alt="" class="img-responsive">
                                                                    </a>
                                                                </div>
                                                                <div class="post-info-2">
                                                                    <h5><a href="{{ mostS.get_absolute_url }}" class="title">{{ mostS.title }}</a></h5>
                                                                    <ul class="authar-info">
                                                                        <li><i class="ti-timer"></i>{{ mostS.created_on | date:'d M Y' }}</li>
                                                                        <li class="like hidden-xs hidden-sm"><a href="#"><i class="ti-eye"></i>{{ mostS.views }}</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            <!-- END OF /. POST CATEGORY STYLE ONE (Popular news) -->
                            <!-- START ADVERTISEMENT -->
                            <div class="add-inner">
                                <img src="{% static 'assets/images/add728x90-1.jpg' %}" class="img-responsive" alt="">
                            </div>
                            <!-- END OF /. ADVERTISEMENT -->
                            <!-- START POST CATEGORY STYLE TWO (Travel news) -->
                            <div class="post-inner post-inner-2">
                                <!--post header-->
                                <div class="post-head">
                                    <h2 class="title"><strong>Plus</strong>  d'Informations</h2>
                                </div>
                                <!-- post body -->
                                <div class="post-body">
                                    <div class="post-slider owl-carousel owl-theme">
                                        {% for last in lastPost %}
                                            {% if forloop.first %}
                                                <div class="item">
                                                    <div class="row">
                                                        <div class="col-sm-6 main-post-inner bord-right">
                                                            <article>
                                                                <figure>
                                                                    <a href="{{ last.get_absolute_url }}"><img src="{{ last.cover.url }}" height="242" width="345" alt="" class="img-responsive"></a>
                                                                    {% for cat in last.categories.all %}
                                                                    <span class="post-category">{{ cat.nom }}</span>
                                                                    {% endfor %}
                                                                </figure>
                                                                <div class="post-info">
                                                                    <h3><a href="{{ last.get_absolute_url }}">{{ last.title }}</a></h3>
                                                                    <ul class="authar-info">
                                                                        <li><i class="ti-timer"></i>{{ last.created_on | date:'d M Y' }}</li>
                                                                        <li class="like"><a href="#"><i class="ti-eye"></i>{{ last.views }} vue(s)</a></li>
                                                                    </ul>
                                                                    <p class="p">{{ last.body | truncatechars:30 }}</p>
                                                                </div>
                                                            </article>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="news-grid-2">
                                                                <div class="row row-margin">
                                                                    {% for lastS in lastPosts %}
                                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-padding">
                                                                        <div class="grid-item">
                                                                            <div class="grid-item-img">
                                                                                <a href="{{ lastS.get_absolut_url }}">
                                                                                    <img src="{{ lastS.cover.url }}" class="img-responsive" alt="">
                                                                                </a>
                                                                            </div>
                                                                            <h5><a href="{{ lastS.get_absolut_url }}" class="title">{{ lastS.title }}</a></h5>
                                                                            <ul class="authar-info">
                                                                                <li>{{ lastS.creted_on | date:'d M Y' }}</li>
                                                                                <li class="like hidden-sm"><a href="#">{{ lastS.views }} vue(s)</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                                <!-- footer post -->

                            </div>
                            <!--  END OF /. POST CATEGORY STYLE TWO (Travel news) -->
                        </div>
                    </div>
                    <!-- END OF /. MAIN CONTENT -->
                    <!-- START SIDE CONTENT -->
                    <div class="col-sm-4 col-p rightSidebar">
                        <div class="theiaStickySidebar">
                            <!-- START WEATHER -->
                            <div class="weather-wrapper">
                                <div class="row thm-margin">
                                    <div class="col-xs-3 col-sm-4 col-md-3 col-lg-3 weather-week thm-padding">
                                        <div class="list-group">
                                            <a href="#" class="list-group-item active">
                                                <i class="flaticon-cloudy"></i>
                                                <div>Tue, 34°F</div>
                                            </a>
                                            <a href="#" class="list-group-item">
                                                <i class="flaticon-sun"></i>
                                                <div>Wed, 38°F</div>
                                            </a>
                                            <a href="#" class="list-group-item">
                                                <i class="flaticon-cloud"></i>
                                                <div>thu, 32°F</div>
                                            </a>
                                            <a href="#" class="list-group-item">
                                                <i class="flaticon-rain"></i>
                                                <div>Fri, 31°F</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-xs-9 col-sm-8 col-md-9 col-lg-9 bhoechie-tab thm-padding">
                                        <!-- weather temperature -->
                                        <div class="weather-temp-wrap active">
                                            <div class="city-day">
                                                <div class="city">Dhaka</div>
                                                <div class="day">Tuesday, 8.00pm</div>
                                            </div>
                                            <div class="weather-icon">
                                                <i class="flaticon-cloudy"></i>
                                                <div class="main-temp">34°F</div>
                                            </div>
                                            <div class="break">
                                                <div class="wind-condition"> Wind: 13mph WSW</div>
                                                <div class="humidity">Humidity: 91%</div>
                                            </div>
                                        </div>
                                        <!-- weather temperature -->
                                        <div class="weather-temp-wrap">
                                            <div class="city-day">
                                                <div class="city">Dhaka</div>
                                                <div class="day">Wednesday, 8.00pm</div>
                                            </div>
                                            <div class="weather-icon">
                                                <i class="flaticon-sun"></i>
                                                <div class="main-temp">38°F</div>
                                            </div>
                                            <div class="break">
                                                <div class="wind-condition"> Wind: 11mph WSW</div>
                                                <div class="humidity">Humidity: 89%</div>
                                            </div>
                                        </div>
                                        <!-- weather temperature -->
                                        <div class="weather-temp-wrap">
                                            <div class="city-day">
                                                <div class="city">Dhaka</div>
                                                <div class="day">Wednesday, 8.00pm</div>
                                            </div>
                                            <div class="weather-icon">
                                                <i class="flaticon-cloud"></i>
                                                <div class="main-temp">32°F</div>
                                            </div>
                                            <div class="break">
                                                <div class="wind-condition"> Wind: 11mph WSW</div>
                                                <div class="humidity">Humidity: 89%</div>
                                            </div>
                                        </div>
                                        <!-- weather temperature -->
                                        <div class="weather-temp-wrap">
                                            <div class="city-day">
                                                <div class="city">Dhaka</div>
                                                <div class="day">Friday, 8.00pm</div>
                                            </div>
                                            <div class="weather-icon">
                                                <i class="flaticon-rain"></i>
                                                <div class="main-temp">31°F</div>
                                            </div>
                                            <div class="break">
                                                <div class="wind-condition"> Wind: 16mph WSW</div>
                                                <div class="humidity">Humidity: 93%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END OF /. WEATHER -->
                            <!-- START SOCIAL ICON -->
                            <div class="social-media-inner">
                                <ul class="social-media clearfix">
                                    <li>
                                        <a href="#" class="rss">
                                            <i class="fas fa-rss"></i>
                                            <div>2,035</div>
                                            <p>Subscribers</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="fb">
                                            <i class="fab fa-facebook-f"></i>
                                            <div>3,794</div>
                                            <p>Fans</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="insta">
                                            <i class="fab fa-instagram"></i>
                                            <div>941</div>
                                            <p>Followers</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="you_tube">
                                            <i class="fab fa-youtube"></i>
                                            <div>7,820</div>
                                            <p>Subscribers</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter">
                                            <i class="fab fa-twitter"></i>
                                            <div>1,562</div>
                                            <p>Followers</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="pint">
                                            <i class="fab fa-pinterest-p"></i>
                                            <div>1,310</div>
                                            <p>Followers</p>
                                        </a>
                                    </li>
                                </ul> <!-- /.social icon -->
                            </div>
                            <!-- END OF /. SOCIAL ICON -->
                            <!-- START ADVERTISEMENT -->
                            <div class="add-inner">
                                <img src="{% static 'assets/images/add320x270-1.jpg' %}" class="img-responsive" alt="">
                            </div>
                            <!-- END OF /. ADVERTISEMENT -->
                            <!-- START NAV TABS -->
                            <div class="tabs-wrapper">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Top Articles</a></li>
                                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Article populaire</a></li>
                                </ul>
                                <!-- Tab panels one -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="home">

                                        <div class="most-viewed">
                                            <ul id="most-today" class="content tabs-content">
                                                {% for this in sidePostPopular %}
                                                <li>
<!--                                                    <span class="count">{{ this.id }}</span>-->
                                                    <span class="text"><a href="#">{{ this.title }}</a></span></li>
                                               {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- Tab panels two -->
                                    <div role="tabpanel" class="tab-pane fade" id="profile">
                                        <div class="popular-news">
                                            {% for this_one in sideLastPost %}
                                            <div class="p-post">
                                                <h4><a href="{{ this_on.get_absolute_url }}">{{ this_one.title }}  </a></h4>
                                                <ul class="authar-info">
                                                    <li class="date"><a href="#"><i class="ti-timer"></i>{{ this_one.created_one | date:'d M Y' }}</a></li>
                                                    <li class="like"><a href="#"><i class="ti-eye"></i>{{ this_one.views }} vue(s)</a></li>
                                                </ul>
                                            </div>
                                            {% endfor %}

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END OF /. NAV TABS -->
                        </div>
                    </div>
                    <!-- END OF /. SIDE CONTENT -->
                </div>
            </div>

             <!-- START FEATURED NEWS -->
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="featured-inner">
                            <div id="featured-owl" class="owl-carousel">
                                {% for post in lastPost %}
                                <div class="item">
                                    <div class="featured-post">
                                        <a href="{{ post.get_absolute_url }}" class="news-image"><img src="{{ post.cover.url }}" alt="" class="img-responsive"></a>
<!--                                        <div class="reatting">-->
<!--                                            <i class="fa fa-star"></i>-->
<!--                                            <i class="fa fa-star"></i>-->
<!--                                            <i class="fa fa-star"></i>-->
<!--                                            <i class="fa fa-star-half-o"></i>-->
<!--                                            <i class="fa fa-star-o"></i>-->
<!--                                        </div>-->
                                        <div class="post-text">
                                            {% for cat in sliderItem.categories.all %}
                                            <span class="post-category">{{ cat.nom }}</span>
                                            {% endfor %}
                                            <h4>{{ post.title }}</h4>
                                            <ul class="authar-info">
                                                <li><i class="ti-timer"></i>{{ post.created_on | date:'d M Y' }}</li>
                                                <li class="like"><a href="#"><i class="ti-eye"></i>{{ post.views }} vue(s)</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END OF /. FEATURED NEWS -->
            <!-- START YOUTUBE VIDEO -->
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="youtube-wrapper">
                            <div class="playlist-title">
                                <h4>Nos Dernieres Videos</h4>
                            </div>
                            <div id="rypp-demo-1" class="RYPP r16-9"  data-ids="cIyVNoY3_L4,PQEX8QQ1fWg,3WWlhPmqXQI,kssD4L2NBw0,YcwrRA2BIlw,HMpmI2F2cMs,intentionally_erroneus">
                                <div class="RYPP-video">
                                    <div class="RYPP-video-player">
                                        <!-- Will be replaced -->
                                    </div>
                                </div>
                                <div class="RYPP-playlist">
                                    <header>
                                        <h2 class="_h1 RYPP-title">Playlist title</h2>
                                        <p class="RYPP-desc">Playlist subtitle <a href="#" target="_blank">#hashtag</a></p>
                                    </header>
                                    <div class="RYPP-items"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END OF /. YOUTUBE VIDEO -->
             <section class="articles-wrapper">
                <div class="container">
                    <div class="row row-m">
                        <div class="col-sm-8 main-content col-p">
                            <div class="theiaStickySidebar">
                                <!-- START POST CATEGORY STYLE FOUR (Latest articles ) -->
                                <div class="post-inner">
                                    <!--post header-->
                                    <div class="post-head">
                                        <h2 class="title"><strong>Articles</strong> Recents</h2>
                                    </div>
                                    <!-- post body -->
                                    <div class="post-body">
                                        {% for article in lastPosts %}
                                        <div class="news-list-item articles-list">
                                            <div class="img-wrapper">
                                                <a href="{{ article.get_absolute_url }}" class="thumb"><img src="{{ article.cover.url }}" alt="" class="img-responsive"></a>
                                            </div>
                                            <div class="post-info-2">
                                                <h4><a href="{{ article.get_absolute_url }}" class="title">{{ article.title }}</a></h4>
                                                <ul class="authar-info">
                                                    <li><i class="ti-timer"></i>{{ article.created_on | date:'d M Y' }}</li>
                                                    <li class="like"><a href="#"><i class="ti-eye"></i>{{ article.views }} vue(s)</a></li>
                                                </ul>
                                                <p class="hidden-sm">{{ article.body | truncatechars:30 }}</p>
                                            </div>
                                        </div>
                                        {% endfor %}

                                    </div> <!-- /. post body -->
                                    <!--Post footer-->

                                </div>
                                <!-- END OF /. POST CATEGORY STYLE FOUR (Latest articles ) -->
                            </div>
                        </div>
                        <div class="col-sm-4 rightSidebar col-p">
                            <div class="theiaStickySidebar">
                                <!-- START ARCHIVE -->
                                <div class="archive-wrapper">
                                    <div id="datepicker"></div>
                                </div>
                                <!-- END OF /. ARCHIVE -->
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <!-- *** END OF /. PAGE MAIN CONTENT *** -->
    {% endblock %}