{# فرم ساخت/ویرایش تسک. حتماً سمت سرور رندر می‌شه (نه با جاوااسکریپت) تا تقویم شمسی به ورودی تاریخ وصل بشه. #}
{% macro task_editor(folders, users, priorities, repeat_choices, quick_dates, current_folder_id=None) %}
{% set back_url = request.full_path if request.query_string else request.path %}
<dialog id="todoEditor" class="todo-sheet" aria-labelledby="todoEditorTitle"
        data-customers-url="{{ url_for('tasks_board.customers_json') }}">
  <form method="post" id="todoEditorForm" action="{{ url_for('tasks_board.create_item') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="back" value="{{ back_url }}">
    <input type="hidden" name="customer_id" id="todoCustomerId">
    <input type="hidden" name="priority" id="todoPriority" value="0">
    <input type="hidden" name="subtasks" id="todoSubtasks">

    <div class="todo-sheet-head">
      <span class="subtitle" id="todoEditorTitle">تسک جدید</span>
      <button type="button" class="btn btn-ghost todo-icon-btn" onclick="noorTodoCloseEditor()" aria-label="بستن">✕</button>
    </div>

    <div class="todo-sheet-body">
      <input type="text" name="title" id="todoTitle" class="todo-title-input" maxlength="300"
             placeholder="چه کاری باید انجام بشه؟" autocomplete="off">

      <!-- ---------- مشتری ---------- -->
      <div class="todo-field">
        <label class="field-label">مشتری (اختیاری — اگر عنوان ننویسید، نام مشتری عنوان می‌شود)</label>
        <div id="todoCustomerChip" class="todo-picked" hidden>
          <span id="todoCustomerName"></span>
          <button type="button" class="todo-picked-remove" onclick="noorTodoClearCustomer()" aria-label="حذف مشتری">✕</button>
        </div>
        <input type="search" id="todoCustomerSearch" placeholder="جستجوی نام، شماره یا کد مشتری ..." autocomplete="off">
        <div id="todoCustomerResults" class="todo-results" hidden></div>
      </div>

      <!-- ---------- تاریخ و ساعت ---------- -->
      <div class="todo-field">
        <label class="field-label">تاریخ سررسید</label>
        <div class="todo-quick-dates">
          <button type="button" class="btn btn-ghost todo-quick" data-date="{{ quick_dates.today }}">امروز</button>
          <button type="button" class="btn btn-ghost todo-quick" data-date="{{ quick_dates.tomorrow }}">فردا</button>
          <button type="button" class="btn btn-ghost todo-quick" data-date="{{ quick_dates.next_week }}">هفته بعد</button>
          <button type="button" class="btn btn-ghost todo-quick" data-date="">بدون تاریخ</button>
        </div>
        <div class="todo-row-fields">
          <input type="text" name="due_date" id="todoDueDate" data-jalali-picker="1"
                 placeholder="برای انتخاب تاریخ کلیک کنید">
          <select name="due_hour" id="todoDueHour" aria-label="ساعت">
            <option value="">ساعت</option>
            {% for hour in range(0, 24) %}
            <option value="{{ '%02d'|format(hour) }}">{{ jalali.to_fa_digits('%02d'|format(hour)) }}</option>
            {% endfor %}
          </select>
          <select name="due_minute" id="todoDueMinute" aria-label="دقیقه">
            {% for minute in [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] %}
            <option value="{{ '%02d'|format(minute) }}">{{ jalali.to_fa_digits('%02d'|format(minute)) }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <!-- ---------- اولویت ---------- -->
      <div class="todo-field">
        <label class="field-label">اولویت</label>
        <div class="todo-flags" role="group" aria-label="اولویت">
          {% for value, label, color in priorities %}
          <button type="button" class="todo-flag" data-value="{{ value }}" data-color="{{ color }}"
                  aria-label="{{ label }}" aria-pressed="false">🚩 <span>{{ label }}</span></button>
          {% endfor %}
        </div>
      </div>

      <!-- ---------- پوشه، تکرار، مسئول ---------- -->
      <div class="todo-field">
        <label class="field-label">پوشه</label>
        <select name="folder_id" id="todoFolder">
          {% for folder_option in folders %}
          <option value="{{ folder_option.id }}" {% if current_folder_id == folder_option.id %}selected{% endif %}>{{ folder_option.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="todo-field">
        <label class="field-label">تکرار</label>
        <select name="repeat_rule" id="todoRepeat">
          {% for key, label in repeat_choices %}
          <option value="{{ key }}">{{ label }}</option>
          {% endfor %}
        </select>
        <span class="muted">تسک تکرارشونده بعد از تیک خوردن، خودش برای دفعه‌ی بعد ساخته می‌شود (تاریخ سررسید لازم است).</span>
      </div>

      <div class="todo-field">
        <label class="field-label">مسئول</label>
        <select name="assignee_id" id="todoAssignee">
          <option value="">بدون مسئول</option>
          {% for person in users %}
          <option value="{{ person.id }}">{{ person.full_name }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- ---------- یادداشت و زیرتسک ---------- -->
      <div class="todo-field">
        <label class="field-label">یادداشت</label>
        <textarea name="notes" id="todoNotes" rows="2" placeholder="توضیح یا نتیجه‌ی تماس ..."></textarea>
      </div>

      <div class="todo-field">
        <label class="field-label">زیرتسک‌ها</label>
        <div id="todoSubtaskList" class="todo-subtask-list"></div>
        <button type="button" class="btn btn-ghost" onclick="noorTodoAddSubtask()">+ زیرتسک</button>
      </div>
    </div>

    <div class="todo-sheet-foot">
      <p class="todo-error" id="todoEditorError" hidden></p>
      <div class="todo-sheet-buttons">
        <button type="submit" class="btn btn-gold" id="todoSaveBtn">✓ ذخیره</button>
        <button type="button" class="btn btn-ghost" onclick="noorTodoCloseEditor()">انصراف</button>
        <button type="submit" class="btn btn-danger" form="todoDeleteForm" id="todoDeleteBtn" hidden>🗑 حذف</button>
      </div>
    </div>
  </form>

  {# فرم حذف جداست چون فرم تودرتو مجاز نیست؛ دکمه‌اش با ویژگی form به این فرم وصل می‌شه #}
  <form method="post" id="todoDeleteForm" action="" data-confirm="این تسک حذف شود؟">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="back" value="{{ back_url }}">
  </form>
</dialog>

<button type="button" class="todo-fab" onclick="noorTodoOpenEditor()" aria-label="تسک جدید">+</button>
{% endmacro %}