{% extends 'base/base.html' %}

{% load static %}

{% block title %}{{ pagename }}{% endblock %}

{% block heading %}Управление правами{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'main/css/work.css' %}">
{% endblock %}

{% block content %}
<div class="container-md">

    <div class="new-section">
        <p class="row page-description">Основаная информация о странице</p>
    </div>

    <div class="row justify-content-center new-section">
        <div class="col-10">
            <h6 class="table-title">Список сотрудников с правами инженера</h6>
            <table class="light-table">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    {% for engineer in engineers %}
                        <tr>
                            <td>{{ engineer.id }}</td>
                            <td>{{ engineer.name }}</td>
                        </tr>
                    {% endfor %}
               </tbody>
            </table>
        </div>
    </div>
    <div class="row justify-content-center new-section">
        <div class="col-5">
            <div class="info">
                <div class="info-row">
                    <div class="info-target">инженеров: </div>
                    <div class="info-quantity">
                        <div class="status-circle-small light-green"></div>
                        <span class="info-quantity-value">{{ engineers|length }}</span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-target">легких агентов:</div>
                    <div class="info-quantity">
                        <div class="status-circle-small light-yellow"></div>
                        <span class="info-quantity-value">{{ agents|length }}</span>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-5">
            <a href="/work/become_engineer" class="request-acess-button default-button">Получить права инженера</a>
            <a href="/work/hand_over" class="hand-over-acess-button default-button">Сдать права инженера</a>
        </div>
    </div>
</div>
{% endblock %}