<div class="modal-contents" style="display: none;">

  <h2 id="{{ direction }}date{{ el.id_suffix }}" class="header">
    <i class="fas fa-calendar-alt" aria-hidden="true"></i> {{ title }} date
  </h2>

  <div aria-controls="{{ direction }}_datepicker_status_{{ el.id_suffix }}" class="form-group datepicker" data-numberofmonths="2" data-type="{{ dir }}date"></div>
  <span id="{{ direction }}_datepicker_status_{{ el.id_suffix }}" role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>

  <div class="buttons desktop-only form-group-no-pad">
    <button type="button" class="btn btn-outline-default btn-sm today" aria-label="Select today for {{ direction }} journey">Today</button>
    <button type="button" class="btn btn-outline-default btn-sm tomorrow" aria-label="Select tomorrow for {{ direction }} journey">Tomorrow</button>
  </div>

  <hr class="desktop-only">

  <h2>
    <i class="fas fa-clock" aria-hidden="true"></i> {{ title }} time
  </h2>

  <div class="row">
    <div class="col-md-3 form-group journey-type no-bottom-margin">
      <label for="{{ dir }}_journey_indicator_modal{{ el.id_suffix }}" class="sr-only">Outward journey type</label>
      <select id="{{ dir }}_journey_indicator_modal{{ el.id_suffix }}">
        <option value="Leave After" selected data-displaystring="Departing after">Departing after</option>
        <option value="Arrive Before" data-displaystring="Arriving before">Arriving before</option>
      </select>
    </div>

    <div class="col-md-3 form-group journey-time no-bottom-margin">
      <label for="{{ dir }}_time_modal{{ el.id_suffix }}" class="sr-only">{{ title }} time</label>
      <select id="{{ dir }}_time_modal{{ el.id_suffix }}" class="time">
        {{ times|raw }}
      </select>
    </div>
  </div>

  <div class="buttons desktop-only form-group-no-pad">
    <button type="button" class="btn btn-outline-default btn-sm sixam" aria-label="Select 6 am for {{ direction }} journey">6am</button>
    <button type="button" class="btn btn-outline-default btn-sm twelvepm" aria-label="Select 12 pm for {{ direction }} journey">12pm</button>
    <button type="button" class="btn btn-outline-default btn-sm sixpm" aria-label="Select 6 pm for {{ direction }} journey">6pm</button>
    <button type="button" class="btn btn-outline-default btn-sm ninepm" aria-label="Select 9 pm for {{ direction }} journey">9pm</button>
  </div>

</div>
