<div class="modal-header">
  <img ng-src="{{logoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="modal-logo"/>
  <h1 translate ng-show="reservation">{{ 'app.shared.valid_reservation_modal.booking_confirmation' }}</h1>
  <h1 translate ng-show="!reservation && subscription">{{ 'app.shared.valid_reservation_modal.subscription_confirmation' }}</h1>
</div>
<div class="modal-body">
  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <div class="row">
    <div ng-class="{'col-md-6': schedule, 'm-h-sm': !schedule}">
      <!-- this modal dialog is only still used in events reservation, so the following workaround can do the trick -->
      <div ng-if="reservation && bookedEvent">
        <p translate>{{ 'app.shared.valid_reservation_modal.here_is_the_summary_of_the_slots_to_book_for_the_current_user' }}</p>
        <ul ng-repeat="sr in reservation.reservation.slots_reservations_attributes">
          <li><strong>{{bookedEvent.availability.start_at | amDateFormat: 'LL'}} : {{bookedEvent.availability.start_at | amDateFormat:'LT'}} - {{bookedEvent.availability.end_at | amDateFormat:'LT'}}</strong></li>
        </ul>
      </div>
      <div ng-if="subscription">
        <p translate>{{ 'app.shared.valid_reservation_modal.here_is_the_subscription_summary' }}</p>
        <p>{{ plan | humanReadablePlanName }}</p>
      </div>
      <div ng-if="schedule">
        <label for="method" translate>{{ 'app.shared.valid_reservation_modal.payment_method' }}</label>
        <select id="method"
                class="form-control m-b"
                ng-model="method.payment_method">
          <option value="card" translate>{{ 'app.shared.valid_reservation_modal.method_card' }}</option>
          <option value="check" translate>{{ 'app.shared.valid_reservation_modal.method_check' }}</option>
        </select>
        <p ng-show="method.payment_method == 'card'" translate>{{ 'app.shared.valid_reservation_modal.card_collection_info' }}</p>
        <p ng-show="method.payment_method == 'check'" translate translate-values="{DEADLINES: schedule.items.length}">{{ 'app.shared.valid_reservation_modal.check_collection_info' }}</p>
      </div>
    </div>
    <div class="col-md-6" ng-if="schedule">
      <ul class="full-schedule">
        <li ng-repeat="item in schedule.items">
          <span class="schedule-item-date">{{item.due_date | amDateFormat: 'L'}}</span>
          <span> </span>
          <span class="schedule-item-price">{{item.amount | currency}}</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <wallet-info current-user="currentUser"
                 cart="cartItems"
                 price="price"
                 wallet="wallet"/>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-info" ng-click="ok()" ng-disabled="attempting" ng-bind-html="validButtonName"></button>
  <button class="btn btn-default" ng-click="cancel()" translate>{{ 'app.shared.buttons.cancel' }}</button>
  <card-payment-modal is-open="isOpenOnlinePaymentModal"
                      toggle-modal="toggleOnlinePaymentModal"
                      after-success="afterCreatePaymentSchedule"
                      on-error="onCreatePaymentScheduleError"
                      cart="cartItems"
                      current-user="currentUser"
                      schedule="schedule"
                      customer="user"
                      processPayment="false"/>
</div>