{% extends 'base.html' %}

{% block title %}New Task - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">Create New Task</h1>
    <a href="{% url 'dashboard' %}" class="btn btn-secondary">Cancel</a>
</div>

<div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-xl); max-width: 600px;">
    <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" required autofocus placeholder="Enter task title">
        </div>

        <div class="form-group">
            <label class="form-label" for="description">Description</label>
            <textarea class="form-textarea" id="description" name="description" rows="3" placeholder="Add a 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" selected>Pending</option>
                    <option value="in_progress">In Progress</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">Low</option>
                    <option value="medium" selected>Medium</option>
                    <option value="high">High</option>
                    <option value="urgent">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">
            </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">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label" for="recurrence">Recurrence</label>
            <select class="form-select" id="recurrence" name="recurrence">
                <option value="none" selected>None</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="biweekly">Bi-weekly</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">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 }}">
                    <span style="color: {{ tag.color }}">{{ tag.name }}</span>
                </label>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <button type="submit" class="btn btn-primary">Create Task</button>
    </form>
</div>
{% endblock %}