<?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">
  <md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
        <div class="sg-md-title md-flex sg-no-transition">
          <!-- classification -->
          <md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
          <md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
          <!-- priority -->
          <md-icon ng-if="::editor.highPriority()">priority_high</md-icon>
          <!-- summary -->
          <span ng-bind="::editor.component.summary"><!-- summary --></span>
        </div>
        <md-menu>
          <md-button label:aria-label="More options" class="md-icon-button" ng-click="$mdMenu.open($event)">
            <md-icon>more_vert</md-icon>
          </md-button>
          <md-menu-content>
            <md-menu-item>
              <md-button label:aria-label="View Raw Source"
                         ng-click="editor.toggleRawSource($event)">
                <var:string label:value="View Raw Source"/>
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-menu>
                <md-button label:aria-label="Copy To" ng-click="$mdMenu.open($event)">
                  <var:string label:value="Copy To"/>
                </md-button>
                <md-menu-content width="4">
                  <div ng-repeat="calendar in editor.calendarService.$findAll(null, true) track by calendar.id">
                    <md-menu-item>
                      <md-button class="sg-no-wrap"
                                 ng-click="editor.copySelectedComponent(calendar.id)">
                        <div layout="row" layout-align="start center">
                          <div class="sg-color-chip"
                               ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
                          <div ng-bind="::calendar.name"><!-- calendar --></div>
                        </div>
                      </md-button>
                    </md-menu-item>
                  </div>
                </md-menu-content>
              </md-menu>
            </md-menu-item>
            <md-menu-item ng-show="editor.component.isErasable">
              <md-menu>
                <md-button label:aria-label="Move To" ng-click="$mdMenu.open($event)">
                  <var:string label:value="Move To"/>
                </md-button>
                <md-menu-content width="4">
                  <div ng-repeat="calendar in editor.calendarService.$findAll(null, true) track by calendar.id">
                    <md-menu-item>
                      <md-button class="sg-no-wrap"
                                 ng-disabled="editor.component.destinationCalendar == calendar.id"
                                 ng-click="editor.moveSelectedComponent(calendar.id)">
                        <div layout="row" layout-align="start center">
                          <div class="sg-color-chip"
                               ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
                          <div ng-bind="::calendar.name"><!-- calendar --></div>
                        </div>
                      </md-button>
                    </md-menu-item>
                  </div>
                </md-menu-content>
              </md-menu>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
        <md-button class="md-icon-button"
                   ng-show="editor.component.attendees.length > 0"
                   ng-click="editor.newMessageWithAllRecipients($event)">
          <md-icon label:aria-label="Email Attendees">mail</md-icon>
        </md-button>
        <md-button class="md-icon-button" ng-click="editor.close()">
          <md-icon label:aria-label="Close">close</md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <md-list>
        <!-- categories -->
        <md-list-item ng-show="editor.component.categories.length > 0">
          <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
            <md-chip-template>
              <span class="sg-chip-color" style="z-index: 1">
                <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
              </span>
              <span ng-bind="::$chip"><!-- category --></span>
            </md-chip-template>
          </md-chips>
        </md-list-item>
        <!-- location -->
        <md-list-item ng-show="editor.component.location">
          <md-icon>place</md-icon>
          <p ng-bind-html="::editor.component.location | txt2html"><!-- location --></p>
        </md-list-item>
        <!-- calendar -->
        <md-list-item>
          <md-icon>event</md-icon>
          <div layout="row" layout-align="start center">
            <div class="sg-color-chip"
                 ng-class="::editor.component.getClassName('bg')"><!-- color --></div>
            <div ng-bind="::editor.component.calendar"><!-- calendar --></div>
          </div>
        </md-list-item>
        <!-- classification -->
        <md-list-item>
          <md-icon>visibility</md-icon>
          <md-radio-group layout="row"
                          ng-model="editor.component.classification">
            <md-radio-button class="sg-padded--right" value="public">
              <var:string label:value="label_Public"/>
            </md-radio-button>
            <md-radio-button class="sg-padded--right" value="confidential">
              <var:string label:value="label_Confidential"/>
            </md-radio-button>
            <md-radio-button value="private">
              <var:string label:value="label_Private"/>
            </md-radio-button>
          </md-radio-group>
        </md-list-item>
        <!-- start/end dates -->
        <md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }">
          <md-icon>access_time</md-icon>
          <div class="md-list-item-text" ng-show="editor.component.startDate">
            <label class="pseudo-input-label"><var:string label:value="Start"/></label>
            <div ng-bind="::editor.component.localizedStartDate"><!-- start date --></div>
            <div ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></div>
          </div>
          <div class="md-list-item-text" ng-show="editor.component.endDate">
            <label class="pseudo-input-label"><var:string label:value="End"/></label>
            <div ng-bind="::editor.component.localizedEndDate"><!-- end date --></div>
            <div ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedEndTime"><!-- end time --></div>
          </div>
        </md-list-item>
        <!-- is transparent -->
        <md-list-item ng-show="::editor.component.isTransparent">
          <md-icon>event_available</md-icon>
          <p><var:string label:value="Show Time as Free"/></p>
        </md-list-item>
        <!-- send appointment notifications -->
        <md-list-item ng-show="::editor.component.sendAppointmentNotifications">
          <md-icon>send</md-icon>
          <p><var:string label:value="Send Appointment Notifications"/></p>
        </md-list-item>
        <!-- attach urls -->
        <md-list-item ng-show="::(editor.component.attachUrls.length > 0)">
          <md-icon>link</md-icon>
          <p ng-repeat="url in ::editor.component.attachUrls"><a rel="noopener" target="_new" ng-href="{{::url.value}}" ng-bind="::url.value"><!-- link --></a></p>
        </md-list-item>
        <!-- comment -->
        <md-list-item ng-show="::editor.component.comment">
          <md-icon>mode_comment</md-icon>
          <p ng-bind-html="::editor.component.comment | txt2html"><!-- comment --></p>
        </md-list-item>
        <!-- repeat -->
        <md-list-item ng-show="::editor.component.$isRecurrent">
          <md-icon>repeat</md-icon>
          <p ng-bind="::editor.component.repeatDescription()"><!-- repeat --></p>
        </md-list-item>
        <!-- reminder -->
        <md-list-item ng-hide="::(!editor.component.$hasAlarm || editor.component.userHasRSVP)">
          <md-icon>alarm_on</md-icon>
          <p ng-bind="::editor.component.alarmDescription()"><!-- alarm --></p>
        </md-list-item>
        <md-list-item layout-align="start start" ng-show="::editor.component.organizer">
          <md-icon>people</md-icon>
          <div layout="column" layout-fill="layout-fill">
            <!-- organizer -->
            <div class="pseudo-input-container" ng-show="::editor.component.organizer">
              <label class="pseudo-input-label"><var:string label:value="Organizer"/></label>
              <md-chips class="md-contact-chips sg-readonly"
                        ng-model="::editor.organizer"
                        readonly="true">
                <md-chip-template>
                  <div class="md-contact-avatar">
                    <sg-avatar-image sg-email="$chip.email" size="26">person</sg-avatar-image>
                  </div>
                  <div class="md-contact-name">
                    <a href="#"
                       label:aria-label="Email Organizer"
                       ng-click="editor.newMessageWithRecipient($event, $chip.name, $chip.email)">{{$chip.name}}</a>
                    <md-tooltip md-direction="bottom" ng-show="$chip.email != $chip.name">{{ $chip.email }}</md-tooltip>
                  </div>
                </md-chip-template>
              </md-chips>
            </div>
            <!-- attendees -->
            <div class="pseudo-input-container" ng-show="::(editor.component.attendees.length > 0)">
              <label class="pseudo-input-label"><var:string label:value="Attendees"/></label>
              <!-- md-contact-chips don't support "readonly", so we build them using md-chips
                   in readonly mode and a template similar to the one of md-contact-chips -->
              <md-chips class="md-contact-chips sg-readonly sg-with-secondary"
                        ng-model="::editor.component.attendees"
                        readonly="true">
                <md-chip-template>
                  <div class="md-contact-avatar">
                    <sg-avatar-image sg-email="$chip.email" size="26">person</sg-avatar-image>
                  </div>
                  <div class="md-contact-name">
                    <a href="#"
                       ng-click="editor.newMessageWithRecipient($event, $chip.name, $chip.email)">{{$chip.name}}</a>
                    <md-tooltip md-direction="bottom" ng-show="$chip.email != $chip.name">{{ $chip.email }}</md-tooltip>
                  </div>
                  <md-icon class="sg-secondary" ng-class="'icon-' + $chip.partstat"><!-- partstat --></md-icon>
                </md-chip-template>
              </md-chips>
            </div>
          </div>
        </md-list-item>
      </md-list>
      <!-- invitation -->
      <md-list ng-show="::editor.component.userHasRSVP">
        <md-divider><!-- divider --></md-divider>
        <md-subheader class="md-no-sticky sg-padded--top"><var:string label:value="You are invited to participate"/></md-subheader>
        <!-- participation status -->
        <md-list-item>
          <md-icon>insert_invitation</md-icon>
          <md-input-container>
            <md-select label:aria-label="Reply" ng-model="editor.component.reply">
              <var:foreach list="replyList" item="item">
                <md-option var:value="item">
                  <var:string value="itemReplyText"/>
                </md-option>
              </var:foreach>
            </md-select>
          </md-input-container>
        </md-list-item>
        <md-list-item ng-show="editor.component.reply == 4">
          <md-icon><!-- space --></md-icon>
          <md-autocomplete
              class="md-flex"
              md-input-name="delegatedTo"
              md-search-text="editor.component.delegatedTo"
              md-selected-item="cardToAdd"
              md-items="card in editor.cardFilter(editor.component.delegatedTo)"
              md-item-text="card.$$email"
              var:md-min-length="minimumSearchLength"
              md-no-cache="true"
              label:md-floating-label="Delegated to">
            <span class="md-contact-suggestion" layout="row" layout-align="space-between center">
              <span class="md-contact-name"
                    md-highlight-text="editor.component.delegatedTo"
                    md-highlight-flags="^i">{{card.$$fullname}}</span> <span class="md-contact-email"
                    md-highlight-text="editor.component.delegatedTo"
                    md-highlight-flags="^i">{{card.$$email}}</span>
            </span>
          </md-autocomplete>
        </md-list-item>
        <!-- reminder -->
        <md-list-item ng-show="::editor.component.userHasRSVP">
          <md-icon>alarm</md-icon>
          <p>
            <md-checkbox style="margin-bottom: 0"
                         ng-model="editor.component.$hasAlarm"
                         label:aria-label="Reminder"><var:string label:value="Reminder"/></md-checkbox>
          </p>
        </md-list-item>
      </md-list>
      <div class="sg-inset" ng-show="::editor.component.userHasRSVP">
        <span ng-show="editor.component.$hasAlarm"><var:component className="UIxReminderEditor" /></span>
      </div>
    </md-dialog-content>

    <!-- actions -->

    <!-- editable but not recurrent -->
    <md-dialog-actions ng-show="::editor.component.isActionable()">
      <md-button class="md-warn"
                 label:aria-label="Delete Event"
                 ng-show="::editor.component.isErasable"
                 ng-click="editor.deleteAllOccurrences()">
        <var:string label:value="Delete"/>
      </md-button>
      <div class="md-flex"><!-- spacer --></div>
      <md-button type="button"
                 ng-show="::editor.component.isEditable"
                 ng-click="editor.edit()">
        <var:string label:value="Edit"/>
      </md-button>
    </md-dialog-actions>
    <!-- editable and recurrent -->
    <md-dialog-actions ng-show="::editor.component.isActionableOccurrence()">
      <md-menu ng-show="::editor.component.isErasable">
        <md-button class="md-warn"
                   label:aria-label="Delete Event"
                   ng-click="$mdMenu.open()"
                   md-menu-origin="md-menu-origin">
          <var:string label:value="Delete"/> <md-icon>arrow_drop_down</md-icon>
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button class="md-warn"
                       label:aria-label="Delete This Occurrence"
                       ng-click="editor.deleteOccurrence()">
              <md-icon>repeat_one</md-icon> <var:string label:value="Delete This Occurrence"/>
            </md-button>
          </md-menu-item>
          <md-menu-item>
            <md-button class="md-warn"
                       label:aria-label="Delete All Occurrences"
                       ng-click="editor.deleteAllOccurrences()">
              <md-icon>repeat</md-icon> <var:string label:value="Delete All Occurrences"/>
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
      <div class="md-flex"><!-- spacer --></div>
      <md-menu ng-show="::editor.component.isEditable">
        <md-button label:aria-label="Edit"
                   ng-click="$mdMenu.open()"
                   md-menu-origin="md-menu-origin">
          <var:string label:value="Edit"/> <md-icon>arrow_drop_down</md-icon>
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button type="button" label:aria-label="Edit This Occurrence"
                       ng-click="editor.edit()">
              <md-icon>repeat_one</md-icon> <var:string label:value="Edit This Occurrence"/>
            </md-button>
          </md-menu-item>
          <md-menu-item>
            <md-button type="button" label:aria-label="Edit All Occurrences"
                       ng-click="editor.editAllOccurrences()">
              <md-icon>repeat</md-icon> <var:string label:value="Edit All Occurrences"/>
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-dialog-actions>
    <!-- invitation but not recurrent -->
    <md-dialog-actions ng-show="::editor.component.isInvitation()">
      <md-button class="md-warn"
                 label:aria-label="Delete Event"
                 ng-click="editor.deleteAllOccurrences()">
        <var:string label:value="Delete"/>
      </md-button>
      <div class="md-flex"><!-- spacer --></div>
      <md-button type="button"
                 label:aria-label="Update"
                 ng-click="editor.reply()">
        <var:string label:value="Update"/>
      </md-button>
    </md-dialog-actions>
    <!-- invitation and recurrent -->
    <md-dialog-actions ng-show="::editor.component.isInvitationOccurrence()">
      <md-menu>
        <md-button class="md-warn"
                   label:aria-label="Delete Event"
                   ng-click="$mdMenu.open()"
                   md-menu-origin="md-menu-origin">
          <var:string label:value="Delete"/> <md-icon>arrow_drop_down</md-icon>
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button class="md-warn"
                       label:aria-label="Delete This Occurrence"
                       ng-click="editor.deleteOccurrence()">
              <md-icon>repeat_one</md-icon> <var:string label:value="Delete This Occurrence"/>
            </md-button>
          </md-menu-item>
          <md-menu-item>
            <md-button class="md-warn"
                       label:aria-label="Delete All Occurrences"
                       ng-click="editor.deleteAllOccurrences()">
              <md-icon>repeat</md-icon> <var:string label:value="Delete All Occurrences"/>
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
      <div class="md-flex"><!-- spacer --></div>
      <md-menu>
        <md-button label:aria-label="Update"
                   ng-click="$mdMenu.open()"
                   md-menu-origin="md-menu-origin">
          <var:string label:value="Update"/> <md-icon>arrow_drop_down</md-icon>
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button type="button"
                       label:aria-label="Update This Occurrence"
                       ng-click="editor.reply()">
              <md-icon>repeat_one</md-icon> <var:string label:value="Update This Occurrence"/>
            </md-button>
          </md-menu-item>
          <md-menu-item>
            <md-button type="button"
                       label:arial-label="Update All Occurrences"
                       ng-click="editor.replyAllOccurrences()">
              <md-icon>repeat</md-icon> <var:string label:value="Update All Occurrences"/>
            </md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </md-dialog-actions>
  </md-dialog>
</container>
