{% extends 'base.html.j2' %}
{% set active_page = "calendar" %}

{% block content %}
<div class="container mt-3">

    <div class="row mb-3">
        <div class="col p-0">
            <div class="ratio" style="--bs-aspect-ratio: 50%;">
                <img class='img-fluid' src="{{ img_src }}" id="calendar_img" />
            </div>
            {#<div class="text-end pt-1 small fst-italic">
                <small id="img_credits">{% if img_credits %}Foto: {{ img_credits }}{% endif %}</small>
            </div>#}
        </div>
    </div>

    <div class="row mb-3 d-flex align-items-center">
        <div class="col text-start">
            {% set prevmonth = ((month - 1 + 12 - 1) % 12) + 1 %}
            {% set nextmonth = ((month + 1 - 1) % 12) + 1 %}
            <a class="monthlink" href="{{ url_for('calendar')}}?month={{ prevmonth }}"><i
                    class="bi bi-caret-left-fill"></i>
            </a>
        </div>
        <div class="col">
            <h1 class="display-5 text-center">{{ month | to_month | capitalize }}</h1>
        </div>
        <div class="col text-end">
            <a class="monthlink" href="{{ url_for('calendar')}}?month={{ nextmonth }}"><i
                    class="bi bi-caret-right-fill"></i></a>
        </div>
    </div>

    <div class="row">
        {% for col in columns %}
        <div class="col-md-4">
            {% for birthdate in col %}
            <p style="display: block; border-bottom:1px solid black;">
                <span class='me-1'>{{ birthdate.day }}.</span> {{
                birthdate.bucket | join(",
                ") }}
                {% if birthdate.day == today and birthdate.bucket %}<span class='ms-1'>🎉</span>{% endif %}
            </p>
            {% endfor %}
        </div>
        {% endfor %}
    </div>


</div>
{% endblock %}