<div class="rounded-md bg-blue-50 p-4" x-data="{}">
    <div class="flex">
        <div class="flex-shrink-0">
            <span class="h-5 w-5 text-blue-400 block">
                {% include '@FerienpassCore/Icons/information-circle-contrast.svg.twig' %}
            </span>
        </div>
        <div class="ml-3 flex-1">
            {% set _headline = block('headline') %}
            {% if _headline is not empty %}
                <h3 class="text-sm leading-5 font-medium text-blue-800">
                    {% block headline %}{{ headline|default }}{% endblock %}
                </h3>
            {% endif %}
            <p class="{% if _headline is not empty %}mt-2 {% endif %}text-sm leading-5 text-blue-700">
                {% block content %}{{ message|raw }}{% endblock %}
            </p>
        </div>
        {% if dismissable|default %}
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button
                            @click="$el.classList.add('hidden')"
                            class="inline-flex rounded-md p-1.5 text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 transition ease-in-out duration-150">
                        <span class="h-5 w-5 block">
                            {% include '@FerienpassCore/Icons/x-contrast.svg.twig' %}
                        </span>
                    </button>
                </div>
            </div>
        {% endif %}
    </div>
</div>