{% extends('index.html') %}

{% block css %}
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/list.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/pages/operators.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/nametag.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/user_add.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/work_alt.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/home.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/timer.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/shopping_cart.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/search.css">
{% endblock %}

{% block body %}
<section id="operators" class="panel medium list">
	<form id="actions" class="row menu separated" onsubmit="return false">
		<label for="actions">
			{% if account.type == 'administrator' or account.type == 'operator' or account.type == 'operator' %}
			<button class="grass dense" onclick="operators.create()">Создать</button>
			{% endif %}
		</label>
	</form>
	<form id="filters" class="row menu stretched" onsubmit="return false">
		<label for="filters">
			<button class="{{ active ?? 'earth' }}" onclick="operators.filter('active', null, this); operators.reinit()" {% if
				active=='sand' %}title="... и активные" {% elseif active=='river' %}title="... или активные" {% endif
				%}>Активный</button>
			<button class="{{ inactive ?? 'earth' }}" onclick="operators.filter('inactive', null, this); operators.reinit()" {% if
				inactive=='sand' %}title="... и неактивные" {% elseif inactive=='river' %}title="... или неактивные" {% endif
				%}>Неактивный</button>
		</label>
	</form>
	<search class="row menu wide stretched">
		<label class="solid">
			<i class="icon search"></i>
			<input id="search" type="search" name="search" class="snow merged right" 
			onkeydown="if (event.keyCode === 13) this.nextElementSibling.click()" value="{{ cookies.operators_filter_search ?? buffer.operators.filters.search }}"
				placeholder="Глобальный поиск по операторам" />
			<button class="sea merged left" onclick="operators.search(this.previousElementSibling, this)">Поиск</button>
		</label>
	</search>
	<div id="title" class="row unselectable">
		<span data-column="account" class="button" title="Аккаунт"><i class="icon bold nametag"></i></span>
		<span data-column="name" class="button">ФИО</span>
		<span data-column="number" class="button">Номер</span>
		<span data-column="mail" class="button">Почта</span>
		<span data-column="commentary" class="button">Комментарий</span>
	</div>
</section>
<script data-reinitializer-once="true">
	if (typeof window.operators_main_initialized === 'undefined') {
	  // Не выполнялся скрипт

	  document.addEventListener('operators.initialized', (e) => {
      // Инициализированы операторы

			// Инициализация допустимой страницы для выполнения
			e.detail.operators.page = 'operators';

			// Инициализация страниц
			e.detail.operators.init();

			// Блокировка от повторного выполнения
			window.operators_main_initialized = true;
		});
	}
</script>
<script data-reinitializer-once="true">
	if (typeof window.operators_scroll_initialized === 'undefined') {
	  // Не выполнялся скрипт

		window.onscroll = function(e) {
			// Инициализация чтения новых задач при достижения конца страницы

			if (core.page === 'operators') {
				// Инициализирована требуемая для выполнения страница

				if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) operators.read();
			}
		};

		// Блокировка от повторного выполнения
		window.operators_scroll_initialized = true;
	}
</script>
{% endblock %}

{% block js %}
<script type="text/javascript" data-reinitializer-once="true" src="/js/imask-7.1.0-alpha.js" defer></script>
<script type="text/javascript" src="/js/operators.js" defer></script>
{% endblock %}
