{% extends 'base.html' %}
{% load static %}
{% load js %}
{% block head %}
<link rel="stylesheet" href="{%static 'css/projects/fl.css' %}">
<link rel="stylesheet" href="{%static 'select2/css/select2.min.css' %}">
<script type="text/javascript" src="{%static 'select2/js/select2.min.js' %}"></script>
<title>Подача заявки на проект</title>
{% endblock head %}

{% block content %}
<form class="form-create" action="{% url 'postcreate' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="formPZ">
        <h1 class="form h1">Подача заявки</h1>
        <div class="errors">
            {% for message in messages %}
            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
            <p class="error">{{ message }}</p>
            {% endif %}
            {% endfor %}
        </div>
        <div class="form">
            <h3 class="h3">Название*</h3>
            <input name="name" class="wf" required value='{%if name is not None%}{{name}}{%endif%}' />
        </div>
        <div class="form">
            <h3 class="h3">Описание*</h3>
            <textarea name="description" class="wf ta"
                required>{%if description is not None%}{{description}}{%endif%}</textarea>
        </div>
        <div class="form selects">
            <div class="tea">
                <h3 class="h3 tea">Учитель*</h3>
                <div>
                    <input type="text" class="search-block-input form-input search-block-teachers teacher-open"
                        placeholder="ФИО учителя">
                        <input type="text" class="new-teacher wf" placeholder="ФИО учителя" name="new-teacher">
                    <ul class="search-block-result-list"></ul>
                    <ul class="search-block-list"></ul>
                </div>
                <input type="hidden" class="search-block-hidden-input" required>
                <input type="hidden" name="teacher" class="search-block-for-teacher">
                <div class="checkbox">
                    <input type="checkbox" name="teacher-checkbox" id="teacher-checkbox" onclick="checkbox()">
                    <label for="teacher-checkbox" class="checkbox-label">Учитель не из лицея</label>
                </div>
            </div>
            <div class="subj">
                <h3 class="h3 subj">Предмет*</h3>
                <div>
                    <input type="text" class="search-block-input form-input search-block-subjects"
                        placeholder="Введите названние предметной области">
                    <ul class="search-block-result-list"></ul>
                    <ul class="search-block-list"></ul>
                </div>
                <input type="hidden" class="search-block-hidden-input" name="subject" required>
            </div>
        </div>
        <div class="form files">
            <input name="files" type="file" multiple="multiple" class="file-input" id="file-input" />
            <label for="file-input" class="file-label">Добавить файлы</label>
            <ul class="file-list"></ul>
        </div>
        <button class="but" type="submit">Подать заявку</button>
    </div>
</form>

<script src="{% static 'js/global/search_block.js' %}"></script>
<script>
    let teacher_arr = {{ teachers | js }}
    let teacher_name = [];

    for (let i = 0; i < teacher_arr.length; i++) {
        teacher_name.push(teacher_arr[i][0]);
    }

    $('.search-block-subjects').on('focus', function() {
        list_arr = {{ subjects_names | js }};
        max_item = 3;
        add_other_text = true;
    });

    $('.search-block-teachers').on('focus', function() {
        list_arr = teacher_name;
        max_item = 1;
        add_other_text = false;
    });

    $($('.search-block-result-list')[0]).on('click', function() {
        let input = $('.search-block-hidden-input')[0];
        teacher_id(input);
        teacher_del();
    });

    function teacher_del() {
        $($('.search-block-div')[0]).on('click', function() {
            let input = $('.search-block-hidden-input')[0];
            teacher_id(input);
        });
    }
</script>

<script src="{% static 'js/projects/create_page.js' %}"></script>
{% endblock content %}