{% extends "layout.html" %}
{% block content %}
<div style="display: flex; gap: 2rem; flex-wrap: wrap;">
    <!-- Create Task Form -->
    <div class="card" style="flex: 1; min-width: 300px;">
        <h3>Create New Task</h3>
        <form action="{{ url_for('create_task') }}" method="POST">
            <label>Task Name</label>
            <input type="text" name="name" required placeholder="e.g. Write Report">
            
            <label>Associate with Activity (Optional)</label>
            <select name="activity_id" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem;">
                <option value="">-- None --</option>
                {% for act in activities %}
                <option value="{{ act._id }}">{{ act.name }}</option>
                {% endfor %}
            </select>
            
            <label>Due Date & Time (Optional)</label>
            <input type="datetime-local" name="due_date" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem;">
            
            <div style="margin-bottom: 1rem;">
                <input type="checkbox" id="is_template" name="is_template" value="1">
                <label for="is_template"><strong>Auto-add on Start?</strong> (If checked, this task is added every time the selected activity starts)</label>
            </div>
            
            <button type="submit" class="btn">Create Task</button>
        </form>
    </div>

    <!-- Task Lists -->
    <div style="flex: 2; min-width: 300px;">
        <!-- Regular Tasks -->
        <div class="card">
            <h3>Pending Tasks</h3>
            {% if not tasks %}
                <p>No open tasks.</p>
            {% else %}
                <ul style="list-style: none; padding: 0;">
                {% for task in tasks %}
                    <li style="border-bottom: 1px solid #eee; padding: 10px 0;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <a href="{{ url_for('task_detail', task_id=task._id) }}" style="font-weight: bold;">{{ task.name }}</a>
                                {% if task.activity_name %}
                                <span style="background: {{ task.activity_color }}; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; margin-left: 5px;">
                                    {{ task.activity_name }}
                                </span>
                                {% endif %}
                            </div>
                            
                            <div style="display: flex; align-items: center; gap: 10px;">
                                {% if task.activity_id %}
                                <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
                                    <!-- Automatically use the task name as the session note -->
                                    <input type="hidden" name="note" value="{{ task.name }}">
                                    <button type="submit" class="btn" style="padding: 2px 8px; font-size: 0.8rem; background: #27ae60;" title="Start Timer for this Task">
                                        Start
                                    </button>
                                </form>
                                {% endif %}
                                
                                {% if task.due_date %}
                                    <small style="color: #e74c3c;">Due: {{ task.due_date.strftime('%Y-%m-%d %H:%M') }}</small>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </div>

        <!-- Templates -->
        <div class="card" style="background: #fdfdfd;">
            <h3>Auto-Added Templates</h3>
            <small>These tasks are automatically created when you start the associated activity.</small>
            {% if not templates %}
                <p>No templates defined.</p>
            {% else %}
                <ul style="padding-left: 20px;">
                {% for t in templates %}
                    <li>
                        <strong>{{ t.name }}</strong> 
                        <span style="color: #666;">(on {{ t.activity_name|default('Unknown Activity') }})</span>
                        <a href="{{ url_for('task_detail', task_id=t._id) }}" style="font-size: 0.8rem;">[Edit]</a>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}