<?xml version='1.0' standalone='yes'?>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label"
    xmlns:rsrc="OGo:url"
    >
  <script type="text/javascript">
    var dayStartHour = <var:string value="dayStartHour"/>;
    var dayEndHour = <var:string value="dayEndHour"/>;
    var timeFormat = '<var:string value="userDefaults.timeFormat" const:escapeHTML="NO"/>';
  </script>
  <div layout="row" layout-align="end center">
    <!-- suggestions options -->
    <md-checkbox ng-model="editor.component.$attendees.workDaysOnly">
      <var:string label:value="Work days only"/>
    </md-checkbox>
    <sg-timepicker ng-model="editor.component.$attendees.slotStartTimeLimit"><!-- slot start --></sg-timepicker>
    <sg-timepicker ng-model="editor.component.$attendees.slotEndTimeLimit"><!-- slot end --></sg-timepicker>
    <md-button class="md-icon-button"
               label:aria-label="Previous slot"
               ng-click="editor.previousSlot()">
      <md-tooltip><var:string label:value="Previous slot"/></md-tooltip>
      <md-icon>chevron_left</md-icon>
    </md-button>
    <md-button class="md-icon-button"
               label:aria-label="Next slot"
               ng-click="editor.nextSlot()">
      <md-tooltip><var:string label:value="Next slot"/></md-tooltip>
      <md-icon>chevron_right</md-icon>
    </md-button>
  </div>
  <div layout="row">
    <!-- attendees -->
    <md-list>
      <md-list-item>
        <div class="md-tile-left"><!-- empty --></div>
      </md-list-item>
      <!-- organizer -->
      <md-list-item>
        <div class="md-button md-icon-button">
          <md-icon>person</md-icon>
        </div>
        <sg-avatar-image class="md-avatar"
                         sg-email="::editor.component.organizer.email"
                         size="40">person</sg-avatar-image>
        <div class="sg-tile-content sg-padded--right">
          <div class="sg-md-subhead"><div>{{::editor.component.organizer.name}}</div></div>
          <div class="sg-md-body"><div>{{::editor.component.organizer.email}}</div></div>
        </div>
        <md-divider><!-- divider --></md-divider>
      </md-list-item>
      <!-- attendees -->
      <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
        <md-button class="md-icon-button"
                   label:aria-label="Role"
                   ng-click="editor.component.$attendees.nextRole(currentAttendee)"
                   ng-switch="currentAttendee.role">
          <md-tooltip md-direction="right">{{ currentAttendee.role | loc }}</md-tooltip>
          <md-icon class="ng-animate-disabled" ng-switch-when="req-participant">record_voice_over</md-icon>
          <md-icon class="ng-animate-disabled" ng-switch-when="opt-participant">person_outline</md-icon>
          <md-icon class="ng-animate-disabled" ng-switch-when="non-participant" rsrc:md-svg-src="img/voice_over_off.svg"><!-- non-participant --></md-icon>
          <md-icon class="ng-animate-disabled" ng-switch-when="chair">event_seat</md-icon>
        </md-button>
        <sg-avatar-image class="md-avatar"
                         sg-email="currentAttendee.email"
                         size="40">{{ editor.defaultIconForAttendee(currentAttendee) }}</sg-avatar-image>
        <div class="sg-tile-content">
          <div class="sg-md-subhead"><div>{{currentAttendee.name}}</div></div>
          <div class="sg-md-body">
            <div>{{currentAttendee.email}}</div>
            <md-button class="sg-tile-btn" md-colors="::{ color: 'accent-600'}" ng-if="currentAttendee.isExpandableGroup" ng-click="editor.expandAttendee(currentAttendee)">
              <md-icon md-colors="::{ color: 'accent-600'}">add_box</md-icon><span ng-bind="currentAttendee.members.length"></span>
            </md-button>
          </div>
        </div>
        <md-button class="md-icon-button"
                   label:aria-label="Delete"
                   ng-click="editor.removeAttendee(currentAttendee, eventForm)">
          <md-icon>close</md-icon>
        </md-button>
        <md-divider><!-- divider --></md-divider>
      </md-list-item>
    </md-list>
    <md-content id="freebusy" class="sg-freebusy" sg-component="editor.component">
      <!-- freebusy -->
      <md-list class="day"
               id="freebusy_day_{{ day.getDayString }}"
               ng-repeat="day in editor.attendeesEditor.days track by day.getDayString">
        <!-- timeline -->
        <md-list-item layout-align="start end">
          <div layout="column" layout-align="end start">
            <div>{{day.stringWithSeparator}}</div>
            <div class="hours" layout="row" layout-align="space-between center">
              <div class="hour" ng-repeat="hour in ::editor.attendeesEditor.hours">{{hour}}</div>
            </div>
          </div>
        </md-list-item>
        <!-- organizer freebusy -->
        <sg-freebusy-day
            sg-day="day.getDayString"
            sg-attendees="editor.component.$attendees"
            sg-attendee="editor.component.organizer"><!-- organizer --></sg-freebusy-day>
        <!-- attendees freebusy -->
        <sg-freebusy-day
            ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email"
            sg-day="day.getDayString"
            sg-attendees="editor.component.$attendees"
            sg-attendee="currentAttendee"><!-- attendees --></sg-freebusy-day>
      </md-list>
    </md-content>
  </div><!-- row -->
  <!-- freebusy caption -->
  <div layout="row" layout-align="end center" class="sg-padded--top">
    <div class="quarter"><div class="busy sg-color-sample"><!-- busy --></div></div>
    <label class="md-caption"><var:string label:value="Busy"/></label>
    <div class="quarter"><div class="sg-no-freebusy sg-color-sample"><!-- no fb --></div></div>
    <label class="md-caption"><var:string label:value="No free-busy information"/></label>
  </div>
</container>
