{% load i18n %}

{% if user.is_authenticated %}
    <div class="card">
        <div class="card-header bg-dark-subtle">
            <div class="d-lg-none btn" data-bs-toggle="collapse"
                 data-bs-target="#sidebar-card" aria-controls="sidebar-card" aria-expanded="false"
                 aria-label="Toggle information sidebar">
                <h3 class="card-title">
                    {% trans "Informations" %}
                    <span class="d-lg-none">
                        <span class="badge text-small bg-danger">
                            <i class="fa fa-warning"></i>
                            {{ user.registration.important_informations|length }}
                        </span>
                        <span class="navbar-toggler-icon"></span>
                    </span>
                </h3>
            </div>
            <div class="d-none d-lg-block">
                <h3 class="card-title">{% trans "Informations" %}</h3>
            </div>
        </div>

        <div id="sidebar-card" class="collapse d-lg-block">
            <div class="card-body">
                {% for information in user.registration.important_informations %}
                    <div class="card my-2">
                        <div class="card-header bg-dark-subtle">
                            <h5 class="card-title">{{ information.title }}</h5>
                        </div>
                        <div class="card-body bg-{{ information.type }}-subtle">
                            {{ information.content|safe }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}