{#
/**
 * @file
 * Card Component. Default is a vertical card with an image above text content.
 *
 * Available variants:
 *   - .su-card--horizontal: Media field and text content are side by side.
 *   - .su-card--link: Whole card is a link with no button or call to action link.
 *   - .su-card--minimal: No background, drop shadow and space around. Do not use with the .su-card--link class.
 *   - .su-card--icon: An image icon above text content.
 *   - .su-card--video: A video above text content.
 *
 * Available variables:
 * - attributes: Additional HTML attributes not already provided.
 * - modifier_class: Additional CSS classes to change look and behavior.
 * - card_headline: Main headind text for the card.
 * - card_allow_headline_link: Boolean. If set to true, headline links to card_link.
 * - card_super_headline: Text super headline. Often used for metadata such as category.
 * - card_body: An open variable for anything including HTML. Generally this would be for WYSIWYG editor contents.
 * - card_link: The href value for the card. A single card is only allowed to link to one URL.
 * - card_cta_attributes: Any html attributes on the link that need to be added. For example: rel='noopener', target='_blank'.
 *     This acts as the attributes for the link button and headline link as well.
 * - card_cta_label: The clickable text for the CTA link
 * - card_button_label: The text label of the button component.
 * - card_icon_font_class: If using icon font, e.g., FontAwesome, the class(es) of the icon including modifier classes,
  e.g. 'fas fa-globe fa-2x', 'far fa-thumbs-up fa-rotate-90'
 * - card_media_image_src: The src link to the image file.
 * - card_media_image_srcset: The srcset of the image if exists.
 * - card_media_icon_image_src: The src link to the icon image file.
 * - card_media_video_src: The src link to the video file.
 * - card_media_video_poster: Optional preview image of the video.
 * - card_media_fallback_content: Fallback content to display when browser doesn't support video or audio format.
 * - card_allow_media_link: Boolean. If set to true, media element (image or self-hosted video) links to card_link.
 * - card_media_type: Type of the media file, e.g. mp4, webm, quicktime (self-hosted video only).
 * - card_media_custom: An open field for the full HTML element of the media content, e.g., an embedded YouTube iframe.
 * - card_media_modifier_class: Additional CSS classes to change look and behavior of the media media element.
 * - card_media_attributes: Additional HTML attributes for the media element not already provided.
 * - card_media_wrapper_modifier_class: Additional CSS classes to change look and behavior of the media wrapper, e.g. "su-aspect-ratio" to provide aspect ratio constraint.
 * - card_media_content_attributes: Additional HTML attributes for the media content, e.g., for <video> - controls, autoplay; for <img> - sizes (when srcset is provided), alt, width, height.
 */
#}

{#
  Template Include Paths
  Override these if you want to include a different template.
#}
{%- if template_path_link is empty -%}
  {%- set template_path_link = "@decanter/components/link/link.twig" -%}
{%- endif -%}

{%- if template_path_media is empty -%}
  {%- set template_path_media = "@decanter/components/media/media.twig" -%}
{%- endif -%}

{# For variant where whole card is a link, suppress all other links within the component #}
{%- if "su-card--link" in modifier_class -%}
  {%- set allow_links = false -%}
{%- else -%}
  {%- set allow_links = true -%}
  {% if card_allow_media_link == true %}
    {%- set card_media_link = card_link -%}
  {%- endif -%}
{%- endif -%}

<article {{ attributes }} class="su-card {{ modifier_class }}">
  {# For variant where whole card is a link, add an <a> within the outer wrapper <div> #}
  {%- if allow_links == false %}
    <a href="{{ card_link }}" {{ card_cta_attributes }}>
  {%- endif -%}

  {% block block_card_media %}
    {# We use the media component here except for the two variants with icons in the media field. #}

    {% if 'su-card--video' in modifier_class %}
      {# Support for cards with a self-hosted video in the media field #}
      {% if card_media_video_src is not empty %}
        {% include template_path_media with
          {
            "modifier_class": card_media_modifier_class ~ ' ' ~ 'su-media--video su-card__media',
            "attributes": card_media_attributes,
            "media_link": card_media_link,
            "media_link_attributes": card_cta_attributes ~ ' ' ~ "tabindex='-1'",
            "media_video_src": card_media_video_src,
            "media_wrapper_modifier_class": card_media_wrapper_modifier_class,
            "media_type": card_media_type,
            "media_content_attributes": card_media_content_attributes
          }
          only
        %}
      {% endif %}
    {% elseif 'su-card--embed' in modifier_class %}
      {# Support for cards with an embedded media element, e.g., YouTube or Vimeo videos #}
      {% if card_media_custom is not empty %}
        {% include template_path_media with
          {
            "modifier_class": card_media_modifier_class ~ ' ' ~ 'su-card__media',
            "attributes": card_media_attributes,
            "media_wrapper_modifier_class": card_media_wrapper_modifier_class,
            "media_custom": card_media_custom
          }
          only
        %}
      {% endif %}
    {%- elseif 'su-card--icon-font' in modifier_class -%}
      {# Support for icon font, e.g., FontAwesome #}
      {% if card_icon_font_class is not empty %}
        <span {{ card_media_attributes }} class="{{ card_icon_font_class }}" aria-hidden="true"></span>
      {% endif %}
    {%- elseif 'su-card--icon' in modifier_class -%}
      {# Support for small images such as icons or avatars; use card_media_icon_image_src if provided, if not, use card_media_image_src. #}
      {%- if card_media_icon_image_src is not empty %}
        <img {{ card_media_attributes|default("aria-hidden='true'") }} src="{{ card_media_icon_image_src }}">
      {%- elseif card_media_image_src is not empty %}
        <img {{ card_media_attributes|default("aria-hidden='true'") }} src="{{ card_media_image_src }}">
      {%- endif -%}
    {% else %}
      {# Default card with optional image in media field #}
      {%- if card_media_image_src is not empty -%}
        {% include template_path_media with
          {
            "modifier_class": card_media_modifier_class ~ ' ' ~ 'su-media--image su-card__media',
            "attributes": card_media_attributes,
            "media_wrapper_modifier_class": card_media_wrapper_modifier_class,
            "media_link": card_media_link,
            "media_link_attributes": card_cta_attributes ~ ' ' ~ "tabindex='-1'",
            "media_image_src": card_media_image_src,
            "media_image_srcset": card_media_image_srcset,
            "media_content_attributes": card_media_content_attributes
          }
          only
        %}
      {%- endif -%}
    {% endif %}
  {% endblock block_card_media -%}

  <section class="su-card__contents">
    {# Card Super Headline #}
    {%- block block_card_super_headline %}
      {% if card_super_headline is not empty %}
        <span>{{ card_super_headline }}</span>
      {% endif -%}
    {% endblock -%}

    {# Card Headline #}
    {%- block block_card_headline  %}
      {%- if card_headline is not empty %}
        <h2>
          {%- if card_allow_headline_link and allow_links -%}
            <a href="{{ card_link }}" {{ card_cta_attributes }}>
          {%- endif -%}
          {{- card_headline -}}
          {% if card_allow_headline_link and allow_links -%}
            </a>
          {%- endif -%}
        </h2>
      {% endif -%}
    {% endblock -%}

    {%- block block_card_body %}
      {# An open field for body content #}
      {{ card_body }}
    {% endblock -%}

    {# Block for CTA elements, e.g., link, button #}
    {%- block block_card_cta %}
      {# Card CTA Link #}
      {%- if card_cta_label is not empty and allow_links %}
        {%- include template_path_link with
          {
            "link_href": card_link,
            "link_content": card_cta_label,
            "attributes": card_cta_attributes,
            "modifier_class": "su-card__link su-link--action"
          }
          only
        -%}
      {% endif -%}

      {# Big ol link button. Adds a BEM class for targeting. #}
      {%- if card_button_label is not empty and allow_links %}
        <div class="su-card__button">
          {%- include template_path_link with
            {
              "link_href": card_link,
              "link_content": card_button_label,
              "attributes": card_cta_attributes,
              "modifier_class": "su-button"
            }
            only
          -%}
        </div>
      {% endif -%}
    {% endblock -%}
  </section>{# end of .su-card__contents #}
  {%- if allow_links == false %}
    </a>
  {%- endif -%}
</article>
