{#
/**
 * @file localgov_alert_banner.html.twig
 * Default theme implementation to present Alert banner data.
 *
 * This template is used when viewing Alert banner pages.
 *
 *
 * Available variables:
 * - content: A list of content items. Use 'content' to print all content, or
 * - attributes: HTML attributes for the container element.
 * - display_title: Boolean indicating if alert banner title should be displayed
 * - remove_hide_link: Boolean indicating if the link to close the banner should be hidden
 * - type_of_alert: Type of alert banner
 *
 * @see template_preprocess_localgov_alert_banner()
 *
 * @ingroup themeable
 */
#}

{{ attach_library('localgov_alert_banner/alert_banner') }}

{% if not localgov_base_remove_css %}
  {{ attach_library('localgov_base/alert-banner') }}
{% endif %}

{% set has_link = content.link.0 is not empty %}
{% set type_of_alert =  type_of_alert|split('--')[1]|clean_class %}

{% set classes = [
    'js-localgov-alert-banner',
    'localgov-alert-banner',
    'lgd-container',
    type_of_alert ? 'localgov-alert-banner--' ~ type_of_alert,
    is_front ? 'localgov-alert-banner--homepage',
    has_link ? 'localgov-alert-banner--has-link' : 'localgov-alert-banner--no-link'
  ]
%}

<article {{ attributes.addClass(classes) }}>
  <div class="padding-horizontal">
    <div class="localgov-alert-banner__container">

      {# Icon #}
      <div class="localgov-alert-banner__icon localgov-alert-banner__icon--{{ type_of_alert }}">
         {% include 'localgov_base:icon' with {
          theme: 'localgov_base_france',
          icon_path: 'assets/icons',
          icon_name: 'icon--' ~ type_of_alert,
        } %}
      </div>

      {# Main Content #}
      <div class="localgov-alert-banner__inner">
        <div class="localgov-alert-banner__content">
          {% if display_title %}
           <h2 class="localgov-alert-banner__title">
              {{ content.title['#items'].value }}
           </h2>
          {% endif %}

          {% if content.short_description.0['#text'] %}
           <div class="localgov-alert-banner__body">
              {{ content.short_description }}
           </div>
          {% endif %}

          {% if has_link %}
           <div class="localgov-alert-banner--content-link">
              {{ content.link }}
           </div>
          {% endif %}
        </div>
      </div>

      {# Dismiss Button #}
      {% if not remove_hide_link %}
        <div class="localgov-alert-banner__actions">
          <div class="localgov-alert-banner__dismiss">
           <button class="localgov-alert-banner__close js-localgov-alert-banner__close" aria-label="{{ 'Masquer le message'|t }}">
              <span class="visually-hidden">{{ 'Masquer le message'|t }}</span>
              {% include 'localgov_base:icon' with {
                  theme: 'localgov_base_france',
                  icon_path: 'assets/icons',
                  icon_name: 'icon--close',
                }
              %}
           </button>
          </div>
        </div>
      {% endif %}

    </div>
  </div>
</article>
