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

{% load static %}

{% block title %}
Управление
{%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>
  <form method="post">
    {% csrf_token %}
    <div class="row justify-content-center new-section">
      <div style="display: none">
        {% for field in form.users %}
        {{ field.tag }}
        {% endfor %}
      </div>
      <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>
            {% for user in users %}
            <tr>
              <td>{{ user.id }}</td>
              <td>{{ user.user.email }}</td>
              <td>{{ user.role }}</td>
              <td><a href="#">{{ user.name }}</a></td>
              <td class="checkbox_field"></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 }}</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">{{ light_agents }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-5">
        <button type="submit" name="engineer" class="request-acess-button default-button">
          Назначить выбранных на роль инженера
        </button>
        <button type="submit" name="light_agent" class="hand-over-acess-button default-button">
          Назначить выбранных на роль легкого агента
        </button>
      </div>
    </div>
  </form>
</div>

<script>
  "use strict";
  let checkboxes = document.getElementsByName("users");
  let fields = document.querySelectorAll(".checkbox_field");
  if (checkboxes.length == fields.length) {
    for (let i = 0; i < fields.length; ++i) {
      let el = checkboxes[i].cloneNode(true);
      fields[i].appendChild(el);
    }
  }
</script>

{% endblock %}