{% extends "base.html" %}

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

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 class="mb-4">Why are you feeling this way?</h2>
            <form method="post">
                {% csrf_token %}
                <div class="d-grid gap-3">
                    <button type="submit" name="reason" value=""
                            class="btn btn-outline-secondary btn-lg">
                        No reason
                    </button>
                    {% for reason in reasons %}
                    <button type="submit" name="reason" value="{{ reason.id }}"
                            class="btn btn-outline-secondary btn-lg">
                        {% if reason.title %}{{ reason.title }}{% else %}{{ reason.uuid }}{% endif %}
                        {% if reason.description %}<br><small class="text-muted">{{ reason.description }}</small>{% endif %}
                    </button>
                    {% endfor %}
                </div>
            </form>
            <div class="mt-3">
                <a href="{% url 'moods:checkin' %}?back=2" class="btn btn-link">Back to mood selection</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}