<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 href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
      <section class="heading-title">
        <h1 translate>{{ 'trainings_monitoring' }}</h1>
      </section>
    </div>

  </div>
</section>


<section class="m-lg">
  <div class="row">

    <div class="col-md-12">
      <uib-tabset justified="true">
        <uib-tab heading="{{ 'trainings' | translate }}">
          <button type="button" class="btn btn-warning m-t m-b" ui-sref="app.admin.trainings_new" translate>{{ 'add_a_new_training' }}</button>

          <table class="table">
            <thead>
              <tr>
                <th style="width:20%" translate>{{ 'name' }}</th>
                <th style="width:40%" translate>{{ 'associated_machines' }}</th>
                <th style="width:20%" translate>{{ 'number_of_tickets' }}</th>
                <th style="width:20%"></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="training in trainings">
                <td>{{ training.name }}</td>
                <td>{{ showMachines(training) }}</td>
                <td>{{ training.nb_total_places }}</td>
                <td>
                  <div class="buttons">
                    <button class="btn btn-default" ui-sref="app.admin.trainings_edit({id:training.id})">
                      <i class="fa fa-edit"></i> {{ 'edit' | translate }}
                    </button>
                    <button class="btn btn-danger" ng-click="removeTraining($index, training)">
                      <i class="fa fa-trash-o"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </uib-tab>

        <uib-tab heading="{{ 'trainings_monitoring' | translate }}">
          <div class="m-lg">
            <label for="training_select" translate>{{ '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>{{ 'training' }}</th>
                <th style="width:65%" translate>{{ '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="{{ '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="{{ '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}" translate-interpolation="messageformat"> {{ '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>
