{% extends "base.html" %}
{% block title %}Задачи · Кабинет Директора{% endblock %}
{% block body %}
<div class="dash-shell">
  <header class="dash-top">
    <div class="dash-brand">◆ Кабинет Директора</div>
    <nav class="dash-nav">
      <a class="dash-nav-item active" href="{{ url_for('tasks_page') }}">Задачи</a>
      <a class="dash-nav-item" href="{{ url_for('payments_page') }}">Оплаты</a>
    </nav>
    <a class="dash-logout" href="{{ url_for('logout') }}">Выйти</a>
  </header>

  <div class="tasks-toolbar">
    <button id="btn-new-task" class="btn-primary">＋ Новая задача</button>
    <div id="cal-nav" class="cal-nav">
      <button id="cal-prev" class="cal-btn" title="На 30 дней назад">◀</button>
      <button id="cal-today" class="cal-btn">Сегодня</button>
      <span id="cal-label" class="cal-label"></span>
      <button id="cal-next" class="cal-btn" title="На 30 дней вперёд">▶</button>
    </div>
  </div>

  <!-- Единый экран: папки + активная папка + календарь -->
  <main class="board">
    <!-- Полоса папок «В ПЛАНАХ» — каждая пилюля кликабельна и служит drop-зоной -->
    <section id="folders-bar" class="folders-bar"></section>
    <!-- Задачи активной папки (в т.ч. «Инбокс») -->
    <section id="folder-panel" class="folder-panel"></section>
    <!-- Календарь на 30 дней -->
    <section id="view-calendar" class="calendar"></section>
  </main>
</div>

<!-- ===== Модалка: создание / редактирование ===== -->
<div class="modal-overlay" id="task-modal" style="display:none;">
  <div class="modal">
    <div class="modal-head">
      <h2 id="modal-title">Новая задача</h2>
      <button class="modal-x" id="modal-close">✕</button>
    </div>
    <div class="modal-body">
      <label class="fld-label">Описание</label>
      <textarea id="f-desc" class="fld" rows="2" placeholder="Опишите задачу..."></textarea>

      <label class="fld-label">Приоритет</label>
      <div class="prio-row" id="f-prio"></div>

      <div>
        <label class="chk"><input type="checkbox" id="f-has-deadline"> Дедлайн</label>
        <input type="date" id="f-deadline" class="fld" disabled>
      </div>

      <label class="fld-label">Тип задачи</label>
      <div class="mode-row">
        <label class="chk"><input type="checkbox" id="f-personal" checked> Личная</label>
        <label class="chk"><input type="checkbox" id="f-group"> Групповая</label>
        <label class="chk"><input type="checkbox" id="f-delegate"> Поручить</label>
      </div>

      <div id="participants-wrap" style="display:none;">
        <label class="fld-label">Участники (видят и правят вместе)</label>
        <div id="f-participants" class="participants"></div>
      </div>
      <div id="recipient-wrap" style="display:none;">
        <label class="fld-label">Кому поручить</label>
        <select id="f-recipient" class="fld"></select>
      </div>

      <label class="fld-label">Заметки — текст, ссылки</label>
      <textarea id="f-notes" class="fld" rows="3" placeholder="Заметки, ссылки..."></textarea>

      <div id="images-wrap">
        <label class="fld-label">Картинки / скрины</label>
        <div id="f-images" class="img-gallery"></div>
        <input type="file" id="f-image-input" accept="image/*" style="display:none;">
        <button type="button" id="btn-add-image" class="btn-ghost">＋ Добавить картинку</button>
      </div>
    </div>
    <div class="modal-foot">
      <button id="modal-delete" class="btn-danger" style="display:none;">Удалить</button>
      <span style="flex:1;"></span>
      <button id="modal-cancel" class="btn-ghost">Отмена</button>
      <button id="modal-save" class="btn-primary">Сохранить</button>
    </div>
  </div>
</div>

<script>
  window.SEED = {{ 'true' if seed else 'false' }};
</script>
<script src="{{ url_for('static', filename='js/tasks.js') }}"></script>
{% endblock %}