{# LIBRARIES #}
{{ attach_library('ui_patterns/booking_form_desktop.booking_form_desktop_lib') }}
{{ attach_library('ui_patterns/libraries.bs_modal') }}

{% set show_button = show_button|default(false) %}
{% if show_button %}
<button type="button"
        class="btn btn-outline-default btn-sm m-3"
        data-bs-toggle="modal"
        data-bs-target="#buytickets-modal">
  Launch demo modal
</button>
{% endif %}

<div class="modal fade dual" id="buytickets-modal" tabindex="-1" role="dialog" aria-labelledby="buytickets-modal-title" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <!-- Header -->
      <div class="modal-header">
        <h2 id="buytickets-modal-title" class="visually-hidden">Buy tickets form modal</h2>
        <a type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close outbound date and time dialog">
          <span><i class="fas fa-times-circle"></i></span>
        </a>
      </div>
      <!-- Body -->
      <div class="modal-body">
        <form novalidate="novalidate">
          <!-- Dynamic content -->
          <div class="form-contents"><h2 id="outbounddatetlbf" class="header">
              <i class="fas fa-calendar-alt" aria-hidden="true"></i> Outbound date
            </h2><div aria-controls="outbound_datepicker_status_tlbf" class="form-group datepicker hasDatepicker" data-numberofmonths="2" data-type="outdate" id="dp1637502201349" role="application" aria-label="Calendar"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="display: block; width: 34em;"><div class="ui-datepicker-group ui-datepicker-group-first"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"><a class="ui-datepicker-prev ui-corner-all ui-state-disabled" role="button" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Previous Month,  disabled</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">November</span>&nbsp;<span class="ui-datepicker-year">2021</span></div></div><table class="ui-datepicker-calendar" role="grid"><thead role="rowgroup"><tr role="row"><th scope="col" class="ui-datepicker-week-end" role="columnheader"><span title="Sunday">Su</span></th><th scope="col" role="columnheader"><span title="Monday">Mo</span></th><th scope="col" role="columnheader"><span title="Tuesday">Tu</span></th><th scope="col" role="columnheader"><span title="Wednesday">We</span></th><th scope="col" role="columnheader"><span title="Thursday">Th</span></th><th scope="col" role="columnheader"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end" role="columnheader"><span title="Saturday">Sa</span></th></tr></thead><tbody role="rowgroup"><tr role="row"><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">1</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">2</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">3</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">4</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">5</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">6</span></td></tr><tr role="row"><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">7</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">8</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">9</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">10</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">11</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">12</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">13</span></td></tr><tr role="row"><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">14</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">15</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">16</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">17</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">18</span></td><td class=" ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">19</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " role="gridcell"><span class="ui-state-default">20</span></td></tr><tr role="row"><td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="#" role="button">21</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">22</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">23</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">24</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">25</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">26</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">27</a></td></tr><tr role="row"><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">28</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">29</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">30</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td></tr></tbody></table></div><div class="ui-datepicker-group ui-datepicker-group-last"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" role="button" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next Month, January 2022</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">December</span>&nbsp;<span class="ui-datepicker-year">2021</span></div></div><table class="ui-datepicker-calendar" role="grid"><thead role="rowgroup"><tr role="row"><th scope="col" class="ui-datepicker-week-end" role="columnheader"><span title="Sunday">Su</span></th><th scope="col" role="columnheader"><span title="Monday">Mo</span></th><th scope="col" role="columnheader"><span title="Tuesday">Tu</span></th><th scope="col" role="columnheader"><span title="Wednesday">We</span></th><th scope="col" role="columnheader"><span title="Thursday">Th</span></th><th scope="col" role="columnheader"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end" role="columnheader"><span title="Saturday">Sa</span></th></tr></thead><tbody role="rowgroup"><tr role="row"><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">1</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">2</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">3</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">4</a></td></tr><tr role="row"><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">5</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">6</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">7</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">8</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">9</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">10</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">11</a></td></tr><tr role="row"><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">12</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">13</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">14</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">15</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">16</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">17</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">18</a></td></tr><tr role="row"><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">19</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">20</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">21</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">22</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">23</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">24</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">25</a></td></tr><tr role="row"><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">26</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">27</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">28</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">29</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">30</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="11" data-year="2021" role="gridcell"><a class="ui-state-default" href="#" role="button">31</a></td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" role="gridcell">&nbsp;</td></tr></tbody></table></div><div class="ui-datepicker-row-break"></div></div></div><span id="outbound_datepicker_status_tlbf" 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 outbound journey">Today</button>
              <button type="button" class="btn btn-outline-default btn-sm tomorrow" aria-label="Select tomorrow for outbound journey">Tomorrow</button>
            </div><hr class="desktop-only"><h2>
              <i class="fas fa-clock" aria-hidden="true"></i> Outbound time
            </h2><div class="row">
              <div class="col-md-6 form-group journey-type no-bottom-margin">
                <label for="out_journey_indicator_modaltlbf" class="sr-only">Outward journey type</label>
                <select id="out_journey_indicator_modaltlbf" style="display:visible; position:absolute; width:0px; height: 0px; clip:rect(0,0,0,0)" tabindex="-1">
                  <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 class="chosen-container chosen-container-single chosen-container-single-nosearch" title="" id="out_journey_indicator_modaltlbf__2_chosen" style="width: auto;"><a class="chosen-single">
                    <span>Departing after</span>
                    <div><b></b></div>
                  </a>
                  <div class="chosen-drop">
                    <div class="chosen-search">
                      <input class="chosen-search-input" type="text" autocomplete="off" readonly="">
                    </div>
                    <ul class="chosen-results"></ul>
                  </div></div>
              </div>

              <div class="col-md-6 form-group journey-time no-bottom-margin">
                <label for="out_time_modaltlbf" class="sr-only">Outbound time</label>
                <select id="out_time_modaltlbf" class="time" style="display:visible; position:absolute; width:0px; height: 0px; clip:rect(0,0,0,0)" tabindex="-1">
                  <option value="00:00">00:00</option>
                  <option value="00:15">00:15</option>
                  <option value="00:30">00:30</option>
                  <option value="00:45">00:45</option>
                  <option value="01:00">01:00</option>
                  <option value="01:15">01:15</option>
                  <option value="01:30">01:30</option>
                  <option value="01:45">01:45</option>
                  <option value="02:00">02:00</option>
                  <option value="02:15">02:15</option>
                  <option value="02:30">02:30</option>
                  <option value="02:45">02:45</option>
                  <option value="03:00">03:00</option>
                  <option value="03:15">03:15</option>
                  <option value="03:30">03:30</option>
                  <option value="03:45">03:45</option>
                  <option value="04:00">04:00</option>
                  <option value="04:15">04:15</option>
                  <option value="04:30">04:30</option>
                  <option value="04:45">04:45</option>
                  <option value="05:00">05:00</option>
                  <option value="05:15">05:15</option>
                  <option value="05:30">05:30</option>
                  <option value="05:45">05:45</option>
                  <option value="06:00">06:00</option>
                  <option value="06:15">06:15</option>
                  <option value="06:30">06:30</option>
                  <option value="06:45">06:45</option>
                  <option value="07:00">07:00</option>
                  <option value="07:15">07:15</option>
                  <option value="07:30">07:30</option>
                  <option value="07:45">07:45</option>
                  <option value="08:00">08:00</option>
                  <option value="08:15">08:15</option>
                  <option value="08:30">08:30</option>
                  <option value="08:45">08:45</option>
                  <option value="09:00">09:00</option>
                  <option value="09:15">09:15</option>
                  <option value="09:30">09:30</option>
                  <option value="09:45">09:45</option>
                  <option value="10:00">10:00</option>
                  <option value="10:15">10:15</option>
                  <option value="10:30">10:30</option>
                  <option value="10:45">10:45</option>
                  <option value="11:00">11:00</option>
                  <option value="11:15">11:15</option>
                  <option value="11:30">11:30</option>
                  <option value="11:45">11:45</option>
                  <option value="12:00">12:00</option>
                  <option value="12:15">12:15</option>
                  <option value="12:30">12:30</option>
                  <option value="12:45">12:45</option>
                  <option value="13:00">13:00</option>
                  <option value="13:15">13:15</option>
                  <option value="13:30">13:30</option>
                  <option value="13:45">13:45</option>
                  <option value="14:00">14:00</option>
                  <option value="14:15">14:15</option>
                  <option value="14:30" selected="">14:30</option>
                  <option value="14:45">14:45</option>
                  <option value="15:00">15:00</option>
                  <option value="15:15">15:15</option>
                  <option value="15:30">15:30</option>
                  <option value="15:45">15:45</option>
                  <option value="16:00">16:00</option>
                  <option value="16:15">16:15</option>
                  <option value="16:30">16:30</option>
                  <option value="16:45">16:45</option>
                  <option value="17:00">17:00</option>
                  <option value="17:15">17:15</option>
                  <option value="17:30">17:30</option>
                  <option value="17:45">17:45</option>
                  <option value="18:00">18:00</option>
                  <option value="18:15">18:15</option>
                  <option value="18:30">18:30</option>
                  <option value="18:45">18:45</option>
                  <option value="19:00">19:00</option>
                  <option value="19:15">19:15</option>
                  <option value="19:30">19:30</option>
                  <option value="19:45">19:45</option>
                  <option value="20:00">20:00</option>
                  <option value="20:15">20:15</option>
                  <option value="20:30">20:30</option>
                  <option value="20:45">20:45</option>
                  <option value="21:00">21:00</option>
                  <option value="21:15">21:15</option>
                  <option value="21:30">21:30</option>
                  <option value="21:45">21:45</option>
                  <option value="22:00">22:00</option>
                  <option value="22:15">22:15</option>
                  <option value="22:30">22:30</option>
                  <option value="22:45">22:45</option>
                  <option value="23:00">23:00</option>
                  <option value="23:15">23:15</option>
                  <option value="23:30">23:30</option>
                  <option value="23:45">23:45</option>
                </select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" title="" id="out_time_modaltlbf__2_chosen" style="width: auto;"><a class="chosen-single">
                    <span>15:00</span>
                    <div><b></b></div>
                  </a>
                  <div class="chosen-drop">
                    <div class="chosen-search">
                      <input class="chosen-search-input" type="text" autocomplete="off" readonly="">
                    </div>
                    <ul class="chosen-results"></ul>
                  </div></div>
              </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 outbound journey">6am</button>
              <button type="button" class="btn btn-outline-default btn-sm twelvepm" aria-label="Select 12 pm for outbound journey">12pm</button>
              <button type="button" class="btn btn-outline-default btn-sm sixpm" aria-label="Select 6 pm for outbound journey">6pm</button>
              <button type="button" class="btn btn-outline-default btn-sm ninepm" aria-label="Select 9 pm for outbound journey">9pm</button>
            </div></div>
        </form>
        <button type="button" class="btn btn-default btn-sm set" aria-label="Confirm current outbound on Sunday, 21 November 2021 Departing after 15:00 and close dialog">Set</button>
      </div>
    </div>
  </div>
</div>
