<div>
  <div class="row">
    <h3 class="col-md-11 col-sm-11 col-xs-11 text-purple" translate>{{ 'app.public.calendar.trainings' }}</h3>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.trainings" ng-change="toggleFilter('trainings', filter)">
  </div>
  <div ng-repeat="t in trainings" class="row">
    <span class="col-md-11 col-sm-11 col-xs-11">{{::t.name}}</span>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="t.checked" ng-change="filterAvailabilities(filter)">
  </div>
</div>
<div class="m-t">
  <div class="row">
    <h3 class="col-md-11 col-sm-11 col-xs-11 text-beige" translate>{{ 'app.public.calendar.machines' }}</h3>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.machines" ng-change="toggleFilter('machines', filter)">
  </div>
  <div ng-repeat="m in machines" class="row">
    <span class="col-md-11 col-sm-11 col-xs-11">{{::m.name}}</span>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="m.checked" ng-change="filterAvailabilities(filter)">
  </div>
</div>
<div class="m-t" ng-show="$root.modules.spaces">
  <div class="row">
    <h3 class="col-md-11 col-sm-11 col-xs-11 text-cyan" translate>{{ 'app.public.calendar.spaces' }}</h3>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.spaces" ng-change="toggleFilter('spaces', filter)">
  </div>
  <div ng-repeat="s in spaces" class="row">
    <span class="col-md-11 col-sm-11 col-xs-11">{{::s.name}}</span>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="s.checked" ng-change="filterAvailabilities(filter)">
  </div>
</div>
<div class="m-t row">
  <h3 class="col-md-11 col-sm-11 col-xs-11 text-japonica" translate>{{ 'app.public.calendar.events' }}</h3>
  <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.evt" ng-change="filterAvailabilities(filter)">
</div>
<div class="m-t row">
  <h3 class="col-md-11 col-sm-11 col-xs-11 text-black" translate>{{ 'app.public.calendar.show_unavailables' }}</h3>
  <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.dispo" ng-change="filterAvailabilities(filter)">
</div>
<div class="m-t" ng-hide="externals.length == 0">
  <div class="row">
    <h3 class="col-md-11 col-sm-11 col-xs-11 text-black" translate>{{ 'app.public.calendar.externals' }}</h3>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.externals" ng-change="toggleFilter('externals', filter)">
  </div>

  <div class="row" ng-repeat="e in externals">
    <span ng-style="calendarStyle(e)" class="col-md-11 col-sm-11 col-xs-11 external-calendar-legend">{{::e.name}}</span>
    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="e.checked" ng-change="filterAvailabilities(filter)">
  </div>
</div>
