{% extends "myapp/partials/layout.html" %}
{% load static %}
{% block title %}Home{% endblock title %}

{% block content %}
{% comment %} Slider {% endcomment %}
<section class="container">
    <div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-indicators">
            {% for slider in sliders %}
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="{{forloop.counter0}}" class="{% if forloop.first %} active {% endif %}" aria-current="{% if forloop.first %} true {% endif %}"></button>
            {% endfor %}
        </div>
        <div class="carousel-inner">
            {% for slider in sliders %}
                <div class="carousel-item {% if forloop.first %} active {% endif %}">
                    <img src="{{slider.image.url}}" class="d-block w-100">
                    {% if slider.title %}
                    <div class="carousel-caption d-none d-md-block">
                        <h5 class="mb-2">{{slider.title}}</h5>
                        {% if slider.link %}
                        <a href="{{slider.link}}" class="btn btn-primary mb-3">Learn More</a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

{% comment %}Blogs{% endcomment %}
<section class="container py-5"> 
    <h1 class="section-title">Blogs</h1>
    <div id="blog-slider">
        {% for blog in blogs %}
        <div class="p-2">
            {% include "myapp/partials/item_blog.html" %}
        </div>
        {% endfor %}
    </div>
</section>

{% comment %}Submit blog{% endcomment %}
<div class="container">
    <div class="rounded-3 p-3 blog-container">
        <div class="row">
            <div class="col-md-8 text-white">
                <h1>Submit Blog</h1>
                <h5>Share your thoughts and knowledge with the world</h5>
            </div>
            <div class="col-md-4 align-self-center text-center">
                <a href="{% url "add-blog" %}" class="btn blog-button">Submit Blog</a>
            </div>
        </div>
    </div>
</div>

{% comment %}Voice of south asia{% endcomment %}
<section class="container py-5"> 
    <h1 class="section-title">Voice of South Asia</h1>
    <div id="voice-slider">
        {% for blog in highlights.blogs %}
        <div class="p-2">
            {% include "myapp/partials/item_blog.html" %}
        </div>
        {% endfor %}
        {% for publication in highlights.publications %}
        <div class="p-2">
            {% include "myapp/partials/item_publication.html" %}
        </div>
        {% endfor %}
    </div>
</section>

{% comment %}Videos{% endcomment %}
<section class="container py-5"> 
    <h1 class="section-title">Videos</h1>
    <div class="row">
        {% for video in videos %}
            {% include "myapp/partials/item_video.html" %}
        {% endfor %}
    </div>
</section>

{% comment %}Km{% endcomment %}
<div class="container">
    <div class="rounded-3 p-3 km-container">
        <div class="row py-3">
            <div class="col-12 col-md-8 text-white">
                <div class="km-container-overlay rounded-3 p-3 ms-5">
                    <h1>Kamla Bhasin</h1>
                    <p>
                        Kamla Bhasin was an Indian developmental feminist activist,  poet, author and social scientist. Bhasin's work, that began in 1970,  focused on gender education, human development and the media. She lived  in New Delhi, India.
                    </p>
                    <a href="{% url "tribute" %}" class="btn km-button">Know More...</a>
                </div>
            </div>
            <div class="col-12 col-md-4 align-self-center text-center text-md-start mt-3 mt-md-0">
                <img src="{% static 'images/home_km.webp' %}" class="img-fluid">
            </div>
        </div>
    </div>
</div>

{% comment %}Publications{% endcomment %}
<section class="container py-5"> 
    <h1 class="section-title">Publications</h1>
    <div class="row">
        {% for language in languages %}
            {% include "myapp/partials/item_language.html" %}
        {% endfor %}
    </div>
</section>
{% endblock content %}

{% block scripts %}
<script>
    var slickConfig = {
        dots: false,
        arrows: true,
        slidesToShow: 5,
        slidesToScroll: 5,
        autoplay: true,
        autoplaySpeed: 3000,
        prevArrow: '<button class="slide-arrow prev-arrow"></button>',
        nextArrow: '<button class="slide-arrow next-arrow"></button>',
        pauseOnHover: true,
        pauseOnFocus: false,
        swipe: true,
        swipeToSlide: true,
        touchThreshold: 100,
        responsive: [
            {
                breakpoint: 1430,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 1215,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 800,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
        ]
    };

    $(document).ready(function(){
        $('#blog-slider').slick(slickConfig);
        $('#voice-slider').slick(slickConfig);
    });
</script>
{% endblock scripts %}