{# 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 ',
      "size": button_size,
      "status": card_button_status
    } only %}

    {% if slider_images %}
      </div>
    {% endif %}

  </div>
</div>
