fab-manager/app/assets/templates/admin/events/index.html.erb

<section class="heading b-b">
  <div class="row no-gutter b-b">
    <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 b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'fablab_courses_and_workshops' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized(['admin'])">
      <section class="heading-actions wrapper">
        <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm upper text-sm" ui-sref="app.admin.events_new" role="button" translate>{{ 'add_an_event' }}</a>
      </section>
    </div>
  </div>

  <section class="m-lg">
    <div class="row">
      <div class="col-md-12">

        <div class="col-md-6 m-b">
          <select ng-model="selectedTimezone" class="form-control">
            <option value="" translate>{{ 'all_events' }}</option>
            <option value="passed" translate>{{ 'passed_events' }}</option>
            <option value="future" translate>{{ 'events_to_come' }}</option>
          </select>
        </div>

        <table class="table">
          <thead>
          <tr>
            <th style="width:30%" translate>{{ 'title' }}</th>
            <th style="width:30%" translate>{{ 'dates' }}</th>
            <th style="width:40%"></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="event in filtered = (events | eventsReservationsFilter:selectedTimezone)">
            <td>
              <a ui-sref="app.public.events_show({id: event.id})">{{ event.title }} </a>
            </td>
            <td>
              <span> {{ 'from_DATE' | translate:{DATE:(event.start_date | amDateFormat:'LL')} }} <span class="text-sm font-thin" translate>{{ 'to_date' }}</span>{{event.end_date | amDateFormat:'LL'}}</span>
              <br/>
              <span ng-if="event.all_day == 'true'" translate>{{ 'all_day' }}</span>
              <span ng-if="event.all_day == 'false'">
                {{ 'from_TIME' | translate:{TIME:(event.start_date | amDateFormat:'LT')} }}
                <span class="text-sm font-thin" translate>{{ 'to_time' }}</span>
                {{event.end_date | amDateFormat:'LT'}}
              </span>
            </td>
            <td>
              <div class="buttons">
                <button class="btn btn-default" ui-sref="app.admin.event_reservations({id: event.id})">
                  <i class="fa fa-bookmark"></i> {{ 'view_reservations' | translate }}
                </button>
                <button class="btn btn-default" ui-sref="app.admin.events_edit({id: event.id})">
                  <i class="fa fa-edit"></i> {{ 'edit' | translate }}
                </button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 text-center">
          <a class="btn btn-warning" ng-click="loadMoreEvents()" ng-if="paginateActive" translate>{{ 'load_the_next_courses_and_workshops' }}</a>
      </div>
    </div>
  </section>
</section>