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

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

<!-- <main class="main"> -->

    <div class="main-nav">
        <form method="get" action="{% url 'search' %}">
            <div class="search">
                <input value="{{ search_value }}" name='q' class="search-input" type="text" placeholder="Поиск...">
                <button class="search-button"></button>
            </div>
        </form>
    </div>

    <div class="FSL" id="FSL"> <!-- FSL==Facking Scroll List-->
        {% for announcement in announcements %}
        <div class="flex" id="flex{{ announcement.id }}">
            <p class="cap">{{ announcement.title }}</p>
            <button class="btn btn-dec"></button>
            <p class="text">{{ announcement.body }}</p>
            <div class="IB" id="IB"><!--сюды фотку-->

            </div>
            <ul class="dec-list">
                <li class="dec-item"><p class="text">{{ announcement.body }}</p></li>
            </ul>
        </div>
        {% endfor %}
        <!-- <button class="btn bold" type="submit" onclick=""></button>
            <button class="btn italic" type="submit" onclick=""></button>
            <button class="btn italic" type="submit" onclick=""></button>
            <button class="btn italic" type="submit" onclick=""></button> -->
    </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>
<!-- </main> -->
{% endblock content %}