{% extends "base.html" %}
{% load url %}
{% load static %}
{% load humanize %}
{% load cache %}

{% cache 600 homepage %}
    {% block content %}
        {% if news_caroussel_items %}
            <div class="container mb-5 p-0">
                <div class="carousel slide" id="carouselIndicators" data-ride="carousel" data-interval="10000">
                    <div class="carousel-inner m-0 px-0">
                        {% for item in news_caroussel_items %}
                            <div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}">
                                <div class="d-md-flex justify-content-center align-items-center">
                                    <div class="col-12 col-md-3 p-0 my-3 d-md-flex w-100 justify-content-center align-items-center text-center">
                                        <a href="{{ item.get_absolute_url }}"><img class="rounded carousel-img m-auto mh-100 mw-100 border-0"
                                             src="{{ item.logo.x20.url }}"
                                             srcset="{{ item.logo.x10.url }} 1x,
                                                     {{ item.logo.x15.url }} 1.5x,
                                                      {{ item.logo.x20.url }} 2x"
                                             alt="{{ item.title }}" loading="lazy"></a>
                                    </div>
                                    <div class="col-12 col-md-7 text-primary text-truncate-container">
                                        <a class="stretched-link text-decoration-none text-primary"
                                           href="{{ item.get_absolute_url }}">
                                            <h4 class="p-3">{{ item.title }}</h4>
                                            <p class="pl-3 text-left">{{ item.description }}</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <ol class="carousel-indicators position-relative">
                        {% for item in news_caroussel_items %}
                            <li class="mx-1 mb-sm-0 mt-sm-3 bg-primary position-relative {% if forloop.counter == 1 %}active{% endif %}" data-target="#carouselIndicators"
                                data-slide-to="{{ forloop.counter0 }}">
                            </li>
                        {% endfor %}
                    </ol>
                    <a class="carousel-control-prev mr-3 text-dark d-none d-sm-none d-md-inline-flex" href="#carouselIndicators"
                       role="button" data-slide="prev">
                        <i class="fas fa-angle-left fa-2x"></i>
                    </a>
                    <a class="carousel-control-next ml-3 text-dark d-none d-sm-none d-md-inline-flex" href="#carouselIndicators"
                       role="button" data-slide="next">
                        <i class="fas fa-angle-right fa-2x"></i>
                    </a>
                </div>
            </div>
        {% endif %}

        {% if highlighted_challenges %}
            <div class="row mb-3 mt-5 pt-3 px-3">
                <div class="col-12 col-lg-6 col-md-5 col-sm-4 d-inline text-radboud text-primary mb-3">
                    <i class="fa fa-trophy fa-2x align-middle"></i>
                    <span class="align-middle">&nbsp;&nbsp;FEATURED CHALLENGES</span>
                </div>
                <div class="col-12 col-lg-6 col-md-7 col-sm-8 mb-2 pr-0">
                    <div class="d-flex justify-content-end">
                        <a class="btn btn-md btn-primary mr-3"
                           href="{% url 'challenges:list' %}">Participate in a challenge</a>
                        <a class="btn btn-md btn-outline-primary"
                           href="{% url 'challenges:requests-create' %}">Organize your own challenge</a>
                    </div>
                </div>
            </div>

            {% include "grandchallenge/partials/cards.html" with page_obj=highlighted_challenges %}
        {% endif %}

        {% if highlighted_algorithms %}
            <div class="row mb-3 mt-5 px-3">
                <div class="col-12 col-lg-6 col-md-5 col-sm-4 d-inline text-radboud text-primary mb-3">
                    <i class="fa fa-code fa-2x align-middle"></i>
                    <span class="align-middle">&nbsp;&nbsp;FEATURED ALGORITHMS</span>
                </div>
                <div class="col-12 col-lg-6 col-md-7 col-sm-8 mb-2 pr-0">
                    <div class="d-flex justify-content-end">
                        <a class="btn btn-md btn-primary mr-3"
                           href="{% url 'algorithms:list' %}">Try out an algorithm</a>
                        <a class="btn btn-md btn-outline-primary"
                           href="{% url 'algorithms:create' %}">Host your own algorithm</a>
                    </div>
                </div>
            </div>

            {% include "grandchallenge/partials/cards.html" with page_obj=highlighted_algorithms %}
        {% endif %}

        <div class="container p-0 mt-5">
            <h3 class="text-primary text-center mb-4">Features</h3>
            <div class="container p-0">
                <div class="row align-items-center">
                    {% for highlight in highlights %}
                        <div class="col-lg-6">
                            <div class="row {% if not forloop.counter0|divisibleby:2 %} flex-sm-row-reverse {% endif %} align-items-center">
                                <div class="col-md-6 my-3">
                                    <a class="text-radboud" href="{{ highlight.url }}"><h4>{{ highlight.title }}</h4></a>
                                    <ul class="pl-3">
                                        {% for point in highlight.bullet_points %}
                                            <li class="my-1">{{ point }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="col-md-6 my-3">
                                    <a href="{{ highlight.url }}"><img src="{% static highlight.image %}"
                                                                       class="img-fluid w-100 box-shadow"
                                                                       loading="lazy"
                                                                       alt="{{ highlight.url_title }} Image"></a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% include "grandchallenge/partials/cards_info_modal.html" %}
    {% endblock %}
{% endcache %}

{% block script %}
    {{ block.super }}
    <script src="{% static "js/cards_info_modal.js" %}"></script>
{% endblock %}