{% extends "base.html" %}

{% block title %}{{ task.title }} · Steady{% endblock %}

{% block content %}
<article class="task-detail">
    <div class="task-card__header">
        <div>
            <span class="badge badge--{{ task.priority }}">{{ task.priority|capitalize }}</span>
            <span class="status">{{ task.status|replace('_', ' ')|title }}</span>
        </div>
        {% if task.due_date %}
            <time datetime="{{ task.due_date.isoformat() }}">Due {{ task.due_date.strftime('%d %b %Y, %H:%M') }}</time>
        {% endif %}
    </div>
    <h1>{{ task.title }}</h1>
    {% if task.description %}<p class="task-description">{{ task.description }}</p>{% endif %}

    <div class="progress-row progress-row--large">
        <label for="task-progress">Progress</label>
        <progress id="task-progress" max="100" value="{{ task.progress_percentage }}">
            {{ task.progress_percentage }}%
        </progress>
        <span>{{ task.progress_percentage }}%</span>
    </div>

    <section aria-labelledby="steps-heading">
        <h2 id="steps-heading">Small steps</h2>
        {% if task.subtasks %}
            <ul class="subtask-list">
                {% for subtask in task.subtasks %}
                    <li class="subtask {% if subtask.completed %}subtask--done{% endif %}">
                        <form method="post" action="{{ url_for('tasks.toggle_subtask_status', task_id=task.id, subtask_id=subtask.id) }}">
                            {{ action_form.hidden_tag() }}
                            <button class="subtask__toggle" type="submit" aria-label="Mark {{ subtask.title }} as {{ 'not completed' if subtask.completed else 'completed' }}">
                                <span aria-hidden="true">{{ '✓' if subtask.completed else '○' }}</span>
                                {{ subtask.title }}
                            </button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>No small steps yet. Add the easiest first move.</p>
        {% endif %}

        <form class="subtask-form" method="post" action="{{ url_for('tasks.create_subtask', task_id=task.id) }}">
            {{ subtask_form.hidden_tag() }}
            <div class="field">
                {{ subtask_form.title.label }}
                {{ subtask_form.title(placeholder="For example: open the document") }}
            </div>
            {{ subtask_form.submit(class="button button--quiet") }}
        </form>
    </section>

    <div class="form-actions">
        {% if task.status != 'done' %}
            <a class="button button--complete" href="{{ url_for('tasks.focus_task', task_id=task.id) }}">Focus on this task</a>
            <form method="post" action="{{ url_for('tasks.complete', task_id=task.id) }}">
                {{ action_form.hidden_tag() }}
                <button class="button button--quiet" type="submit">Mark complete</button>
            </form>
        {% endif %}
        <a class="button" href="{{ url_for('tasks.edit', task_id=task.id) }}">Edit task</a>
        <a href="{{ url_for('tasks.index') }}">Back to tasks</a>
    </div>

    <details class="danger-zone">
        <summary>Delete this task</summary>
        <p>This permanently removes the task and its small steps.</p>
        <form method="post" action="{{ url_for('tasks.delete', task_id=task.id) }}">
            {{ action_form.hidden_tag() }}
            <button class="button button--danger" type="submit">Delete permanently</button>
        </form>
    </details>
</article>
{% endblock %}