{# TEMPLATE #}
<div class="col-md-{{ (12 / cards_per_slide) | round(1, 'floor')}} item-content"{% if slider_images %} data-card-number="{{ x }}"{% endif %}>
  <div class="ticket-body">
    {% if slider_images %}
      {% if tickets[x].image %}
        {{ tickets[x].image }}
      {% endif %}
      <div class="text-content">
    {% endif %}
    <div class="ticket-top">
      <div class="ticket-from">
        <span>{{ direction }}</span>
        <strong>{{ tickets[x].title }}</strong>
      </div>

      <div class="fare">
        <span class="price">£{{ tickets[x].price|number_format(2, '.', ',') }}</span>
        <span>{{ tickets[x].direction }}</span>
      </div>
    </div>

    {# Desktop button #}
    {% set button_attributes = create_attribute()
      .setAttribute('aria-label', tickets[x].desktop_button['text'] ~ ' on desktop')
      .setAttribute('role', 'button')
    %}
    {% for key, value in tickets[x].desktop_button['data'] %}
      {% set button_attributes = button_attributes.setAttribute(key, value) %}
    {% endfor %}
    {% set button_text %}
      <span aria-hidden="true">Book now</span>
      <span class="sr-only">{{ tickets[x].desktop_button['text'] }}</span>
    {% endset %}
    {% include "@atoms/form/button/button.twig" with {
      "attributes": button_attributes,
      "tag": "a",
      "text": button_text,
      "url": '#',
      "expanded": not slider_images,
      "class": 'best-fares buy-tickets-btn dtb ' ~ (add_mobile_button ? 'desktop-button' : ''),
      "size": button_size,
      "status": card_button_status
    } only %}

    {# Mobile button #}
    {% if add_mobile_button %}
      {% set mobile_attributes = create_attribute()
        .setAttribute('aria-label', tickets[x].desktop_button['text'] ~ ' on mobile')
      %}
      {% for key, value in tickets[x].mobile_button['data'] %}
        {% set mobile_attributes = mobile_attributes.setAttribute(key, value) %}
      {% endfor %}
      {% set mobile_attributes = mobile_attributes.setAttribute('target', '_blank') %}
      {% set mobile_attributes = mobile_attributes.setAttribute('rel', 'noopener') %}
      {% set mobile_attributes = mobile_attributes.setAttribute('role', 'button') %}
      {% include "@atoms/form/button/button.twig" with {
        "attributes": mobile_attributes,
        "tag": "a",
        "text": "Book now",
        "url": tickets[x].mobile_button['url'],
        "expanded": not slider_images,
        "class": 'best-fares buy-tickets-btn mbb mobile-button',
        "size": button_size,
        "status": card_button_status,
      } only %}
    {% endif %}
    {% if slider_images %}
      </div>
    {% endif %}

  </div>
</div>
