<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-11 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'app.admin.trainings.trainings_monitoring' }}</h1>
      </section>
    </div>
  </div>
</section>


<section class="m-lg trainings-monitoring"
         ui-tour="trainings"
         ui-tour-backdrop="true"
         ui-tour-template-url="'/shared/tour-step-template.html'"
         ui-tour-use-hotkeys="true"
         ui-tour-scroll-parent-id="content-main"
         post-render="setupTrainingsTour">
  <div class="row">

    <div class="col-md-12">
      <uib-tabset justified="true" active="tabs.active">
        <uib-tab heading="{{ 'app.admin.trainings.trainings_settings' | translate }}" index="1" class="manage-trainings">
          <trainings-settings on-error="onError" on-success="onSuccess" ui-router="uiRouter"></trainings-settings>
        </uib-tab>
        <uib-tab heading="{{ 'app.admin.trainings.all_trainings' | translate }}" index="0" class="manage-trainings">
          <trainings on-error="onError" on-success="onSuccess" ng-if="tabs.active == 0"></trainings>
        </uib-tab>

        <uib-tab heading="{{ 'app.admin.trainings.trainings_monitoring' | translate }}" class="post-tracking" index="2">
          <div class="m-lg">
            <label for="training_select" translate>{{ 'app.admin.trainings.select_a_training' }}</label>
            <select ng-options="training as training.name for training in trainings" ng-model="monitoring.training" class="form-control" ng-change="selectTrainingToMonitor()" name="training_select">
            </select>
          </div>

          <table class="table">
            <thead>
            <tr>
              <th style="width:35%" translate>{{ 'app.admin.trainings.training' }}</th>
              <th style="width:65%" translate>{{ 'app.admin.trainings.date' }}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(training_name, years) in groupedAvailabilities">
              <td>{{training_name}}</td>
              <td>
                <uib-accordion close-others="true">
                  <uib-accordion-group ng-repeat="months in years | toArray | orderBy:'$key':true" heading="{{ 'app.admin.trainings.year_NUMBER' | translate:{NUMBER:months.$key} }}" is-open="accordions[training_name][months.$key].isOpenFirst" ng-if="!months.name" class="light-accordion">

                    <uib-accordion close-others="true">
                      <uib-accordion-group ng-repeat="days in months | toArray | orderBy:'$key':true" heading="{{ 'app.admin.trainings.month_of_NAME' | translate:{NAME:formatMonth(days.$key)} }}" is-open="accordions[training_name][months.$key][days.$key].isOpenFirst" ng-if="days.$key" class="light-accordion">

                        <uib-accordion close-others="true">
                          <uib-accordion-group ng-repeat="(day, availabilities) in days" heading="{{formatDay(day, days.$key, months.$key)}}" is-open="accordions[training_name][months.$key][days.$key][day].isOpenFirst" class="light-accordion">
                            <ul class="list-unstyled">
                              <li ng-repeat="a in availabilities">
                                <a ng-click="showReservations(years.training, a)" class="btn btn-default">{{ a.start_at | amDateFormat:'LLL'
                                  }} - {{ a.end_at | amDateFormat:'LT' }}</a>
                                <span class="label label-success" translate translate-values="{NUMBER:a.reservation_users.length}"> {{ 'app.admin.trainings.NUMBER_reservation' }}</span>
                              </li>
                            </ul>
                          </uib-accordion-group>
                        </uib-accordion>

                      </uib-accordion-group>
                    </uib-accordion>

                  </uib-accordion-group>
                </uib-accordion>
              </td>
            </tr>
            </tbody>
          </table>
        </uib-tab>
      </uib-tabset>
    </div>

  </div>
</section>