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

{% block head %}
<link rel="stylesheet" href="{% static 'css/theme_list/theme_list.css' %}">
<title>Список тем</title>
{% endblock head %}

{% block content %}

<div class="filters">
    <form class="container" method="POST" action="{% url 'search_results_view' %}">
        {% csrf_token %}
        <div class="left">
            <div class="search">
                <input class="search-input" type="text" placeholder="Поиск..." name="search_input">
                <button class="search-button"></button>
            </div>
            <div class="checkboxes">
                <div class="div-list">
                    <div class="list-name">Предмет</div>
                    <input type="hidden" id="subject-filter" name="subject" />
                    <div class="list-names">
                        <div class="list-p">Не указано</div>
                        <ul class="list" name="subject">
                            <li class="list-li">Не указано</li>
                            {% for subject in subjects %}
                            <li class="list-li">{{subject.name}}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div>
                    <input type="checkbox" id="open" class="checkbox" name="open">
                    <label class="checkbox-name" for="open">Свободно</label>
                </div>
                <div>
                    <input type="checkbox" id="close" class="checkbox" name="close">
                    <label class="checkbox-name" for="close">Занято</label>
                </div>
                <div>
                    <input type="checkbox" id="past_year" class="checkbox" name="past_year">
                    <label class="checkbox-name" for="past_year">Прошлых лет</label>
                </div>
            </div>
        </div>
        <div class="right">
            <button class="btn filter_btn" type="submit">Применить</button>
        </div>
    </form>
</div>

<div class="themes">
    <button class="btn new-theme" onclick="new_theme_open()">
        Новая тема
        <svg class="new-theme-plus" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <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="inherit"></path>
        </svg>
    </button>
    {% for theme in themes %}
    <div class="theme-block theme-block-close"
        style="background: linear-gradient(248deg, rgb({{theme.subject_color}}) 44%, rgba({{theme.subject_color}}, 0.9) 98%);"
        id="{{theme.id}}">
        <h2 class="theme-block-title">{{ theme.subjects }}</h2>
        <div class="descr">
            <h2 class="theme-name theme-name-close">{{ theme.name }}</h2>
            <p class="theme-descr theme-descr-close">
                {{ theme.descript }}
            </p>
            <button class="theme-btn">Подробнее</button>
            <div class="info">
                <a class="info-link" href="#" title="Автор темы">{{ theme.author }}</a>
                <span class="tag {{theme.class_of_tag}}">{{ theme.status }}</span>
            </div>
            <button class="theme-btn-take" ,
                onclick="window.location = '{% url 'use_theme' %}?theme_id={{theme.id}}'">Взять проект</button>
        </div>
        <button class="edit">
            <svg height="18px" version="1.1" viewBox="0 0 18 18" width="18px" xmlns="http://www.w3.org/2000/svg"
                xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                    <g fill="#000000" id="Core" transform="translate(-213.000000, -129.000000)">
                        <g id="create" 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>

        </button>
    </div>
    {% endfor %}

    <form method="POST" class="new-theme-form" action="{% url 'new_theme_create' %}">
        <input type="hidden" name="theme_id" value="0" class="theme-id">
        {% csrf_token %}
        <h2 class="new-theme-title">Создание новой темы</h2>
        <div class="new-theme-inputs">
            <input type="text" class="new-theme-input form-input" name="name_input" placeholder="Название темы"
                required />
            <textarea class="new-theme-textarea form-input" name="descript_input" placeholder="Описание темы"
                required></textarea>
            <div class="new-theme-subjects">
                <input type="text" class="new-theme-subjects-input form-input"
                    placeholder="Введите названние предметной области" id="theme_subject">
                <ul class="search-result-list"></ul>
                <ul class="new-theme-subjects-list"></ul>
            </div>
            <input type="hidden" class="subject-input" name="subjects_input" required>
        </div>
        <input type="hidden" value="{{user}}" name="author_input">
        <div class="new-theme-btns">
            <button class="btn new-theme-exit" onclick="new_theme_exit()" type="button">Отмена</button>
            <button class="btn new-theme-create" type="submit">Создать</button>
        </div>
    </form>

    <div class="back-form"></div>

    <script src="{% static 'js/global/list.js' %}"></script>
    <script src="{% static 'js/theme_list/theme_list.js' %}"></script>

    {% endblock content %}