{% extends 'base.html' %}

{% block title %}{{ task.title }} - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">Edit Task</h1>
    <div style="display: flex; gap: var(--space-sm);">
        <a href="{% url 'dashboard' %}" class="btn btn-secondary">Back</a>
        <form method="post" action="{% url 'task-delete' task.id %}" style="display: inline;" onsubmit="return confirm('Delete this task?')">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'dashboard' %}">
            <button type="submit" class="btn btn-danger">Delete</button>
        </form>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 350px; gap: var(--space-lg);">
    <!-- Main Form -->
    <div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-xl);">
        <form method="post">
            {% csrf_token %}

            <div class="form-group">
                <label class="form-label" for="title">Title</label>
                <input type="text" class="form-input" id="title" name="title" value="{{ task.title }}" required>
            </div>

            <div class="form-group">
                <label class="form-label" for="description">Description</label>
                <textarea class="form-textarea" id="description" name="description" rows="4">{{ task.description }}</textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="status">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="pending" {% if task.status == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="in_progress" {% if task.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                        <option value="completed" {% if task.status == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if task.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="priority">Priority</label>
                    <select class="form-select" id="priority" name="priority">
                        <option value="low" {% if task.priority == 'low' %}selected{% endif %}>Low</option>
                        <option value="medium" {% if task.priority == 'medium' %}selected{% endif %}>Medium</option>
                        <option value="high" {% if task.priority == 'high' %}selected{% endif %}>High</option>
                        <option value="urgent" {% if task.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="due_date">Due Date</label>
                    <input type="date" class="form-input" id="due_date" name="due_date" value="{{ task.due_date|date:'Y-m-d' }}">
                </div>

                <div class="form-group">
                    <label class="form-label" for="due_time">Due Time</label>
                    <input type="time" class="form-input" id="due_time" name="due_time" value="{{ task.due_time|time:'H:i' }}">
                </div>
            </div>

            <!-- Tags -->
            {% if tags %}
            <div class="form-group">
                <label class="form-label">Tags</label>
                <div style="display: flex; flex-wrap: wrap; gap: var(--space-sm);">
                    {% for tag in tags %}
                    <label style="display: flex; align-items: center; gap: var(--space-xs); cursor: pointer;">
                        <input type="checkbox" name="tags" value="{{ tag.id }}" {% if tag in task.tags.all %}checked{% endif %}>
                        <span style="color: {{ tag.color }}">{{ tag.name }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <div class="form-group">
                <label class="form-label" for="recurrence">Recurrence</label>
                <select class="form-select" id="recurrence" name="recurrence">
                    <option value="none" {% if task.recurrence == 'none' %}selected{% endif %}>None</option>
                    <option value="daily" {% if task.recurrence == 'daily' %}selected{% endif %}>Daily</option>
                    <option value="weekly" {% if task.recurrence == 'weekly' %}selected{% endif %}>Weekly</option>
                    <option value="biweekly" {% if task.recurrence == 'biweekly' %}selected{% endif %}>Bi-weekly</option>
                    <option value="monthly" {% if task.recurrence == 'monthly' %}selected{% endif %}>Monthly</option>
                    <option value="yearly" {% if task.recurrence == 'yearly' %}selected{% endif %}>Yearly</option>
                </select>
            </div>

            {% if tags %}
            <div class="form-group">
                <label class="form-label">Tags</label>
                <div style="display: flex; flex-wrap: wrap; gap: var(--space-sm);">
                    {% for tag in tags %}
                    <label style="display: flex; align-items: center; gap: var(--space-xs); cursor: pointer;">
                        <input type="checkbox" name="tags" value="{{ tag.id }}" {% if tag in task.tags.all %}checked{% endif %}>
                        <span style="color: {{ tag.color }}">{{ tag.name }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
    </div>

    <!-- Sidebar: Time Tracking & Subtasks -->
    <div>
        <!-- Time Tracking -->
        <div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg);">
            <h2 style="font-size: var(--font-lg); margin-bottom: var(--space-md);">Time Tracking</h2>
            <div style="font-size: var(--font-xxl); font-weight: 600; font-family: monospace; margin-bottom: var(--space-md);">
                {{ task.total_time_formatted }}
            </div>
            {% if time_entries %}
            <div style="max-height: 200px; overflow-y: auto;">
                {% for entry in time_entries %}
                <div style="display: flex; justify-content: space-between; padding: var(--space-sm); background: var(--bg); border-radius: var(--radius-sm); margin-bottom: var(--space-xs); font-size: var(--font-sm);">
                    <span>{{ entry.started_at|date:"M j, H:i" }}</span>
                    <span>{{ entry.duration_seconds|default:"Running" }}s</span>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted" style="font-size: var(--font-sm);">No time entries yet</p>
            {% endif %}
        </div>

        <!-- Subtasks -->
        <div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-lg);">
            <h2 style="font-size: var(--font-lg); margin-bottom: var(--space-md);">Subtasks</h2>
            {% if task.subtasks.count > 0 %}
            <div class="task-list">
                {% for subtask in task.subtasks.all %}
                {% include 'tasks/_task_item.html' with task=subtask %}
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted" style="font-size: var(--font-sm);">No subtasks</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}