{% sw_extends '@Storefront/storefront/utilities/alert.html.twig' %}
{#
Global messages template

https://getbootstrap.com/docs/4.3/components/alerts/

*Type:
The template provides an easy way to display messages in the storefront. The following types are supported:

* primary
* secondary
* danger (red)
* success (green)
* warning (yellow)
* info (blue)
* light (white)
* dark (dark gray)

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor"
    } %}

*Icons:
Icons are shown by default. To hide the icon within the alert, set the value of "icon" to false:

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor",
        icon: false
    } %}

*Message Content:
The component requires the parameters ```content``` or ```list``` to display a message. If no ```type``` is defined it
will use the fallback option (success).

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor"
    } %}

*Message List:
If you need to display a bunch of messages (for example error messages in the registration), you can pass an array
of messages to the template using the parameter ```list```:

     {% set list1 = [
        'Error message 1',
        'Error message 2',
        'Error message 3'
    ] %}

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"secondary",
        list: list1
    } %}

*Heading:
To display a heading, use "heading".

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor",
        heading: "Test Heading"
    } %}

*Dismissible Button:
To display a dismissible button set the value of "dismissible" to true.

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor",
        dismissible: true
    } %}

#}

{% block utilities_alert %}
    <div role="alert" x-data="{ show: true }" x-show="show" class="w-full bg-gray-100 my-2 rounded-r-md px-6 border-l-4 -ml-4 {% if type %}border-sw-{{ type }}{% endif %}{% if dismissible %} opacity-0 opacity-100 block{% endif %}{% if icon != "error" %} alert-has-icon{% endif %}">
        <div class="flex items-center py-4">
            {% block utilities_alert_icon %}
                {% if icon != "false" %}
                    {% if type == "danger" %}
                        {% sw_icon 'blocked' %}
                    {% elseif type == "warning" %}
                        {% sw_icon 'warning' %}
                    {% elseif type == "info" %}
                        {% sw_icon 'info' %}
                    {% elseif type == "success" %}
                        {% sw_icon 'checkmark-circle' %}
                    {% else %}
                        {% sw_icon 'alert' %}
                    {% endif %}
                {% endif %}
            {% endblock %}
            {% block utilities_alert_content_container %}
                <div class="ml-5">
                    {% block utilities_alert_heading %}
                        {% if heading %}
                            <div class="h5">
                                {{ heading }}
                            </div>
                        {% endif %}
                    {% endblock %}
                    {% block utilities_alert_content %}
                        <div class="alert-content">
                            {% if list|length > 1 %}
                                <ul class="alert-list">
                                    {% for entry in list %}
                                        <li>{{ entry|sw_sanitize }}</li>
                                    {% endfor %}
                                </ul>
                            {% elseif list|length == 1 %}
                                {% for entry in list %}
                                    {{ entry|sw_sanitize }}
                                {% endfor %}
                            {% else %}
                                {{ content|sw_sanitize }}
                            {% endif %}
                        </div>
                    {% endblock %}
                </div>
                {% block utilities_alert_dismissible %}
                    {% if dismissible %}
                        <div>
                            <button type="button" x-on:click="show = !show" class=" outline-none">
                                <span class="text-2xl">&times;</span>
                            </button>
                        </div>
                    {% endif %}
                {% endblock %}
            {% endblock %}
        </div>
    </div>
{% endblock %}