<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="fab-button is-secondary m-t-sm" ui-sref="app.admin.events_new" role="button" translate>{{ 'app.public.events_list.add_an_event' }}</a>
      </section>
    </div>
  </div>
</section>

<section class="events-list-page">
  <events-editorial-block on-error="onError"></events-editorial-block>

  <div class="row">
    <div class="col-md-3" 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" 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" 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-repeat="month in monthOrder">
    <h1>{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}</h1>

    <div class="event-monthList">
      <event-card style="display: contents"
                  event="event"
                  ng-repeat="event in eventsGroupByMonth[month]"
                  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="fab-button is-secondary" ng-click="loadMoreEvents()" ng-hide="noMoreResults" translate>{{ 'app.public.events_list.load_the_next_events' }}</a>
    </div>
  </div>

</section>