<div class="chead" ng-hide="notdisplayheader">
  <div class="row spbrow">
    <div class="col-xs-12">
      <span ng-if="invitedevents.length" class="invite_info">
        <a ng-click="openInvitePage()">
          <i class="fa fa-info-circle"></i>
          <translate>calendar.event.has_been_invited</translate>
          {{invitedevents.length}}
          <translate ng-if="invitedevents.length==1">calendar.event.singular</translate>
          <translate ng-if="invitedevents.length>1">calendar.event.plural</translate>.
          <translate>calendar.event.has_been_invited_click</translate>
        </a>
      </span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-8">
      <button type="button" ng-click="toggleFilters()" class="btn btn-default"
        ng-class="{'btn-default':!show_filter,'btn-primary':show_filter}">
        <i class="fa fa-filter"></i>
      </button>

      <button type="button" class="btn btn-default" ng-click="toggleView()">
        <span ng-if="viewType=='calendar'">
          <i class="fa fa-list"></i>
          <translate>tools.calendar.ui.buttons.list</translate>
        </span>
        <span ng-if="viewType=='list'">
          <i class="fa fa-calendar"></i>
          <translate>tools.calendar.ui.buttons.calendar</translate>
        </span>
      </button>

      <div class="btn btn-default" data-placement="bottom"
        data-template="js/XG/containers/views/popover/calendar.export.html" data-animation="am-fade-and-scale"
        data-auto-close="true" bs-popover>
        <translate>tools.calendar.ui.buttons.export</translate>
      </div>

      <div class="btn btn-sm btn-default" ng-if="viewType=='calendar'" ng-click="toggleEventTitle()" ng-disabled="disableDescription">
        <span>
          <i class="fa" ng-class="(!showDescription || disableDescription) ? 'fa-eye' : 'fa-eye-slash'"></i>
          <translate>calendar.options.titleDescription</translate>
        </span>
      </div>

      <div class="btn btn-sm btn-default" ng-if="viewType=='calendar'" ng-click="toggleEventNumber()">
        <span>
          <i class="fa" ng-class="!showNumber ? 'fa-eye' : 'fa-eye-slash'"></i>
          N° dossier
        </span>
      </div>

      <!-- Légende des couleurs pour utilisateurs -->
      <span class="btn btn-sm btn-default" ng-if="viewType=='calendar'"
            data-template="js/XG/containers/views/popover/kis_calendar_legend_color.html"
            data-auto-close="true"
            data-placement="bottom" data-animation="am-flip-x" ng-click="openColorLegend('Users');"
            title="{{'tools.calendar.ui.buttons.viewUsersColors'| translate}}" bs-popover>
        <table>
          <tr>
            <td style="width:10px;height:5px;background-color:purple;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:1px;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:5px;background-color:green;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:1px;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:5px;background-color:blue;"></td>
          </tr>
        </table>
      </span>

      <!-- Légende des couleurs pour les types de contrôles -->
      <span class="btn btn-sm btn-default" ng-if="viewType=='calendar'"
            data-template="js/XG/containers/views/popover/kis_calendar_legend_color.html"
            data-auto-close="true"
            data-placement="bottom" data-animation="am-flip-x" ng-click="openColorLegend('eventTypes');"
            title="{{'tools.calendar.ui.buttons.viewControlTypesColors'| translate}}" bs-popover>
        <table>
          <tr>
            <td style="width:10px;height:5px;background-color:red;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:1px;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:5px;background-color:green;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:1px;"></td>
          </tr>
          <tr>
            <td style="width:10px;height:5px;background-color:blue;"></td>
          </tr>
        </table>
      </span>

      <user-picker res="agentCalendar.value" roles="['ANC_agent']" ng-if="userselect==true"
        alternative-title="'Chercher un agent'"></user-picker>

      <button class="exportCalendarBtn" id="hiddendownloadIcalUrl" data-clipboard-text="{{downloadIcalUrl}}"
        style="display:none;">
        <translate>urlsharing.button.copy</translate>
      </button>
    </div>

    <!-- Ajouter un événement -->
    <div class="col-xs-4 text-right" ng-if="showAddEvent">
      <div class="btn btn-primary pull-right" ng-click="addNewEvent()">
        <i class="fa fa-plus"></i>
        <translate>tools.calendar.ui.event_actions.new.title</translate>
      </div>
    </div>
  </div>
  <div class="row" ng-if="showComments">
    <div class="col-xs-12">
      <textarea placeholder="Commentaires" style="width: 100%; margin-top: 15px;" rows="5" ng-model="calendarComments.value" ng-model-options="modelOptions" ng-change="commentChanged()">
      </textarea>
    </div>
  </div>
  <div class="row spbrow" ng-show="dateMaxCtrl">
    <div class="col-xs-6">
      <label>Date maximum préconisée pour ce contrôle</label>
      <div class="input-group">
        <input type="date" class="form-control" ng-model="dateMaxCtrl" data-date-format="dd-MM-yyyy"
          model-date-format="dd-MM-yyyyTHH:mm:ss.sssZ" data-min-date="{{dateMin}}"
          data-max-date="{{dateMax}}" placeholder="Date maximum préconisée" readonly />
        <span class="input-group-btn">
          <div class="btn btn-default" title="Se positionner à la date" ng-click="localiseDateMax()">
            <i class="fa fa-calendar-check-o"></i>
          </div>
        </span>
      </div>
    </div>
  </div>

  <!-- Panneau de définition du filtre -->
  <div ng-if="showFilters" class="cfilter">
    <form name="formEventsFilters">
      <div class="row spbrow">
        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-2">
              <label>
                <translate>tools.calendar.ui.filter.title</translate>
              </label>
            </div>
            <div class="col-xs-10">
              <input type="text" name="title" ng-model="eventsFilters.title" ng-model-options="modelOptions" ng-change="changeFilters(formEventsFilters, eventsFilters)" class="form-control" ng-change="refreshEvents()" />
            </div>
          </div>
        </div>

        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-2">
              <label>
                <translate>tools.calendar.ui.filter.place</translate>
              </label>
            </div>
            <div class="col-xs-10">
              <input type="text" name="place" ng-model="eventsFilters.place" ng-model-options="modelOptions" ng-change="changeFilters(formEventsFilters, eventsFilters)" class="form-control" ng-change="refreshEvents()" />
            </div>
          </div>
        </div>

        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-2">
              <label>
                <translate>tools.calendar.ui.filter.color</translate>
              </label>
            </div>
            <div class="col-xs-10 text-right">
              <calendar-color res="eventsFilters.color" has-color="true" change-color="changeFilters(formEventsFilters, eventsFilters)" name="color" calendar-filter="true" no-title="true"></calendar-color>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-4">
          <div>
            <select class="form-control" name="allowed" ng-model="eventsFilters.agent" ng-change="changeFilters(formEventsFilters, eventsFilters)"
              ng-options="o as o for o in agents"></select>
          </div>
        </div>
        <div class="col-xs-4">
          <div>
            <select class="form-control" name="createdBy" ng-model="eventsFilters.created_by" ng-change="changeFilters(formEventsFilters, eventsFilters)"
              ng-options="createdBy as createdBy for createdBy in creators"></select>
          </div>
        </div>
        <div class="col-xs-4">
          <div>
            <select class="form-control" name="eventType" ng-model="eventsFilters.type_evenement" ng-change="changeFilters(formEventsFilters, eventsFilters)"
              ng-options="o.properties.type_id as (o.properties.alias || o.properties.type) for o in filterEventTypes"></select>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>