{% load icon %}
{% if messages %}
    <div class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end static z-10">
        {% for message in messages %}
            <div
                    x-data="alertComponent()"
                    x-init="init()"
                    x-show="open"
                    x-transition:enter="transform ease-out duration-300 transition"
                    x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
                    x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
                    x-transition:leave="transition ease-in duration-100"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden absolute bottom-0 mb-4">
                <div class="p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                                {% icon "check-circle" "h-6 w-6 text-red-400" %}
                            {% else %}
                                {% icon "check-circle" "h-6 w-6 text-green-400" %}
                            {% endif %}
                        </div>
                        <div class="ml-3 w-0 flex-1 pt-0.5">
                            <p class="text-sm font-medium text-gray-900">
                                {{ message.message.0 }}
                            </p>
                            <p class="mt-1 text-sm text-gray-500">
                                {{ message.message.1 }}
                            </p>
                        </div>
                        <div class="ml-4 flex-shrink-0 flex">
                            <button @click="open=false" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pc-500">
                                <span class="sr-only">Close</span>
                                {% icon "x" "h-5 w-5" "hs" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <script>
        function alertComponent() {
            return {
                open: true,
                init: function() {
                    setInterval(() => {this.open = false}, 15000)
                },
            }
        }
    </script>
{% endif %}