{% extends "base.html" %}

{% block title %}Онлайн-курсы - Farabi Cours{% endblock %}

{% block content %}

    {% if upcoming_event %}
        <section
            class="relative p-6 rounded-lg mb-10 overflow-hidden"
            style="
                background-color: #f0f4ff; /* Fallback цвет */
                {% if upcoming_event.image %}
                background-image:
                    linear-gradient(to right,
                        rgba(240, 244, 255, 0.9) 0%,
                        rgba(240, 244, 255, 0.7) 40%,
                        rgba(240, 244, 255, 0.4) 70%,
                        transparent 100%
                    ),
                    url('{{ upcoming_event.image.url }}');
                background-size: cover;
                background-position: center;
                filter: blur(0px); /* Убираем blur тут, добавим его на псевдоэлемент или отдельный слой, если сильно нужно */
                transform: translateZ(0); /* Для оптимизации размытия */
                {% endif %}
            "
        >
            {% if upcoming_event.image %}
            <div class="absolute inset-0 z-0"
                style="
                    background-image: url('{{ upcoming_event.image.url }}');
                    background-size: cover;
                    background-position: center;
                    filter: blur(8px); /* Сильное размытие фона */
                    transform: scale(1.05); /* Немного увеличить, чтобы края не были видны после размытия */
                ">
            </div>
            <div class="absolute inset-0 z-10" style="background-image: linear-gradient(to right, rgba(240, 244, 255, 0.9) 0%, rgba(240, 244, 255, 0.7) 40%, rgba(240, 244, 255, 0.4) 70%, rgba(240, 244, 255, 0.1) 100%);"></div>
            {% endif %}

            <div class="relative z-20 flex flex-col sm:flex-row items-start sm:items-center justify-between">
                <div class="p-4 bg-white bg-opacity-80 rounded-lg backdrop-filter backdrop-blur-sm shadow-md sm:w-2/3 md:w-1/2 lg:w-2/5 xl:w-1/3">
                    <span class="text-sm font-semibold text-green-600 bg-green-100 px-3 py-1 rounded-full">Ближайшее мероприятие</span>
                    <h2 class="text-3xl font-bold text-gray-800 mt-2">{{ upcoming_event.title }}</h2>
                    <p class="text-xl text-gray-700 mt-1">{{ upcoming_event.description|truncatewords:15 }}</p>
                    <div class="mt-3 flex space-x-2">
                        <span class="text-sm text-gray-700 bg-gray-100 border border-gray-300 px-3 py-1 rounded-full">
                            {{ upcoming_event.event_date|date:"d M" }}
                        </span>
                        <span class="text-sm text-gray-700 bg-gray-100 border border-gray-300 px-3 py-1 rounded-full">
                            {{ upcoming_event.event_date|date:"H:i" }}
                        </span>
                    </div>
                </div>

                <a href="{{ upcoming_event.link }}" target="_blank" class="mt-6 sm:mt-0 bg-orange-500 text-white font-semibold px-6 py-3 rounded-lg hover:bg-orange-600 transition self-end sm:self-center">
                    Записаться &rarr;
                </a>
            </div>
        </section>
    {% endif %}

    {% endblock %}