{{ attach_library('goizueta_theme/event-card') }}
{% import '@components/icons/icons.twig' as icons %}

{# Preserve the Drupal attributes if they're available. #}
{# Pass the value of `classes` as modifier classes #}
{%
  set attributes = attributes ? attributes.addClass('event-card' ~ event_card.classes|default('')) : ' class="event-card' ~ event_card.classes|default('') ~ '"'
%}

{# If we don't use |raw twig.js tries to escape the quotes on the class attribute. #}
<article{{ attributes|raw }}>
  <div class="event-card__header">
    <div class="event-card__date-container">
      <div class="event-card__date--inner">
        <div class="event-card__date--left">
          <span class="event-card__date--weekday">{{ event_card.full_date.weekday }}</span>
          {% if event_card.full_date.month_long %}
            <span class="event-card__date--month">
              {{ event_card.full_date.month_long }}
            </span>
          {% elseif event_card.full_date.month_short %}
            <span class="event-card__date--month">
              {{ event_card.full_date.month_short }}
            </span>
          {% endif %}
        </div>
        <div class="event-card__date--right">
          <span class="event-card__date--day">{{ event_card.full_date.day }}</span>
        </div>
      </div>
    </div>
    <div class="event-card__main">
      {# Allows for optional eyebrow on some event variations. #}
      {% block event_eyebrow %}
        {% if event_card.eyebrow %}
          {%
            include '@components/eyebrow/eyebrow.twig' with {
              "text": event_card.eyebrow.text,
              "classes": event_card.eyebrow.classes
            }
          %}
        {% endif %}
      {% endblock %}

      {{ title_prefix }}
      {%
        include '@components/heading/heading.twig' with {
          "heading": {
            "title_light": event_card.title.title_light,
            "url": event_card.title.url,
            "heading_level": event_card.title.heading_level,
            "classes": 'event-card__title'
          }
        } only
      %}
      {{ title_suffix }}

      {% block time_location_register %}
        {# Event's meta data (location, time, etc.) #}
        {% if event_card.time or event_card.location or event_card.register %}
          <div class="event-section event__meta">
            {% if event_card.time %}
              <div class="event__meta--item">
                <span class="event__meta--icon">
                  {{ icons.get('clock', 'icon--time') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Time'|t }}</span>
                  <span>{{ event_card.time }}</span>
                </div>
              </div>
            {% endif %}
            {% if event_card.location %}
              <div href="#" class="event__meta--item">
                <span class="event__meta--icon">
                  {{ icons.get('location-pin', 'icon--location') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Location'|t }}</span>
                  <span>{{ event_card.location }}</span>
                </div>
              </div>
            {% endif %}
            {% if event_card.register %}
              <a class="event__meta--item" href="{{ event_card.register }}">
                <span class="event__meta--icon">
                  {{ icons.get('plus-one', 'icon--plus-one') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Register'|t }}</span>
                </div>
              </a>
            {% endif %}
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>

  {% if event_card.details or event_card.event_actions %}
    <div class="event-card__content">

      <div class="event__body">

        {# Holds event body content descriving event. #}
        {% block event_details %}
          {% if event_card.details %}
            <div class="event-section event__details">
              {{ event_card.details }}
            </div>
          {% endif %}
        {% endblock %}

        {# Holds event categories such as topic, department and school. #}
        {% block event_categorization %}
        {% endblock %}

        {# Holds action links such as register, add to calendar
        and more event actions. #}
        {% block event_actions %}
          {% if event_card.event_actions %}
            <div class="event-section event__actions">
              {%
                include '@components/event-actions/event-actions.twig' with {
                  "event_actions": event_card.event_actions
                } only
              %}
            </div>
          {% endif %}
        {% endblock %}

      </div>
      <button class="event-card__toggle-btn">
        <span class="toggle--details">
          {{ 'Details'|t }}
        </span>
        <span class="toggle--collapse">
          {{ 'Collapse'|t }}
        </span>
        <span class="toggle--icon">
          {% include '@components/icons/assets/arrow-down-blue.svg.twig' %}
        </span>
      </button>
    </div>
  {% endif %}
</article>