<div class="initially-hidden-portion collapse" id="tls-bkf-{{ el.id_suffix }}">

  {% include '@tls_booking/form-announce.html.twig' with {'el': el} only %}

  {% include '@tls_booking/form-chips.html.twig' with {'el': el} only %}

  <div class="wrapper">

    <div class="row">
      <div class="col-md-6">
        <div class="outbound form-group">
          <span class="col-label"><i class="fas fa-share"></i> Outbound</span>
          <input type="hidden"
                 value="{{ el.outbound_date }}"
                 name="OUTBOUND_DATE" class="date outdate">
          <input type="hidden"
                 value="Leave After"
                 name="OUTBOUND_ARRIVAL_DEPARTURE_INDICATOR" class="journey_indicator out_journey_indicator">
          <input type="hidden"
                 value="{{ el.outbound_time }}"
                 name="OUTBOUND_TIME" class="time out-time">

          <div class="display-group" data-type="out">

            {% include '@tls_booking/form-calendar-display-group.html.twig' with {
              'date': el.outbound_date,
              'sr_date': el.outbound_sr_date,
              'time': el.outbound_time,
              'title': 'Outbound',
            } only %}

            {% include '@tls_booking/form-desktop-calendar-modal.html.twig' with {
              'el': el,
              'times': el.outbound_times_options,
              'title': 'Outbound',
              'direction': 'outbound',
              'dir': 'out',
            } only %}

          </div> <!-- End outbound display group -->
        </div> <!--  End outbound form group -->
      </div> <!-- End col -->

      <div class="col-md-6">
        <div class="return form-group">
          <div class="fade-content">
            <span class="col-label"><i class="fas fa-reply" aria-hidden="true"></i> Return</span>
            <input type="hidden"
                   value="{{ el.inbound_date }}"
                   name="INBOUND_DATE" class="date retdate">
            <input type="hidden"
                   value="Leave After"
                   name="INBOUND_ARRIVAL_DEPARTURE_INDICATOR" class="journey_indicator ret_journey_indicator">
            <input type="hidden"
                   value="{{ el.inbound_time }}"
                   name="INBOUND_TIME" class="time ret-time">

            <div class="open-return">
              <input
                class="openreturn"
                type="checkbox"
                id="openreturn{{ el.id_suffix }}"
                value="Open Return"
                name="open-return" >
              <label for="openreturn{{ el.id_suffix }}">Open return</label>
            </div>

            <div class="display-group" data-type="return">

              {% include '@tls_booking/form-calendar-display-group.html.twig' with {
                'date': el.inbound_date,
                'sr_date': el.inbound_sr_date,
                'time': el.inbound_time,
                'title': 'Return',
              } only %}

              {% include '@tls_booking/form-desktop-calendar-modal.html.twig' with {
                'el': el,
                'times': el.inbound_times_options,
                'title': 'Return',
                'direction': 'return',
                'dir': 'ret',
              } only %}

            </div> <!-- End return display group -->
          </div>
        </div> <!-- End return form group -->
      </div> <!-- End col -->
    </div> <!--  End row -->

    <div class="passengers form-group">

      <input type="hidden"
             class="adults" value="1"
             name="NUMBER_OF_ADULTS">
      <input type="hidden"
             class="children" value="0"
             name="NUMBER_OF_CHILDREN">
      <input type="hidden"
             class="railcard_1" value="None"
             name="RAIL_CARD_CODE">
      <input type="hidden"
             class="amount_1" value="0"
             name="NUMBER_OF_RAIL_CARDS">
      <input type="hidden"
             class="railcard_2" value="None"
             name="RAIL_CARD_CODE2">
      <input type="hidden"
             class="amount_2" value="0"
             name="NUMBER_OF_RAIL_CARDS2">
      <input type="hidden"
             class="railcard_3" value="None"
             name="RAIL_CARD_CODE3">
      <input type="hidden"
             class="amount_3" value="0"
             name="NUMBER_OF_RAIL_CARDS3">

      {% include '@tls_booking/form-desktop-passengers.html.twig' with {'el': el} only %}

      {% include '@tls_booking/form-mobile-passengers.html.twig' with {'el': el} only %}

    </div> <!-- End passengers form group -->

    <div class="extra-section" style="display: none;">

      <div class="row">

        {% include '@tls_booking/form-flexipass.html.twig' with {'el': el} only %}

        {% include '@tls_booking/form-icheck-row.html.twig' with {
          'title' : 'Type',
          'type_label' : 'Passenger',
          'type': 'passenger',
          'name': 'passenger',
          'value_1': 'adult',
          'value_2': 'child',
          'label_1': 'Adult',
          'label_2': 'Child',
          'checked_1' : 'checked',
          'checked_2' : el.trainline_season_child_enabled,
        } only %}

        {% include '@tls_booking/form-icheck-row.html.twig' with {
          'title' : 'Class',
          'type_label' : 'Ticket',
          'type': 'class',
          'name': 'ticketclass',
          'value_1': 'standard',
          'value_2': 'firstclass',
          'label_1': 'Standard',
          'label_2': 'First',
          'checked_1' : 'checked',
          'checked_2' : '',
        } only %}

      </div>

      {% if el.show_season_railcard_options %}
        <div class="form-group-seasons-railcard seasons">
          <label for="seasons_railcard">Railcard</label>
          <div class="input-group">
            <select id="seasons_railcard" class="railcard" data-width="100%">
              {% for k, v in el.railcard_options_season %}
                <option value="{{ k }}" {{ loop.first ? 'selected' }}>{{ v }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}

    </div> <!-- End extra section -->

    {# Form promotion section #}
    {% include '@tls_booking/form-promo.html.twig' with {'el': el} only %}

    {% if el.filter_by_toc %}
      <div class="our-trains-only">
        <input type="hidden" name="FILTER_BY_TOC" value="True" disabled>
      </div>
    {% endif %}
    <input type="hidden" class="best-orig" name="orig">
    <input type="hidden" class="best-dest" name="dest">
    <input type="hidden" class="best-out" name="out">
    <input type="hidden" class="best-rtn" name="rtn">
    <input type="hidden" name="JOURNEY_TYPE" class="journey_type" value="Return">

  </div> <!--  End wrapper -->

  {# Form footer #}
  {% include '@tls_booking/form-footer.html.twig' with {'el': el} only %}

</div>
