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

{% load static %}

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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'main/css/work.css' %}" xmlns="http://www.w3.org/1999/html">
<link rel="stylesheet" href="{% static 'modules/notifications/dist/notifications.css' %}">
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script src="{% static 'main/js/control.js'%}" type="text/babel"></script>
<script src="{% static 'main/js/notifications.js' %}"></script>                     {#     Для     #}
<script src="{% static 'modules/notifications/dist/notifications.js' %}"></script>  {# Уведомлений #}
{% endblock%}
{% block content %}
<div class="container-md">

    <div class="new-section">
        <p class="row page-description" id="licences_remaining">Свободных Мест:</p>
    </div>

  {% for message in messages %}
  <script>create_notification('{{message}}','','{{message.tags}}',2000)</script>
  {% endfor %}

  {% block form %}
  <form method="post">
    {% csrf_token %}

    <div class="row justify-content-center new-section">

      <div class="col-10">
        <h3 class="py-4 text-center font-weight-bold">Список сотрудников</h3>

        {% block table %}
        <table class="table table-dark">

            <thead>
            <th>
                <input
                  type="checkbox"
                  class="form-check-input"
                  id="head-checkbox"
                />
              </th>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
            </thead>
            <tbody id="tbody"></tbody>

        </table>
        <p id="loading">Данные загружаются...</p>
        {% endblock %}

      </div>
    </div>

    {% block count %}
    <div class="row justify-content-center new-section">
      <div class="col-5">
        <div class="info">

          <div class="info-row">
            <div class="info-target px-4"><h6>Инженеров:</h6></div>
            <div class="info-quantity">
              <div class="status-circle-small light-green"></div>
              <span class="info-quantity-value">{{ engineers }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-target px-4"><h6>Легких агентов:</h6></div>
            <div class="info-quantity">
              <div class="status-circle-small light-yellow"></div>
              <span class="info-quantity-value">{{ light_agents }}</span>
            </div>
          </div>

        </div>
      </div>
      {% endblock %}

      {% block buttons %}
      <div class="col-5">

        <button type="submit" name="engineer" class="btn default-button btn-warning btn-block btn-sm py-3">
          Назначить выбранных на роль инженера
        </button>

        <button type="submit" name="light_agent" class="btn default-button btn-warning btn-block btn-sm py-3">
          Назначить выбранных на роль легкого агента
        </button>
      </div>
      {% endblock %}

    </div>
  </form>
  {% endblock %}

</div>

{% endblock %}