{% extends "base.html" %}

{% block title %}User Management{% endblock %}

{% block extra_head %}
<script src="/static/js/otdels.js" defer></script>
<script src="/static/js/users.js" defer></script>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/otdels.css">
<link rel="stylesheet" href="/static/css/users.css">
{% endblock %}

{% block content %}

<div class="header-container">
    <h1>Пользователи</h1>
    <button id="newsletter-button" class="create-button">Рассылка</button>
</div>

<div class="user-cards-container">
    {% for user in users %}
    <div class="user-card">
        <div class="user-card-header">
            <h3 class="user-id">ID: {{ user.id }}</h3>
            <h2 class="user-username">{{ user.username }}</h2>
        </div>
        <div class="user-status">
            <label class="switch">
                <input type="checkbox" class="status-toggle" data-user-id="{{ user.id }}" {% if user.has_access %}checked{% endif %}>
                <span class="slider"></span>
            </label>
            <p class="status-label">
                {% if user.has_access %}
                    Доступ открыт
                {% else %}
                    Доступ закрыт
                {% endif %}
            </p>
        </div>
    </div>
    {% endfor %}
</div>

{% include 'pagination.html' %}

{% endblock %}