{% extends "base.html" %}
{% block title %}{{ action }} Daily Log{% endblock %}

{% block content %}
<article class="daily-log-form" aria-labelledby="form-heading">
    <header class="daily-log-form__header">
        <h1 id="form-heading">{{ action }} Daily Log</h1>
    </header>

    <form class="daily-log-form__form" method="POST" action="{{ url_for('main.log_new') }}" aria-label="Daily log form">
        <div class="form-group">
            <label for="date">Date</label>
            <input type="date" id="date" name="date" value="{{ log.date.isoformat() if log else '' }}" required>
        </div>

        <div class="form-group">
            <label for="prompt">Daily Prompt</label>
            <textarea id="prompt" name="prompt" rows="3" placeholder="What's on your mind today?">{{ log.prompt or '' }}</textarea>
        </div>

        <div class="form-group">
            <label for="notes">Notes</label>
            <textarea id="notes" name="notes" rows="4" placeholder="Jot down your thoughts...">{{ log.notes or '' }}</textarea>
        </div>

        <div class="form-group">
            <label>Gratitude (3 things)</label>
            <div class="gratitude-list">
                {% if log %}
                    {% set grat_list = log.gratitude_list %}
                    <input type="text" name="gratitude_0" value="{{ grat_list[0] if grat_list else '' }}" placeholder="I am grateful for...">
                    <input type="text" name="gratitude_1" value="{{ grat_list[1] if grat_list | length > 1 else '' }}" placeholder="I am grateful for...">
                    <input type="text" name="gratitude_2" value="{{ grat_list[2] if grat_list | length > 2 else '' }}" placeholder="I am grateful for...">
                {% else %}
                    <input type="text" name="gratitude_0" placeholder="I am grateful for...">
                    <input type="text" name="gratitude_1" placeholder="I am grateful for...">
                    <input type="text" name="gratitude_2" placeholder="I am grateful for...">
                {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label>Sleep</label>
            <div class="sleep-row">
                <div>
                    <label for="bedtime">Bedtime</label>
                    <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime if log else '' }}" placeholder="22:30">
                </div>
                <div>
                    <label for="wake_time">Wake Time</label>
                    <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time if log else '' }}" placeholder="06:45">
                </div>
            </div>
            <div class="form-group">
                <label for="sleep_quality">Sleep Quality</label>
                <select id="sleep_quality" name="sleep_quality">
                    <option value="">— Select —</option>
                    <option value="poor" {% if log and log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
                    <option value="fair" {% if log and log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
                    <option value="good" {% if log and log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
                    <option value="excellent" {% if log and log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="mood">Mood</label>
            <input type="text" id="mood" name="mood" value="{{ log.mood if log else '' }}" placeholder="How are you feeling?">
        </div>

        <footer class="daily-log-form__footer">
            <button type="submit" class="btn-primary">{{ 'Save' if action == 'Edit' else 'Create' }} Log</button>
            <a href="{{ url_for('main.log_list') }}" class="btn-secondary">Cancel</a>
        </footer>
    </form>
</article>
{% endblock %}