
{% extends "base.html" %}

{% block title %}Timmy Calm{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="calm-container py-3">
    <div class="calm-header">
        <h1 class="calm-title">Timmy Calm</h1>
        <p class="calm-subtitle">Your focused attention stack</p>
    </div>

    <div id="now-next-later-stack" hx-trigger="load, taskPromoted from:body" hx-get="/calm/partials/now_next_later" hx-swap="outerHTML">
        {% include "calm/partials/now_next_later.html" %}
    </div>

    {% if not now_task and not next_task and later_tasks_count == 0 %}
    <div class="empty-state">
        <p>It looks like you have no tasks. Start your day with a morning ritual!</p>
        <a href="/calm/ritual/morning" class="ritual-btn">Start Morning Ritual</a>
    </div>
    {% endif %}

    <div class="add-task-section" style="text-align: center; margin-top: 30px;">
        <button class="task-btn task-btn-defer" onclick="openAddTaskModal()">+ Add New Task</button>
    </div>

    <!-- Add Task Modal (simple example, can be expanded) -->
    <div id="add-task-modal" class="task-modal-overlay">
        <div class="task-modal">
            <h3>Add New Task</h3>
            <form hx-post="/calm/tasks" hx-target="#later-count-container" hx-swap="outerHTML" hx-on::after-request="closeAddTaskModal()">
                <label>Title</label>
                <input type="text" name="title" required>
                <label>Description (optional)</label>
                <textarea name="description"></textarea>
                <label>
                    <input type="checkbox" name="is_mit" value="true"> Is this a Most Important Task (MIT)?
                </label>
                <div class="task-modal-actions">
                    <button type="button" class="task-btn task-btn-cancel" onclick="closeAddTaskModal()">Cancel</button>
                    <button type="submit" class="task-btn task-btn-complete">Add Task</button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
    function openAddTaskModal() {
        document.getElementById('add-task-modal').classList.add('open');
    }
    function closeAddTaskModal() {
        document.getElementById('add-task-modal').classList.remove('open');
    }
    document.getElementById('add-task-modal').addEventListener('click', function(e) {
        if (e.target === this) closeAddTaskModal();
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeAddTaskModal();
    });
</script>
{% endblock %}
