Training

{% from 'macros/slat.twig' import slat %}
{% extends '_layouts/default' %}

{% block header %}
  {% if entry.parent %}
    {% include '@breadcrumb' with {
      breadcrumb: {
        title: entry.parent.title,
        link: entry.parent.url
      }
    } %}
  {% endif %}

  {{
    include(
      '@training-header',
      {
        title: entry.altTitle
          ? {
            lines: entry.altTitle|split('\n')
          }
          : {
            text: entry.title
          },
        content: {
          standfirst: {
            text: entry.standfirst|markdown
          },
          metadata: [
            {
              label: 'Duration',
              value: entry.trainingDuration
            },
            {
              label: 'Training type',
              value: entry.trainingType[0].title
            },
            {
              label: 'Location',
              value: entry.trainingLocation
            }
          ]
        },
        pricing: {
          eyebrow: entry.pricingCardEyebrow ? entry.pricingCardEyebrow,
          price: entry.pricingCardPrice ? entry.pricingCardPrice,
          moustache: entry.pricingCardMoustache ? entry.pricingCardMoustache,
          text: entry.pricingCardText ? entry.pricingCardText,
          cta_text: entry.pricingCardCtaText ? entry.pricingCardCtaText
        }
      }
    )
  }}
{% endblock %}

{% block main %}
  {% if entry.media|length > 0 %}
    {% set content %}
      <figure class="flow--s">
        {% set block = entry.media[0] %}
        {% if block.type == 'video' %}
          {% set video = block.video.one() %}
          {% set poster = content.videoPoster.one() ?? null %}
          {% if video %}
            <div style="position: relative; height: 0; padding-bottom: 56.25%;">
              <video style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;" muted controls playsinline type="video/mp4" src="{{ video ? video.url }}" poster="{{ poster ? poster.url }}" />
            </div>
          {% endif %}
        {% else %}
          {% set image = block.image.one() %}
          {% if image %}
            {% include '@srcset' with {
              imageList: [
                {
                  src: image ? image.getUrl('splash300'),
                  size: '300w'
                },
                {
                  src: image ? image.getUrl('splash600'),
                  size: '600w'
                },
                {
                  src: image ? image.getUrl('splash1000'),
                  size: '1000w'
                },
                {
                  src: image ? image.getUrl('splash1500'),
                  size: '1500w'
                },
                {
                  src: image ? image.getUrl('splash2000'),
                  size: '2000w'
                }
              ],
              alt: image.altText ? : image.title
            } only %}
          {% endif %}
        {% endif %}
        {% if block.caption|length %}
          <figcaption class="caption">{{ block.caption }}</figcaption>
        {% endif %}
      </figure>
    {% endset %}

    {{ slat(content, false) }}
  {% endif %}

  {% include '_cms-slats/page-builder' with {
    blocks: entry.pageBuilder.all()
  } %}

  {% if entry.relatedTrainingCourses|length > 0 %}
    {% set content %}
      <div class="flow">
        <div class="body">
          <h2>Related training courses</h2>
        </div>
        <ul class="grid grid--of-two" role="list">
          {% for course in entry.relatedTrainingCourses.all() %}
            {% include '@service-card' with {
              tag: 'li',
              title: course.title,
              description: course.standfirst ? : '',
              link: course.uri
            } %}
          {% endfor %}
        </ul>
        {% include '@twi' with {
          icon: 'arrow-right',
          text: 'All training courses',
          link: url('services/training-and-workshops')
        } %}
      </div>
    {% endset %}

    {{ slat(content) }}
  {% endif %}

  {% if entry.events|length > 0 %}
    {% set events = [] %}
    {% for event in entry.events.all() %}
      {% set image = event.thumbnail.one() %}
      {% set events =
        events|merge(
          [
            {
              title: event.title,
              excerpt: event.excerpt,
              status: event.eventTicketStatus.value
                ? event.eventTicketStatus.label,
              link: event.pageLink,
              image: image
                ? {
                  src: image.getUrl('splash600'),
                  alt: image.altText ? : event.title
                }
            }
          ]
        )
      %}
    {% endfor %}

    {% set content %}
      <div class="flow">
        <div class="body">
          <h2>{{ entry.sectionTitle }}</h2>
        </div>
        <div class="grid grid--of-two">
          {% for event in events %}
            {% include '@event-card' with event only %}
          {% endfor %}
        </div>
      </div>
    {% endset %}

    {{ slat(content, false, "t") }}
  {% endif %}
{% endblock %}