{#
/**
 * Banner
 *
 * Banners are similar to cards, but they are ususally displayed full-width and behave differently when resized.
 *
 * They display full-width and are used to:
 *
 * - display page headers with navigation
 * - highlight and link to important announcements
 * - display videos with content overlays
 *
 * @var string $content The primary content of the banner, often markup.
 * @var string $media Optional media (img, video, or any other CSS replaced element).
 * @var string $heading Main heading title for the banner.
 * @var string $eyebrow_heading A descriptive keyword or phrase placed above the main heading and content.
 * @var string $link_url An optional URL for the banner.
 * @var string $link_text The link text.
 * @var array $icon_data An array of icon data (e.g. `icon`, `title`, `size`, `label`, etc.)
 * @var Drupal\Core\Template\Attribute|array $attributes Attributes (class, data, etc.) for the entire banner.
 * @var Drupal\Core\Template\Attribute|array $content_attributes Attributes for the content region.
 *
 * @union-variation cu-banner--announcement Places the title over the image while the content flows into a second column on wider displays.
 * @union-variation cu-banner--video Display a video component with overlayed content. If the content contains a `play` icon, that icon will control the playback of any video found inside the media section.
 * @union-variation cu-banner--panel Displays the content and the media side-by-side, with the content on the right. Similar to the Card `panel` variation.
 * @union-variation cu-banner--panel-left A variation of `cu-banner--panel` with the content on the left.
 * @union-variation cu-banner--page A simple banner with the content over the media.
 *
 * @todo Fix the announcement variation. Seems to have been lost in the refactoring.
 * @todo Make the default (no variation) display better.
 *
 * @see https://www.figma.com/file/uFwXUY837P752PL8MndgBN/ILR-Design-System?node-id=473%3A2463 Image + Dark Panel/Left/Content (AKA Banner) in Figma
 */
#}
{% set attributes = union_attributes(attributes|default([])) %}
{% set content_attributes = union_attributes(content_attributes|default([])) %}

{# @todo Replace media check here with css ::has() when support is better. #}
<div{{ attributes.addClass([
    'cu-banner',
    media ? 'cu-banner--with-media'
  ]) }}>
  <div{{ content_attributes.addClass(['cu-banner__content']) }}>
    {% if icon_data or eyebrow_heading or heading %}
    {% include '@union/_composite-heading.twig' with {
      icon_data: icon_data,
      eyebrow_heading: eyebrow_heading,
      heading: heading,
      attributes: {
        class: [
          'cu-banner__meta',
          'cu-composite-heading--minimal',
          attributes.hasClass('cu-banner--panel') ? 'cu-composite-heading--left',
          attributes.hasClass('cu-banner--panel') ? 'cu-composite-heading--bold',
        ]
      }
    } only %}
    {% endif %}
    {{ content }}
    {% if link_url %}
    {% include '@union/_button.twig' with {
      text: link_text,
      url: link_url,
      attributes: { 'class': 'cu-banner__link' }
    } only %}
    {% endif %}
  </div>
  {% if media %}
  <div class="cu-banner__media">
    {{ media }}
  </div>
  {% endif %}
</div>