{% 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>Email</th>
                    <th>Role</th>
                    <th>Name(link to profile)</th>
                    <th>Checked</th>
                </thead>
                <tbody>
                   
                    <tr>
                        <td>1</td>
                        <td>big_boss123@example.ru</td>
                        <td>engineer</td>
                        <td><a href="#">Иван Иванов</a></td>
                        <td><input class="form-check-input" type="checkbox" value=""></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>gachi_cool456@example.ru</td>
                        <td>light engineer</td>
                        <td><a href="#">Пётр Петров</a></td>
                        <td><input class="form-check-input" type="checkbox"value=""></td>
                    </tr>  
               </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">13</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">22</span>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="col-5">
            <button class="request-acess-button default-button">Назначить выбранных на роль инженера</button>
            <button class="hand-over-acess-button default-button">Назначить выбранных на роль легкого агента</button>
        </div>
    </div>
</div>
{% endblock %}