<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 ng-show="mode == 'all'" translate>{{ 'app.logged.trainings_reserve.trainings_planning' }}</h1>
        <h1 ng-hide="mode == 'all'"><span translate>{{ 'app.logged.trainings_reserve.planning_of' }}</span> {{training.name}}</h1>
      </section>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
      <section class="heading-actions wrapper">
        <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs"
           ui-sref="app.logged.trainings_reserve({id:'all'})"
           ng-hide="mode == 'all'"
           role="button"
           translate>{{ 'app.logged.trainings_reserve.all_trainings' }}</a>
      </section>
    </div>
  </div>
</section>


<div class="row no-gutter training-reserve">
  <div class="col-sm-12 col-md-12 col-lg-9">
    <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg" ng-show="!plansAreShown"></div>
    <ng-include ng-if="$root.modules.plans" src="'/plans/_plan.html'"></ng-include>
  </div>


  <div class="col-sm-12 col-md-12 col-lg-3">

    <div ng-if="isAuthorized(['admin', 'manager'])">
      <select-member settings="settings"></select-member>
    </div>



    <cart slot="selectedEvent"
          slot-selection-time="selectionTime"
          events="events"
          user="ctrl.member"
          mode-plans="plansAreShown"
          plan="selectedPlan"
          plan-selection-time="planSelectionTime"
          settings="settings"
          plans="plans"
          groups="groups"
          on-slot-added-to-cart="markSlotAsAdded"
          on-slot-removed-from-cart="markSlotAsRemoved"
          on-slot-start-to-modify="markSlotAsModifying"
          on-slot-modify-success="modifyTrainingSlot"
          on-slot-modify-cancel="cancelModifyTrainingSlot"
          on-slot-modify-unselect="changeModifyTrainingSlot"
          on-slot-cancel-success="slotCancelled"
          after-payment="afterPayment"
          reservable-id="{{training.id}}"
          reservable-type="Training"
          reservable-name="{{training.name}}"
          limit-to-one-slot="true"></cart>


    <uib-alert type="info m">
      <p class="text-sm font-bold">
        <i class="fa fa-lightbulb-o"></i>
        <span ng-bind-html="trainingInformationMessage"></span>
      </p>
    </uib-alert>

    <uib-alert type="warning m">
      <p class="text-sm">
        <i class="fa fa-warning"></i>
        <span ng-bind-html="trainingExplicationsAlert"></span>
      </p>
    </uib-alert>

  </div>


</div>