fab-manager/app/frontend/templates/dashboard/trainings.html

<div>

  <section class="heading">
    <div class="row no-gutter">
      <ng-include src="'/dashboard/nav.html'"></ng-include>
    </div>

  </section>

  <div class="row no-gutter">
    <div class="col-md-10">
      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b">
          <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i>{{ 'app.logged.dashboard.trainings.your_training_credits' |  translate }}</h4>
        </div>
        <div class="widget-content bg-light wrapper r-b">
          <span ng-show="!user.subscribed_plan" translate>{{ 'app.logged.dashboard.trainings.subscribe_for_credits' }}</span>
          <span ng-show="user.subscribed_plan" translate>{{ 'app.logged.dashboard.trainings.register_for_free' }}</span>
          <ul ng-if="user.subscribed_plan" class="list-unstyled">
            <li ng-repeat="c in user.subscribed_plan.training_credits" ng-show="!hasUsedTrainingCredit(user.training_credits, c.training_id)">
              {{getTrainingName(c.training_id)}}
              <button type="button" class="btn btn-default m-l btn-sm" ui-sref="app.logged.trainings_reserve({id: c.training_id})" translate>
                {{ 'app.logged.dashboard.trainings.book_here' }}
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


  <div class="row no-gutter">

    <div class="col-md-4">
      <div class="widget panel b-a m">
        <div class="panel-heading b-b">
          <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.trainings.your_next_trainings' | translate }}</h4>
        </div>
        <div class="widget-content bg-light wrapper r-b">
          <ul class="list-unstyled" ng-if="user.training_reservations.length > 0">
            <li ng-repeat="r in user.training_reservations | trainingReservationsFilter:'future'" class="m-b" data-label="{{ 'app.logged.dashboard.trainings.canceled' | translate}}" ng-class="{'reservation-canceled':r.canceled_at}">
              <span class="font-sbold">{{r.reservable.name}}</span> - <span class="label label-warning wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
            </li>
          </ul>
          <div ng-if="user.training_reservations.length == 0" translate>{{ 'app.logged.dashboard.trainings.no_trainings' }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b">
          <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.trainings.your_previous_trainings' | translate }}</h4>
        </div>
        <div class="widget-content bg-light auto wrapper r-b">
          <ul class="list-unstyled" ng-if="user.training_reservations.length > 0">
            <li ng-repeat="r in user.training_reservations | trainingReservationsFilter:'passed'" class="m-b" data-label="{{ 'app.logged.dashboard.trainings.canceled' | translate}}" ng-class="{'reservation-canceled':r.canceled_at}">
              <span class="font-sbold">{{r.reservable.name}}</span> - <span class="label label-info text-white wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
            </li>
          </ul>
          <div ng-if="user.training_reservations.length == 0" translate>{{ 'app.logged.dashboard.trainings.no_trainings' }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b">
          <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.trainings.your_approved_trainings' | translate }}</h4>
        </div>
        <div class="widget-content bg-light auto wrapper r-b">
          <ul class="list-unstyled" ng-if="user.trainings.length > 0">
            <li ng-repeat="t in user.trainings" class="m-b">
              <span class="font-sbold">{{t.name}}</span>
            </li>
          </ul>
          <div ng-if="user.trainings.length == 0" translate>{{ 'app.logged.dashboard.trainings.no_trainings' }}</div>
        </div>
      </div>
    </div>

  </div>
</div>