{% load i18n %}
{% trans 'Ответственный' as l_resp %}{% trans '+ Добавить ответственного' as p_resp %}{% trans 'Соисполнители' as l_co %}{% trans '+ Добавить соисполнителя' as p_co %}{% trans 'Наблюдатели' as l_obs %}{% trans '+ Добавить наблюдателя' as p_obs %}
<div id="task-create-modal" role="dialog" aria-modal="true" aria-labelledby="task-create-modal-title"
     style="display:none; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,0.4); align-items:flex-start; justify-content:center; padding:1.5rem 1rem; overflow-y:auto;"
     onclick="if(event.target===this) taskCreateClose()">
    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 20px 60px rgb(0 0 0/0.2); width:100%; max-width:40rem; margin:auto;">
        <form id="task-create-form" hx-post="/tasks/" hx-target="#main-content" hx-indicator="#loader, find .btn-label-loading" hx-disabled-elt="find button[type=submit]">
            {% csrf_token %}
            <div style="padding:1rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem;">
                <div>
                    <div id="task-create-modal-title" style="font-size:1rem; font-weight:600; color:var(--color-foreground);">{% trans "Новая задача" %}</div>
                    <p style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{% trans "Назначьте ответственного, соисполнителей и срок." %}</p>
                </div>
                <button type="button" class="btn btn-ghost btn-icon" onclick="taskCreateClose()" aria-label="{% trans 'Закрыть' %}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>

            {% if form_error %}
            <div style="margin:0.75rem 1.25rem 0; padding:0.5rem 0.75rem; border-radius:0.5rem; background:hsl(0 70% 96%); border:1px solid hsl(0 70% 85%); color:hsl(0 55% 35%); font-size:0.8125rem;">
                {{ form_error }}
            </div>
            {% endif %}

            <div style="padding:1.25rem; display:flex; flex-direction:column; gap:0.875rem;">
                <input type="text" name="title" required maxlength="250" placeholder="{% trans 'Название задачи' %}" class="input" style="width:100%; font-weight:500;">
                <textarea name="description" placeholder="{% trans 'Описание задачи (необязательно)...' %}"
                    style="width:100%; min-height:5rem; resize:vertical; background:var(--color-card); border:1px solid var(--color-input); border-radius:var(--radius); padding:0.4375rem 0.75rem; font-size:0.875rem; color:var(--color-foreground); font-family:var(--font-sans); outline:none; box-sizing:border-box;"></textarea>

                <div style="display:flex; flex-direction:column; gap:0.875rem;">
                    {% include 'partials/people-picker-field.html' with label=l_resp field_name='responsible' options=employee_options selected_ids=preselect_responsible_ids placeholder=p_resp %}
                    {% include 'partials/people-picker-field.html' with label=l_co field_name='co_executors' options=employee_options selected_ids=empty_ids placeholder=p_co %}
                    {% include 'partials/people-picker-field.html' with label=l_obs field_name='observers' options=employee_options selected_ids=empty_ids placeholder=p_obs %}
                </div>

                <div style="display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;">
                    <select name="priority" class="input" style="width:auto; font-size:0.8125rem;">
                        {% for value, label in priorities %}
                        <option value="{{ value }}" {% if value == 'medium' %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <input type="date" name="due_date" class="input" style="width:auto; font-size:0.8125rem;">
                </div>
            </div>

            <div style="padding:0.875rem 1.25rem; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:0.5rem;">
                <button type="button" class="btn btn-secondary" style="border:1px solid var(--color-border);" onclick="taskCreateClose()">{% trans "Отмена" %}</button>
                <button type="submit" class="btn btn-primary">
                    {% trans "Создать задачу" %}
                    <span class="btn-label-loading htmx-indicator">{% trans "Создание…" %}</span>
                </button>
            </div>
        </form>
    </div>
</div>