fab-manager/app/frontend/templates/events/index.html

<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 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-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'app.public.events_list.the_fablab_s_events' }}</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>{{ 'app.public.events_list.add_an_event' }}</a>
      </section>
    </div>
  </div>

  <section class="m-lg">

    <div class="row m-b-md">
      <div class="col-md-3 m-b" ng-show="categories.length > 0">
        <select ng-model="filters.category_id" ng-change="filterEvents()" class="form-control" ng-options="c.id as c.name for c in categories">
          <option value="" translate>{{ 'app.public.events_list.all_categories' }}</option>
        </select>
      </div>

      <div class="col-md-3 m-b" ng-show="themes.length > 0">
        <select ng-model="filters.theme_id" ng-change="filterEvents()" class="form-control" ng-options="t.id as t.name for t in themes">
          <option value="" translate>{{ 'app.public.events_list.all_themes' }}</option>
        </select>
      </div>

      <div class="col-md-3 m-b" ng-show="ageRanges.length > 0">
        <select ng-model="filters.age_range_id" ng-change="filterEvents()" class="form-control" ng-options="a.id as a.name for a in ageRanges">
          <option value="" translate>{{ 'app.public.events_list.for_all' }}</option>
        </select>
      </div>
    </div>

    <div class="event-focus" ng-if="featuredEevent && (!currentUser || currentUser.role === 'member')">
      <event-card style="display: contents"
                  event="featuredEevent"
                  card-type="'lg'"
                  ui-sref="app.public.events_show({id: featuredEevent.id})">
      </event-card>
    </div>
    <div ng-if="isAuthorized(['admin', 'manager'])">
      <button class="btn btn-default" ng-click="scrollToFeaturedEvent()" translate>{{ 'app.public.events_list.show_featured' }}</button>
    </div>

    <div ng-repeat="month in monthOrder">
      <h1>{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}</h1>

      <div class="event-monthList" ng-repeat="event in eventsGroupByMonth[month]">
        <event-card style="display: contents"
                    event="event"
                    card-type="'sm'"
                    ng-if="isAuthorized(['admin', 'manager']) || event.id !== featuredEevent.id"
                    ng-class="{'featured-event': event.id === featuredEevent.id}"
                    ui-sref="app.public.events_show({id: event.id})">
        </event-card>
      </div>

    </div>

    <div class="row">

      <div class="col-lg-12 text-center m-t-md">
        <a class="btn btn-warning" ng-click="loadMoreEvents()" ng-hide="noMoreResults" translate>{{ 'app.public.events_list.load_the_next_events' }}</a>
      </div>
    </div>

  </section>
</section>