{% extends 'base.html' %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/dec/dec.css' %}">
<title>Объявления</title>
{% endblock head %}
{% block content %}

    <div class="main-nav">
        <form method="get" action="{% url 'search' %}" class="search-form">
            <div class="search">
                <input value="{{ search_value }}" name="q" class="search-input" type="text" placeholder="Поиск...">
                <button class="search-button"></button>
            </div>
            {% comment %} {% if user.role == administrator or user.role == teacher %} {% endcomment %}
                <a href="{% url 'redactor' %}" class="create-link">
                    <span>Создать объявление</span>
                    <svg width="20" height="20" viewBox="0 0 200 200" style="transform: rotate(45deg)">
                        <path d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z" fill="#FFFFFF"></path>
                    </svg>
              </a>
            {% comment %} {% endif %} {% endcomment %}
        </form>
    </div>

    <div class="content" id="FSL"> <!-- FSL==Facking Scroll List-->
        {% for announcement in page_announcements %}
        <div class="announ">
            <div class="announ-content" id="{{ announcement.id }}">
                <div class="top-info">
                    <div class="top-info-text">
                        {% if announcement.updated_at == announcement.created_at %}
                        <span class="date">c <span class="date-start">{{ announcement.created_at }}</span> до <span class="date-end">{{ announcement.date_of_expiring }}</span></span>
                        {% else %}
                        <span class="change">изм.</span>
                        <span class="date">c <span class="date-start">{{ announcement.updated_at }}</span> до <span class="date-end">{{ announcement.date_of_expiring }}</span></span>
                        {% endif %}
                    </div>
                    <div style="display: flex; column-gap: 15px;">
                        <button class="favourite-btn" title="Закрепить">
                            {% if announcement.is_pinned %}
                            <svg class="favourite-svg" width="18" height="18" viewBox="0 0 18 18" fill="#E4CE02">
                                <path d="M17.6844 6.825C17.615 6.61154 17.4877 6.4215 17.3168 6.27597C17.1459 6.13045 16.9381 6.03514 16.7163 6.00063L12.1481 5.31625L10.0919 0.95125C9.8875 0.51875 9.46938 0.25 9 0.25C8.53063 0.25 8.1125 0.51875 7.90813 0.95125L5.88188 5.30063L1.28375 6.00063C0.833755 6.06938 0.46313 6.385 0.31563 6.825C0.241171 7.04419 0.228913 7.27972 0.280215 7.50545C0.331518 7.73118 0.444374 7.93828 0.606255 8.10375L3.93188 11.5075L3.14625 16.305C3.10629 16.5361 3.1327 16.7739 3.22242 16.9906C3.31214 17.2073 3.46149 17.3941 3.65313 17.5294C3.83519 17.6597 4.05052 17.7355 4.27404 17.7482C4.49756 17.7608 4.72007 17.7096 4.91563 17.6006L8.97125 15.3356L13.0844 17.6006C13.28 17.7094 13.5025 17.7604 13.7259 17.7478C13.9494 17.7352 14.1647 17.6595 14.3469 17.5294C14.5386 17.3942 14.6881 17.2074 14.7778 16.9907C14.8675 16.7739 14.8939 16.5361 14.8538 16.305L14.0669 11.5013L17.3938 8.10375C17.5556 7.93828 17.6685 7.73118 17.7198 7.50545C17.7711 7.27972 17.7588 7.04419 17.6844 6.825Z" fill="inherit"/>
                            </svg>
                            {% else %}
                            <svg class="favourite-svg" width="18" height="18" viewBox="0 0 18 18" fill="inherit">
                                <path d="M17.6844 6.825C17.615 6.61154 17.4877 6.4215 17.3168 6.27597C17.1459 6.13045 16.9381 6.03514 16.7163 6.00063L12.1481 5.31625L10.0919 0.95125C9.8875 0.51875 9.46938 0.25 9 0.25C8.53063 0.25 8.1125 0.51875 7.90813 0.95125L5.88188 5.30063L1.28375 6.00063C0.833755 6.06938 0.46313 6.385 0.31563 6.825C0.241171 7.04419 0.228913 7.27972 0.280215 7.50545C0.331518 7.73118 0.444374 7.93828 0.606255 8.10375L3.93188 11.5075L3.14625 16.305C3.10629 16.5361 3.1327 16.7739 3.22242 16.9906C3.31214 17.2073 3.46149 17.3941 3.65313 17.5294C3.83519 17.6597 4.05052 17.7355 4.27404 17.7482C4.49756 17.7608 4.72007 17.7096 4.91563 17.6006L8.97125 15.3356L13.0844 17.6006C13.28 17.7094 13.5025 17.7604 13.7259 17.7478C13.9494 17.7352 14.1647 17.6595 14.3469 17.5294C14.5386 17.3942 14.6881 17.2074 14.7778 16.9907C14.8675 16.7739 14.8939 16.5361 14.8538 16.305L14.0669 11.5013L17.3938 8.10375C17.5556 7.93828 17.6685 7.73118 17.7198 7.50545C17.7711 7.27972 17.7588 7.04419 17.6844 6.825Z" fill="inherit"/>
                            </svg>
                            {% endif %}
                        </button>
    
                        {% if announcement.author == user.username or user.role == 'Администратор' %}
                        <a href="{% url 'delete' announcement.id %}" class="delete-btn" title="Удалить объявление">
                            <svg viewBox="0 0 200 200" width="22px" height="22px"><path d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z" fill="#f05454"></path></svg>
                        </a>
                        {% endif %}
                    </div>

                </div>
                <div class="middle-info">
                    <h2 class="announ-title">{{ announcement.title }}</h2>
                    <a href="{% url 'redactor' %}/{{ announcement.id }}">
                        <svg height="20px" version="1.1" viewBox="0 0 18 18" width="20px">
                            <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                                <g fill="#103A84" transform="translate(-213.000000, -129.000000)">
                                    <g transform="translate(213.000000, 129.000000)">
                                        <path
                                            d="M0,14.2 L0,18 L3.8,18 L14.8,6.9 L11,3.1 L0,14.2 L0,14.2 Z M17.7,4 C18.1,3.6 18.1,3 17.7,2.6 L15.4,0.3 C15,-0.1 14.4,-0.1 14,0.3 L12.2,2.1 L16,5.9 L17.7,4 L17.7,4 Z"
                                            id="Shape" />
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
                <p class="announ-descr">{{ announcement.body }}</p>
                <button class="announ-btn">Подробнее</button>
                <div class="announ-bottom">
                    <div>
                        <a href="#" class="announ-author">{{ announcement.author }}</a>
                    </div>
                    {% load split_filter %}
                    <ul class="announ-files-list">
                        {% for file in announcement.files.all %}
                        <li class="announ-files-item">
                            <a href="{{ file.file.url }}" class="announ-files-link">{{ file.file.url|split }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
             <div class="announ-img" style="background-image: {{ announcement.image_url }}"></div>
        </div>
        {% endfor %}
    </div>
    <script>
        $('.btn-dec').on('click', function () {
            let ul = this.parentNode.childNodes[3];
            if ($(ul).hasClass('ul-open')) {
                $(ul).removeClass('ul-open');
            } else {
                $(ul).addClass('ul-open');
            }
        });
    </script>


<!-- Кнопка для подгрузки новых объявлений, если их будет больше 20 (Надо сделать красивой) -->
<button id="load-more-button" class="load-btn">Загрузить ещё</button>

<!-- Почти весь скрипт ниже сделан с помощью ChatGPT потому что я не шарю в джаваскрипте, поправьте если плохо -->
<!-- Все что он делает - реализует функционал страничек объявлений, добавляя кнопку на подгрузку объявлений, если их будет слишком много. По идее можно ничего не трогать, все работает -->

<script>
    $(document).ready(function() {
        var page = 2;  // Start from page 2 since page 1 is already loaded
        var totalAnnouncements = {{ count }};

        function checkLoadMoreButtonVisibility() {
            var loadedAnnouncements = $('.announ').length;
            if (loadedAnnouncements >= totalAnnouncements) {
                $("#load-more-button").hide();
            } else {
                $("#load-more-button").show();
            }
        }

        checkLoadMoreButtonVisibility();  // Initially check button visibility

        $("#load-more-button").click(function() {
            var query = encodeURIComponent('{{ search_value }}');
            $.get('?q=' + query + '&page=' + page, function(data) {
                var newAnnouncements = $(data).find('.announ');
                if (newAnnouncements.length > 0) {
                    $("#FSL").append(newAnnouncements);
                    page++;
                    checkLoadMoreButtonVisibility();  // Check and update button visibility
                } else {
                    $("#load-more-button").hide();
                }
            });
        });

        let descr = $('.announ-descr');

        for (let i = 0; i < descr.length; i++) {
            if (descr[i].offsetHeight > 250) {
                $($('.announ-btn')[i]).addClass('announ-btn-active');
                $(descr[i]).addClass('announ-descr-close');
            }
        }

        $('.announ-btn').on('click', function() {
            descr = this.parentNode.childNodes[5];
            if ($(descr).hasClass('announ-descr-close')) {
                $(descr).removeClass('announ-descr-close');
                $(descr).addClass('announ-descr-open');
                $(this).html('Скрыть');
            } else if ($(descr).hasClass('announ-descr-open')) {
                $(descr).removeClass('announ-descr-open');
                $(descr).addClass('announ-descr-close');
                $(this).html('Подробнее');
            }
        });
    });
</script>

{% endblock content %}