{% extends "base.html" %}

{% block title %}Отделы{% 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="create-button" class="create-button">Создать отдел</button>
</div>

<div class="user-cards-container">
    {% for otdel in otdels %}
    <div class="user-card">
        <div class="user-card-header">
            <h3 class="user-id">ID: {{ otdel.id }}</h3>
            <h2 class="user-username">{{ otdel.name }}</h2>
        </div>
        <div class="user-actions">
            <button class="edit-button" data-otdel-id="{{ otdel.id }}" data-otdel-name="{{ otdel.name }}">Изменить</button>
            <button class="delete-button" data-otdel-id="{{ otdel.id }}">Удалить</button>
        </div>
    </div>
    {% endfor %}
</div>

{% include 'pagination.html' %}



{% endblock %}