{# TEMPLATE #}
<div class="col-md-4 item-content">
  <div class="ticket-body">

    <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>

    {# Desktop button #}
    {% set button_attributes = create_attribute()
      .setAttribute('aria-label', tickets[x].desktop_button['text'] ~ ' on desktop')
    %}
    {% 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": true,
      "class": 'best-fares desktop-button buy-tickets-btn',
      "size": button_size,
      "status": card_button_status
    } only %}

    {# 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') %}
    {% include "@atoms/form/button/button.twig" with {
      "attributes": mobile_attributes,
      "tag": "a",
      "text": "Book now",
      "url": tickets[x].mobile_button['url'],
      "expanded": true,
      "class": 'best-fares mobile-button buy-tickets-btn mbvis',
      "size": button_size,
      "status": card_button_status,
    } only %}

  </div>
</div>
