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

{% block head %}
<link rel="stylesheet" href="{% static 'css/profile/profile.css' %}">
<title>{{ user.username }} - профиль</title>
{% if user.role == 'Администратор' %}
<style>
    .role-div {
        font-size: 25px;
    }
</style>
{% endif %}
{% endblock head %}


{% block content %}
<h1 class="h1">Профиль</h1>
<div class="main-div">
    <div>
        <section class="section main-info">
            <div class="role-div">
                {{user.role}}
            </div>
            <div class="content">
                <div class="avatar-image">
                    <img class="img" src="{{ user.avatar.url }}" alt="Аватарка пользователя">
                    <button class="pencil"></button>
                </div>
                {% if user.role == 'Ученик' %}
                <div class="list-div">
                    <div class="list-name">Группа</div>
                    <div class="list-p">{{ user.group }}</div>
                </div>
                {% endif %}
                <button class="btn exit"><a href="{% url 'logout' %}">Выйти</a></button>
            </div>
        </section>
    </div>
    <div>
        <section class="section-projects">
            <div class="projects now-project">
                <button class="btn btn-projects">Текущие проекты</button>
                <div class="btn-projects-icon"></div>
                <ul class="projects-list">
                    {% for project_pack in open_projects_packs %}
                    <li class="project-item">
                        <a class="project-name" href="{% url 'projects' %}?id={{project_pack.project.id}}">{{
                            project.name }}</a>
                        <span class="project-span">{{ project_pack.student_p_name }}</span>
                        <span class="project-span">{{ project_pack.project.student.group}} группа</span>
                    </li>
                    {% endfor %}
                    {% if user.role == 'Ученик' %}
                    {% for project_pack in request_projects_packs %}
                    <li class="project-item"> <!-- здесь надо подумать -->
                        <a href="{% url 'projects' %}?id={{project_pack.project.id}}">
                            <button class="btn project-name">{{ project_pack.project.name }}</button>
                        </a>
                        <span class="project-span new-project-span">Заявка на рассмотрении учителем</span>
                    </li>
                    {% endfor %}
                    <li class="project-item create-project">
                        <a href="{% url 'create' %}">
                            <span class="project-name create-project-span">Новый проект</span>
                        </a>
                        <svg width="15" height="15" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
                            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="#5A88FF"></path>
                        </svg>
                    </li>
                    {% endif %}
                </ul>
            </div>
            {% if user.role == 'Учитель' or user.role == 'Администратор' %}
            <div class="projects new-project">
                <div class="div-new-projects">
                    <button class="btn btn-projects btn-new-projects">Новые заявки на проект</button>
                    <div class="score-projects">{{ request_projects_length }}</div>
                </div>
                <div class="btn-projects-icon"></div>
                <ul class="projects-list">
                    {% for project_pack in request_projects_packs %}
                    <li class="project-item"> <!-- здесь надо подумать -->
                        <a href="{% url 'projects' %}?id={{project_pack.project.id}}">
                            <button class="btn project-name">{{ project_pack.project.name }}</button>
                        </a>
                        <span class="project-span">{{ project_pack. }}</span>
                        <span class="project-span">{{ user.group }} группа</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {%endif%}
            <div class="projects past-project">
                <button class="btn btn-projects">Завершенные проекты</button>
                <div class="btn-projects-icon"></div>
                <ul class="projects-list">
                    {% if close_projects_packs.length == null %}
                    <li class="project-item project-item-none">У вас ещё нет ни одного завершенного проекта🙁</li>
                    {% else %}
                    {% for project_pack in close_projects_packs %}
                    <li class="project-item">
                        <a href="{% url 'projects' %}?id={{project_pack.project.id}}">
                            <button class="btn project-name now-project-btn">{{ project_pack.project.name }}</button>
                        </a>
                        <span class="project-span">{{ project_pack.student_p_name }}</span>
                        <span class="project-span">{{ project_pack.project.student.group}} группа</span>
                        <span class="project-span">2049г</span>
                    </li>
                    {% endfor %}
                    {% endif %}
                </ul>
            </div>
        </section>
        <section class="section info">
            <form method="post">
                {% csrf_token %}
                <div class="div-input">
                    <span class="span">Фамилия</span>
                    <input class="input" type="text" value="{{ user.last_name }}" name="last_name_inp">
                </div>
                <div class="div-input">
                    <span class="span">Имя</span>
                    <input class="input" type="text" value="{{ user.first_name }}" name="first_name_inp">
                </div>
                <div class="div-input">
                    <span class="span">Отчетво</span>
                    <input class="input" type="text" value="{{ user.middle_name }}" name="middle_name_inp">
                </div>
                <div class="div-input">
                    <span class="span">Логин</span>
                    <input class="input" type="text" value="{{ user.username }}" name="username_inp">
                </div>
                <div class="div-input">
                    <span class="span">Эл. почта</span>
                    <input class="input" type="text" value="{{ user.email }}" name="email_inp">
                </div>
                <div class="line"></div>
                <div class="div-input">
                    <span class="span">Текущий пароль</span>
                    <input class="input" type="password" name="old_password">
                </div>
                <div class="div-input">
                    <span class="span">Новый пароль</span>
                    <input class="input" type="password" name="new_password">
                </div>
                <div class="div-input">
                    <span class="span">Повторите пароль</span>
                    <input class="input" type="password" name="repeat_password">
                </div>
                <input class="btn save" type="submit" value="Сохранить" name="submit_changes">
            </form>
        </section>
    </div>
</div>
<form class="new-avatar-div" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <h3 class="new-avatar-title">Загрузка новой фотографии</h3>
    <span class="new-avatar-disclaimer">Учитывайте тот факт, что фото будут видеть ВСЕ пользователи сайта!</span>
    <svg width="25" height="25" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="new-avatar-close">
        <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="#000000"></path>
    </svg>
    <div class="upload-zone">
        <div class="new-avatar"></div>
        <svg width="100" height="100" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M29.5833 22.9167L37.5 33.3334H12.5L18.75 25.2084L23.125 30.8334L29.1667 22.9167H29.5833ZM17.7083 22.9167C19.375 22.9167 20.8333 21.4584 20.8333 19.7917C20.8333 18.125 19.375 16.6667 17.7083 16.6667C16.0417 16.6667 14.5833 18.125 14.5833 19.7917C14.5833 21.4584 16.0417 22.9167 17.7083 22.9167ZM45.8333 12.5V37.5C45.8333 39.7917 43.9583 41.6667 41.6667 41.6667H8.33332C6.04166 41.6667 4.16666 39.7917 4.16666 37.5V12.5C4.16666 10.2084 6.04166 8.33337 8.33332 8.33337H41.6667C43.9583 8.33337 45.8333 10.2084 45.8333 12.5ZM41.6667 18.3334V12.5H8.33332V37.5H41.6667V18.3334Z"
                fill="#103A84" />
        </svg>
        <div class="photo">
            <input type="file" name="avatar_inp" id="file-input" multiple accept="image/png, image/gif, image/jpeg">
            <label for="file-input">Выберите файл</label>
            <span>или перетащите его сюда</span>
        </div>
    </div>
    <input type="submit" value="Загрузить" name="avatar_submit" class="btn new-avatar-btn" />
</form>

<div class="back-form"></div>
<script src="{% static 'js/global/list.js' %}"></script>
<script src="{% static 'js/profile/profile.js' %}"></script>
{% endblock content %}