{% extends "base.html" %}

{% block page_title %}Check-in - Select your mood{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 class="mb-4">Select your mood</h2>
            <form method="post">
                {% csrf_token %}
                <div class="d-grid gap-3">
                    {% for group_type, group_moods in mood_groups %}
                        <div class="text-center mt-3 mb-2">
                            <h5>{{ group_type|title }}</h5>
                        </div>
                        {% for mood in group_moods %}
                        <button type="submit" name="mood" value="{{ mood.id }}"
                                class="btn btn-outline-secondary btn-lg">
                            {% if mood.title %}{{ mood.title }}{% else %}{{ mood.uuid }}{% endif %}
                            {% if mood.description %}<br><small class="text-muted">{{ mood.description }}</small>{% endif %}
                        </button>
                        {% endfor %}
                    {% endfor %}
                </div>
            </form>
            <div class="mt-3">
                <a href="{% url 'moods:checkin' %}?back=1" class="btn btn-link">Back to quality selection</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}