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

{% block head %}
<link rel="stylesheet" href="{% static 'css/admin_menu/admin.css' %}">
{% if user.role == "Администратор" %}
<title>Администрирование</title>
{% else %}
<title>Who?</title>
{% endif %}
{% endblock head %}

{% block content %}
{% if user.role == "Администратор" %}
<div class="main-nav">
    <div class="top-nav">
        <form class="search" method="POST">
            {% csrf_token %}
            {% if name_have %}
            <input class="search-input" type="text" placeholder="Поиск..." name="search_names"
                value="{{ name }}">
            {% else %}
            <input class="search-input" type="text" placeholder="Поиск..." name="search_names">
            {% endif %}
            <input class="search-button" type="submit" name="search_butt">
        </form>
        <button class="btn btn-token" onclick="token_open()">Создать токены</button>
    </div>
    <form class="filter" method="POST">
        {% csrf_token %}
        <div class="div-list">
            <p class="list-name">Группа:</p>
            <div class="list-names">
                {% if group_have %}
                <p class="list-p" id="filter-group">{{ group }}</p>
                {% else %}
                <p class="list-p" id="filter-group">Не указано</p>
                {% endif %}
                <ul class="list">
                    <li class="list-li">Не указано</li>
                    <li class="list-li">1</li>
                    <li class="list-li">2</li>
                    <li class="list-li">3</li>
                    <li class="list-li">4</li>
                    <li class="list-li">5</li>
                    <li class="list-li">6</li>
                    <li class="list-li">7</li>
                    <li class="list-li">10</li>
                    <li class="list-li">11</li>
                    <li class="list-li">12</li>
                    <li class="list-li">13</li>
                    <li class="list-li">14</li>
                    <li class="list-li">15</li>
                    <li class="list-li">16</li>
                    <li class="list-li">17</li>
                    <li class="list-li">20</li>
                    <li class="list-li">21</li>
                    <li class="list-li">22</li>
                    <li class="list-li">23</li>
                    <li class="list-li">24</li>
                    <li class="list-li">25</li>
                    <li class="list-li">26</li>
                    <li class="list-li">27</li>
                </ul>
            </div>
        </div>
        <div class="div-list">
            <p class="list-name">Роль:</p>
            <div class="list-names">
                {% if role_have %}
                <p class="list-p" id="filter-role">{{ role }}</p>
                {% else %}
                <p class="list-p" id="filter-role">Не указано</p>
                {% endif %}
                <ul class="list sub-list">
                    <li class="list-li">Не указано</li>
                    <li class="list-li">Ученик</li>
                    <li class="list-li">Учитель</li>
                    <li class="list-li">Администратор</li>
                </ul>
            </div>
        </div>
        <input type="number" class="input-filter input-filter-group" name="group_filter">
        <input type="text" class="input-filter input-filter-role" name="role_filter">
        <input class="btn btn-filter" type="submit" value="Применить" name="filter_submit" />

    </form>
</div>

<table class="table">
    <tbody>
        <tr class="table-names">
            <td>№</td>
            <td class="table-username">ФИО</td>
            <td class="table-group">Группа</td>
            <td class="table-role">Роль</td>
            <td>Логин</td>
            <td>Эл. Почта</td>
            <td class="func">
                <button class="new-user table-btn" onclick="n_user()"></button>
            </td>
        </tr>
        {% for user in users %}
        {% if user.deactivate %}
        <tr class="table-user deactive-user">
            <td>{{ user.id }}</td>
            <td>
                <span class="surname">{{ user.last_name }}</span>
                <span class="name">{{ user.first_name }}</span>
                <span class="patronymic">{{ user.middle_name }}</span>
            </td>
            <td class="table-td-group">
                {% if user.role == "Ученик" %}
                {{ user.group }}
                {% endif %}
            </td>
            <td>{{ user.role }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td class="table-hidden">{{ user.password }}</td>
            <td class="func">
                <button class="delete table-btn"></button>
            </td>
        </tr>
        {% else %}
        <tr class="table-user">
            <td>{{ user.id }}</td>
            <td>
                <span class="surname">{{ user.last_name }}</span>
                <span class="name">{{ user.first_name }}</span>
                <span class="patronymic">{{ user.middle_name }}</span>
            </td>
            <td class="table-td-group">
                {% if user.role == "Ученик" %}
                {{ user.group }}
                {% endif %}
            </td>
            <td>{{ user.role }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td class="table-hidden">{{ user.password }}</td>
            <td class="func">
                <button class="change table-btn"></button>
                <button class="delete table-btn"></button>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>

<div class="pages">
    <ul class="pages-list">
        {% if have_prev_page %}
        <li class="pages-item">
            <a href="?p={{ prev_page }}" class="pages-btn arrow-left" name="page_before">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20px" height="20px">
                    <g data-name="Layer 2">
                        <path
                            d="M20,25a1,1,0,0,1-.71-.29l-8-8a1,1,0,0,1,0-1.42l8-8a1,1,0,1,1,1.42,1.42L13.41,16l7.3,7.29a1,1,0,0,1,0,1.42A1,1,0,0,1,20,25Z" />
                    </g>
                    <g>
                        <rect height="32" width="32" fill="none" />
                    </g>
                </svg>
            </button>
        </li>
        {% endif %}
        {% for p in paginator.page_range %}
        <li class="pages-item">
            {% if p == page_number %}
                {% if role_have and group_have %}
                <a class="page-active" name="page_number" href="?p={{ p }}&role={{ role }}&group={{ group }}">{{ p }}</a>
                {% elif name_have %}
                <a class="page-active" name="page_number" href="?p={{ p }}&name={{ name }}">{{ p }}</a>
                {% elif role_have %}
                <a class="page-active" name="page_number" href="?p={{ p }}&role={{ role }}">{{ p }}</a>
                {% elif group_have %}
                <a class="page-active" name="page_number" href="?p={{ p }}&group={{ group }}">{{ p }}</a>
                {% else %}
                <a class="page-active" name="page_number" href="?p={{ p }}">{{ p }}</a>
                {% endif %}
            {% else %}
                {% if role_have and group_have %}
                <a class="pages-btn" name="page_number" href="?p={{ p }}&role={{ role }}&group={{ group }}">{{ p }}</a>
                {% elif name_have %}
                <a class="pages-btn" name="page_number" href="?p={{ p }}&name={{ name }}">{{ p }}</a>
                {% elif role_have %}
                <a class="pages-btn" name="page_number" href="?p={{ p }}&role={{ role }}">{{ p }}</a>
                {% elif group_have %}
                <a class="pages-btn" name="page_number" href="?p={{ p }}&group={{ group }}">{{ p }}</a>
                {% else %}
                <a class="pages-btn" name="page_number" href="?p={{ p }}">{{ p }}</a>
                {% endif %}
            {% endif %}
        </li>
        {% endfor %}
        {% if have_next_page %}
        <li class="pages-item">
            <a href="?p={{ next_page }}" class="pages-btn arrow-right" name="page_after">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20px" height="20px"
                    style="transform: rotate(180deg);">
                    <g data-name="Layer 2">
                        <path
                            d="M20,25a1,1,0,0,1-.71-.29l-8-8a1,1,0,0,1,0-1.42l8-8a1,1,0,1,1,1.42,1.42L13.41,16l7.3,7.29a1,1,0,0,1,0,1.42A1,1,0,0,1,20,25Z" />
                    </g>
                    <g>
                        <rect height="32" width="32" fill="none" />
                    </g>
                </svg>
            </button>
        </li>
        {% endif %}
    </ul>
</div>

<form class="new-user-block" method="POST" id="form" action="{% url 'admin_menu' %}">
    {% csrf_token %}
    <p class="new-user-p">Создание пользователя</p>
    <div class="new-user-main">
        <div class="inputs">
            {% csrf_token %}
            <input class="input input-surname" type="text" placeholder="Фамилия" name="surname_input" required>
            <input class="input input-name" type="text" placeholder="Имя" name="name_input" required>
            <input class="input input-patronymic" type="text" placeholder="Отчество" name="patronymic_input" required>
            <input class="input input-login" type="text" placeholder="Логин" name="login_input" required>
            <input class="input input-email" type="email" placeholder="Email" name="email_input" required>
            <input type="text" class="input input-password" placeholder="Пароль" name="password_input">
            <input type="number" class="form-id" name="user_id_edit" required>
            <input type="text" class="form-group" value="1" name="group_input" required>
        </div>
        <div class="lists">
            <div class="new-user-role">
                <div>
                    <label class="role-name" for="role1">Ученик</label>
                    <input class="input-role" type="radio" name="role" id="role1" value="Ученик" checked>
                </div>
                <div>
                    <label class="role-name" for="role2">Учитель</label>
                    <input class="input-role" type="radio" name="role" id="role2" value="Учитель">
                </div>
                <div>
                    <label class="role-name" for="role3">Админ</label>
                    <input class="input-role" type="radio" name="role" id="role3" value="Администратор">
                </div>
            </div>

            <div class="new-user-group">
                <p class="list-name">Группа:</p>
                <div class="list-names">
                    <p class="list-p n-hidden" id="group-p">1</p>
                    <ul class="list" id="group-list">
                        <li class="list-li">1</li>
                        <li class="list-li">2</li>
                        <li class="list-li">3</li>
                        <li class="list-li">4</li>
                        <li class="list-li">5</li>
                        <li class="list-li">6</li>
                        <li class="list-li">7</li>
                        <li class="list-li">10</li>
                        <li class="list-li">11</li>
                        <li class="list-li">12</li>
                        <li class="list-li">13</li>
                        <li class="list-li">14</li>
                        <li class="list-li">15</li>
                        <li class="list-li">16</li>
                        <li class="list-li">17</li>
                        <li class="list-li">20</li>
                        <li class="list-li">21</li>
                        <li class="list-li">22</li>
                        <li class="list-li">23</li>
                        <li class="list-li">24</li>
                        <li class="list-li">25</li>
                        <li class="list-li">26</li>
                        <li class="list-li">27</li>
                    </ul>
                    <div class="block"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="new-user-btns">
        <button class="btn exit" onclick="exit()" type="button">Отмена</button>
        <button class="btn create" onclick="create()" type="submit">Создать</button>
    </div>
</form>

<form class="delete_page" method="POST">
    <p class="delete-p">Вы уверены, что хотите удалить/скрыть пользователя?</p>
    <p>Пользователь: <span class="delete-fio"></span></p>
    <div class="delete-btns">
        <button class="btn exit" type="button" onclick="del_exit()">Отмена</button>
        <input class="btn delete-btn" type="submit" name="delete_butt" value="Удалить">
        <input class="btn delete-btn del-btn" type="submit" name="deactivate_butt" value="Скрыть">
        {% csrf_token %}
        <input type="number" class="user-id" name="user_id_delete">
    </div>
</form>

<form class="create-tokens" method="POST">
    <p class="token-p">Создание токенов</p>
    <span class="token-span">Напишите в поле количество токенов, которое хотите создать.</span>
    {% csrf_token %}
    <input type="number" class="token-input" name="token_value" min="1" max="1000" required />

    <div class="token-btns">
        <button class="btn exit" type="button" onclick="tok_exit()">Отмена</button>
        <input class="btn btn-token-create" type="submit" name="accept_token" onclick="tok_exit()">
    </div>
</form>

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

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

{% else %}
<div class="div-error">
    <p class="hi">Йоу, мэн, ты не админчик?</p>
    <img src="{% static 'img/global/not_authorized.jpg' %}" alt="Балакин...">
    <p class="advice-p">Иди попроси админку, а потом приходи</p>
    <a href="{% url 'profile' %}">В профиль</a>
</div>
{% endif %}

{% endblock content %}