{#
Global messages template

@sw-package framework

https://getbootstrap.com/docs/5.2/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
    } %}

*IconCache:
IconCache is used by system settings. To avoid using the icon cache regardless of the system settings (e.g. for an icon rendered in an invisible area like <noscript>), set "iconCache" to false:

    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
        type:"primary",
        content:"Primary Lorem ipsum dolor",
        iconCache: 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"
         aria-live="polite"
         class="alert {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible fade show{% endif %}{% if icon != 'error' %} d-flex align-items-center{% endif %}">

        {% block utilities_alert_icon %}
            {% if icon != 'false' %}
                {% set iconCacheSystem = config('core.storefrontSettings.iconCache') %}
                {% if iconCache === false and iconCacheSystem === true %}
                    {{ sw_icon_cache_disable() }}
                {% endif %}
                {% 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 %}
                {% if iconCache == false and iconCacheSystem === true %}
                    {{ sw_icon_cache_enable() }}
                {% endif %}
            {% endif %}
        {% endblock %}

        {% block utilities_alert_content_container %}
            <div class="alert-content-container">
                {% block utilities_alert_heading %}
                    {% if heading %}
                        <div class="alert-heading h5">
                            {{ heading }}
                        </div>
                    {% endif %}
                {% endblock %}

                {% block utilities_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 %}
                {% endblock %}

                {% block utilities_alert_dismissible %}
                    {% if dismissible %}
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="alert"
                                aria-label="{{ 'global.default.close'|trans|striptags }}">
                            <span aria-hidden="true"></span>
                        </button>
                    {% endif %}
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}