<div id="checkout-step_calendar" class="step-content" data-role="content" role="tabpanel" aria-hidden="false">
    <form class="form calendar" id="co-calendar-form" novalidate="novalidate">
      <div class="shipping-calendar-items">
        <!--ko foreach: { data: method.data, as: 'day'}-->
        <div class="shipping-calendar-item">
          <div class="title">
            <span class="day" data-bind="text: day.short_date"></span>
            <span class="week" data-bind="text: '('+$t(day.short_day)+')'"></span>
            <!-- ko if: day.available && day.urgent_shipping_fee-->
            <span class="urgent-label" data-bind="i18n: 'Urgent Order'"></span>
            <!-- /ko -->
          </div>
          <div class="content">
            <!-- ko if: day.available -->
            <div class="field">
              <!-- ko if: day.urgent_shipping_fee -->
              <input type="radio" class="radio" name="delivery-date" data-bind="value: day.date, attr: {id: day.date, 'data-urgent-price-id':day.urgent_price_id}, click: function(data, event){ return $parents[1].selectDeliveryDate(day) }">
              <!-- /ko -->
              <!-- ko ifnot: day.urgent_shipping_fee -->
              <input type="radio" class="radio" name="delivery-date" data-bind="value: day.date, attr: {id: day.date}, click: function(data, event){ return $parents[1].selectDeliveryDate(day) }">
              <!-- /ko -->
              <!-- ko if: day.urgent_shipping_fee -->
              <label class="label" data-bind="attr:{for:day.date},html:$t('Urgent Order Fee<span>(incl. delivery)</span>')"></label>
              <!-- /ko -->
              <!-- ko ifnot: day.urgent_shipping_fee -->
              <!-- ko if: $parents[1].currentSelectedMethod().extension_attributes -->
              <!-- ko if : ($parents[1].currentSelectedMethod().extension_attributes.free_weekdays).indexOf(day.short_day) === -1-->
              <label class="label" data-bind="attr:{for:day.date},i18n:'Delivery'"></label>
              <!-- /ko -->
              <!-- ko ifnot : ($parents[1].currentSelectedMethod().extension_attributes.free_weekdays).indexOf(day.short_day) === -1-->
              <label class="label" data-bind="style:{color:'red','font-weight':'bold'},attr:{for:day.date},i18n:'Free Delivery'"></label>
              <!-- /ko -->
              <!-- /ko -->

              <!-- /ko -->
              <!-- ko foreach: $parents[1].getRegion('price') -->
              <!-- ko template: getTemplate() --><!-- /ko -->
              <!-- /ko -->
              <!-- ko if: day.urgent_shipping_fee -->
              <strong>*</strong>
              <!-- /ko -->
            </div>
            <!-- ko if: 0 -->
            <div class="field">
              <!-- ko if: day.urgent_shipping_fee -->
              <input type="radio" class="radio delivery-date-time" name="delivery-date" data-bind="value: day.date + '_time', attr: {id: day.date + '_time', 'data-urgent-price-id':day.urgent_price_id}, click: function(data, event){ return $parents[1].selectDeliveryDateWithSpecificTimeslot(day) }">
              <!-- /ko -->
              <!-- ko ifnot: day.urgent_shipping_fee -->
              <input type="radio" class="radio delivery-date-time" name="delivery-date" data-bind="value: day.date + '_time', attr: {id: day.date + '_time'}, click: function(data, event){ return $parents[1].selectDeliveryDateWithSpecificTimeslot(day) }">
              <!-- /ko -->
              <select class="timeslot-select" data-bind="attr:{name: day.date + '_timeslot', id: day.date + '_timeslot'}, event:{ change: $parents[1].selectDeliveryTimeslot }">
                <!-- ko if: day.urgent_shipping_fee -->
                <option data-bind="i18n:'Specific Time'" value=""></option>
                <!-- /ko -->
                <!-- ko ifnot: day.urgent_shipping_fee -->
                <option data-bind="i18n:'Specific Time'" value=""></option>
                <!-- /ko -->
                <!--ko foreach: { data: day.timeslots, as: 'timeslot'}-->
                <option data-bind="value: timeslot, text: timeslot"></option>
                <!-- /ko -->
              </select>
              <!-- ko foreach: $parents[1].getRegion('timeslot-price') -->
              <!-- ko template: getTemplate() --><!-- /ko -->
              <!-- /ko -->
              <!-- ko if: day.urgent_shipping_fee --><strong>*</strong><!-- /ko -->
            </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko ifnot: day.available -->
            <div class="field">
              <span data-bind="i18n:'Today Close'"></span>
            </div>
            <!-- /ko -->

            <!-- ko if: day.available && day.urgent_shipping_fee-->
            <div class="field notes">
              <span data-bind="i18n: '*The price is included the urgent fee.'"></span>
            </div>
            <!-- /ko -->
          </div>
        </div>
        <!-- /ko -->
      </div>
    </form>
  </div>