{% extends 'components/website/layout.html' %}
{% load static %}

{% block content %} 
<div role="main" class="main" id="main">
    <section class="section bg-color-grey my-0 py-2 border-0">
        <div class="container container-custom container-custom-initial">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12">
                    <ul class="breadcrumb d-block d-flex justify-content-start align-items-center">
                        <li><a href="/">Home</a></li>
                        <li class="active">News & Events</li>   
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="section bg-color-light my-0 py-4 appear-animation border-0" data-appear-animation="fadeIn">
        <div class="container container-custom">
            <div class="col-md-12 order-1 order-md-2 text-center text-md-start appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
                <div class="row row-col-1 row-cols-sm-12">
                    <div class="col-sm-5">
                        <div class="tabs tabs-tertiary">
                            <ul class="nav nav-tabs nav-justified flex-column flex-md-row">
                                <li class="nav-item">
                                    <a class="nav-link active text-center font-weight-bold" href="#news" data-bs-toggle="tab" style="font-size: 16px;">News & Events</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="news" class="tab-pane active">
                                    <div class="scrollable-div">
                                        <ul class="list list-tertiary list-icons list-borders">
                                            
                                            {% if news %}
                                                {% for data in news %}
                                                    <li><i class="fas fa-check"></i>
                                                        {{ data.title }}
                                                            
                                                        <div class="d-flex justify-content-between">
                                                            <p class="m-0" style="font-size: 11px;">{{ data.event_date|date:"F d, Y" }}</p>
                                                            <form action="{% url 'news' %}" method="post">
                                                                {% csrf_token %}
                                                                <input type="hidden" name="id" value="{{ data.id }}">
                                                                <button type="submit" name="view" class="btn  btn-xs btn-primary btn-with-arrow m-0">view<span><i class="fas fa-chevron-right"></i></span></button>
                                                            </form>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            {% else %}
                                                <li><p class="py-0 m-0 text-3 text-color-secondary">No data available!</p></li>  
                                            {% endif %}

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <blockquote class="blockquote-tertiary with-borders">
                            
                            {% if  current_data %}
                                <p class="card-title mb-1 text-4 font-weight-bold text-color-dark">{{ current_data.title }}</p>
                                <div class="card-text d-flex gap-2">
                                    <p class="font-weight-bold text-color-dark m-0">Upload Date:</p>
                                    <p class="text-justify text-color-dark m-0">{{ current_data.event_date|date:"F d, Y" }}</p>
                                </div>
                                <div class="d-flex justify-content-start py-2">
                                    <img src="/media/news/{{ current_data.file_path }}" alt="Mahatma" style="border:0; height: 25vh; border-radius: 5px; max-width: 100%;">
                                </div>
                                <div class="card-text d-flex gap-2">
                                    <p class="text-justify text-color-dark m-0 mb-2"><span class="font-weight-bold text-color-dark m-0">Details:</span> {{ current_data.description }}</p>
                                </div>
                            {% endif %}
                                
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock content %}