{% load static %}
{% include 'blog/general/header.html' %}
<link href="{% static 'css/index.css' %}" rel="stylesheet">

<div class="container">
    <div class="big">
        <!--LATEST-->
        {% if posts %}
        <div class="latest">
            {% for post in posts %}
            {% if post.pk == first %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="cover" style="background: url(/media/{{ post.image }});">
                    <div class="tex-sec">
                        <div class="cov_title">
                            <p class="title_div">{{ post }}</p>
                        </div>
                        <span class="cat">LATEST STORY</span>
                        <span class="tit_time">{{ post.date_created|timesince }} ago.</span>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}

            {% if le_lent > 1 %}
            <div class="child_con">
                <h2 style="color: white;">LATEST POSTS</h2>
            {% for post in posts %}
            {% if post.pk != first %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="children_con">
                    <div class="image">
                        <img class="imgg" src="/media/{{ post.image }}">
                    </div>
                    <div class="title_divv">
                        <span style="color: #82181a; border-radius: 9px; border: solid #82181a 1px; padding: 3px;">{{ post.category }}</span>
                        <span class="s_time">{{ post.date_created|timesince }} ago.</span>
                        <h5 style="color: #82181a;">{{ post.title|truncatewords:13 }}</h5>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        <!--LATEST END-->
        

        <!--TRENDING-->
        {% if trending %}
        <div class="latest">
            {% for post in trending %}
            {% if post.pk == ftrend %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="cover" style="background: url(/media/{{ post.image }});">
                    <div class="tex-sec">
                        <div class="cov_title">
                            <p class="title_div">{{ post }}</p>
                        </div>
                        <span class="cat">TRENDING</span>
                        <span class="tit_time">{{ post.date_created|timesince }} ago.</span>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}

            {% if tr_lent > 1 %}
            <div class="child_con">
                <h2 style="color: white;">TRENDING POSTS</h2>
            {% for post in trending %}
            {% if post.pk != ftrend %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="children_con">
                    <div class="image">
                        <img class="imgg" src="/media/{{ post.image }}">
                    </div>
                    <div class="title_divv">
                        <span style="color: #82181a; border-radius: 9px; border: solid #82181a 1px; padding: 3px;">{{ post.category }}</span>
                        <span class="s_time">{{ post.date_created|timesince }} ago.</span>
                        <h5 style="color: #82181a;">{{ post.title|truncatewords:13 }}</h5>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        <!--TRENDING END-->

        <!--ENTERTAINMENT-->
        {% if entertainment %}
        <div class="latest">
            {% for post in entertainment %}
            {% if post.pk == fentertainment %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="cover" style="background: url(/media/{{ post.image }});">
                    <div class="tex-sec">
                        <div class="cov_title">
                            <p class="title_div">{{ post }}</p>
                        </div>
                        <span class="cat">ENTERTAINMENT</span>
                        <span class="tit_time">{{ post.date_created|timesince }} ago.</span>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}

            {% if en_lent > 1 %}
            <div class="child_con">
                <h2 style="color: white;">ENTERTAINMENT</h2>
            {% for post in entertainment %}
            {% if post.pk != fentertainment %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="children_con">
                    <div class="image">
                        <img class="imgg" src="/media/{{ post.image }}">
                    </div>
                    <div class="title_divv">
                        <span style="color: #82181a; border-radius: 9px; border: solid #82181a 1px; padding: 3px;">{{ post.category }}</span>
                        <span class="s_time">{{ post.date_created|timesince }} ago.</span>
                        <h5 style="color: #82181a;">{{ post.title|truncatewords:13 }}</h5>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        <!--ENTERTAINMENT END-->

        <!--NEWS-->
        {% if news %}
        <div class="latest">
            {% for post in news %}
            {% if post.pk == fnews %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="cover" style="background: url(/media/{{ post.image }});">
                    <div class="tex-sec">
                        <div class="cov_title">
                            <p class="title_div">{{ post }}</p>
                        </div>
                        <span class="cat">NEWS</span>
                        <span class="tit_time">{{ post.date_created|timesince }} ago.</span>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}

            {% if new_lent > 1 %}
            <div class="child_con">
                <h2 style="color: white;">NEWS</h2>
            {% for post in news %}
            {% if post.pk != fnews %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="children_con">
                    <div class="image">
                        <img class="imgg" src="/media/{{ post.image }}">
                    </div>
                    <div class="title_divv">
                        <span style="color: #82181a; border-radius: 9px; border: solid #82181a 1px; padding: 3px;">{{ post.category }}</span>
                        <span class="s_time">{{ post.date_created|timesince }} ago.</span>
                        <h5 style="color: #82181a;">{{ post.title|truncatewords:13 }}</h5>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        <!--NEWS END-->

        <!--SPORT-->
        {% if sport %}
        <div class="latest">
            {% for post in sport %}
            {% if post.pk == fsport %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="cover" style="background: url(/media/{{ post.image }});">
                    <div class="tex-sec">
                        <div class="cov_title">
                            <p class="title_div">{{ post }}</p>
                        </div>
                        <span class="cat">SPORT</span>
                        <span class="tit_time">{{ post.date_created|timesince }} ago.</span>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}

            {% if sp_lent > 1 %}
            <div class="child_con">
                <h2 style="color: white;">SPORT</h2>
            {% for post in sport %}
            {% if post.pk != fsport %}
            <a href="/blog/details/?pk={{ post.pk }}">
                <div class="children_con">
                    <div class="image">
                        <img class="imgg" src="/media/{{ post.image }}">
                    </div>
                    <div class="title_divv">
                        <span style="color: #82181a; border-radius: 9px; border: solid #82181a 1px; padding: 3px;">{{ post.category }}</span>
                        <span class="s_time">{{ post.date_created|timesince }} ago.</span>
                        <h5 style="color: #82181a;">{{ post.title|truncatewords:13 }}</h5>
                    </div>
                </div>
            </a>
            {% endif %}
            {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        <!--SPORT END-->
    </div>
    <div class="small">
        <div class="trending"><h2>YOU MAY LIKE</h2></div>
        {% for post in may_like %}
        <a href="/blog/details/?pk={{ post.pk }}">
        <div class="case">
            <img class="m_img" src="/media/{{ post.image }}">
            <span class="tit_small"><span style="text-transform: uppercase;">{{ post.category }}</span> / {{ post.date_created|timesince }} ago.</span>
            <h3 style="color: black">{{ post|truncatewords:13 }}</h3>
        </div>
        </a>
        {% endfor %}
    </div>
</div>


{% include 'blog/general/footer.html' %}