{% 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 class="page-content">

    <!-- Назад -->
    <a href="/tasks/{{ task.pk }}/" hx-get="/tasks/{{ task.pk }}/" hx-target="#main-content" hx-push-url="/tasks/{{ task.pk }}/" hx-indicator="#loader"
       style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none; margin-bottom:1rem;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
        </svg>
        До задачі
    </a>

    <div style="margin-bottom:1.25rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Редактирование задачи" %}</h1>
    </div>

    {{ department_tree|json_script:"department-tree-data" }}

    {% if form_error %}
    <div style="background:color-mix(in srgb, var(--color-destructive) 8%, transparent); border:1px solid color-mix(in srgb, var(--color-destructive) 30%, transparent); border-radius:0.75rem; padding:0.875rem 1.25rem; margin-bottom:1rem; font-size:0.875rem; color:var(--color-destructive);">
        {{ form_error }}
    </div>
    {% endif %}

    <form hx-post="/tasks/{{ task.pk }}/edit/" hx-target="#main-content" hx-push-url="/tasks/{{ task.pk }}/" hx-indicator="#loader"
          style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem; display:flex; flex-direction:column; gap:0.875rem;">
        {% csrf_token %}
        <input type="text" name="title" required maxlength="250" value="{{ task.title }}" 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;">{{ task.description }}</textarea>

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;">
            {% include 'partials/people-picker-field.html' with label=l_resp field_name='responsible' options=employee_options selected_ids=responsible_ids placeholder=p_resp %}
            {% include 'partials/people-picker-field.html' with label=l_co field_name='co_executors' options=employee_options selected_ids=co_executor_ids placeholder=p_co %}
            {% include 'partials/people-picker-field.html' with label=l_obs field_name='observers' options=employee_options selected_ids=observer_ids placeholder=p_obs %}
        </div>

        <div style="display:flex; align-items:center; gap:1rem; 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 == task.priority %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
            <input type="date" name="due_date" value="{{ task.due_date|date:'Y-m-d' }}" class="input" style="width:auto; font-size:0.8125rem;">
            <button type="submit" class="btn btn-primary" style="margin-left:auto;">{% trans "Сохранить изменения" %}</button>
        </div>
    </form>
    <script>initPeoplePickers(document);</script>

</div>