<div class="col-md-6 m-b m-t">
  <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 class="row">
  <div class="col-lg-12 text-center">
    <a class="btn btn-warning" ng-click="loadMoreEvents()" ng-if="paginateActive" translate>{{ 'load_the_next_events' }}</a>
  </div>
</div>