
{% extends "base.html" %}

{% block title %}Morning Ritual - Timmy Calm{% endblock %}

{% block extra_styles %}
<style>
    .ritual-container { max-width: 700px; margin: 0 auto; padding: 30px; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
    .ritual-header { text-align: center; margin-bottom: 30px; }
    .ritual-title { font-size: 2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; }
    .ritual-subtitle { font-size: 1rem; color: var(--text-dim); line-height: 1.5; }

    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
    .form-group input[type="text"], .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text); font-size: 1rem; }
    .form-group textarea { min-height: 100px; resize: vertical; }
    .form-group input[type="text"]:focus, .form-group textarea:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); }

    .mit-section { border: 1px dashed var(--border); padding: 20px; border-radius: var(--radius-md); margin-top: 25px; background: rgba(124, 58, 237, 0.05); }
    .mit-section h4 { color: var(--purple); margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; }

    .form-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
    .form-actions button { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; border: none; }
    .form-actions .btn-submit { background: var(--green); color: var(--bg-secondary); }
    .form-actions .btn-submit:hover { background: var(--green-dark); }
</style>
{% endblock %}

{% block content %}
<div class="ritual-container">
    <div class="ritual-header">
        <h1 class="ritual-title">Good Morning, Timmy.</h1>
        <p class="ritual-subtitle">Let's set your intentions for a calm and focused day.</p>
    </div>

    <form hx-post="/calm/ritual/morning" hx-swap="outerHTML" hx-target="body">
        <div class="mit-section">
            <h4>Your 1-3 Most Important Tasks (MITs) for today:</h4>
            <div class="form-group">
                <label for="mit1_title">MIT 1</label>
                <input type="text" id="mit1_title" name="mit1_title" placeholder="e.g., Finish report draft">
            </div>
            <div class="form-group">
                <label for="mit2_title">MIT 2 (optional)</label>
                <input type="text" id="mit2_title" name="mit2_title" placeholder="e.g., Prepare for client meeting">
            </div>
            <div class="form-group">
                <label for="mit3_title">MIT 3 (optional)</label>
                <input type="text" id="mit3_title" name="mit3_title" placeholder="e.g., Review team's code">
            </div>
        </div>

        <div class="form-group" style="margin-top: 30px;">
            <label for="other_tasks">Other tasks or intentions (one per line)</label>
            <textarea id="other_tasks" name="other_tasks" placeholder="e.g.,
Reply to emails
Schedule dentist appointment
Research new framework"></textarea>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-submit">Start My Day</button>
        </div>
    </form>
</div>
{% endblock %}
