UIxPreferences.wox

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    className="UIxPageFrame"
    title="title"
    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">

  <main layout-fill="layout-fill" ui-view="preferences"
        ng-controller="navController"><!-- preferences --> </main>

  <script type="text/javascript">
    var mailCustomFromEnabled = <var:string value="mailCustomFromEnabled" const:escapeHTML="NO"/>;
    var forwardEnabled = <var:string value="forwardEnabled" const:escapeHTML="NO"/>;
    var vacationEnabled = <var:string value="isVacationEnabled" const:escapeHTML="NO"/>;
    var timeZonesList = <var:string value="timeZonesList" const:escapeHTML="NO"/>;
    var defaultEmailAddresses = '<var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>';
    var defaultCalendarCategories = <var:string value="defaultCalendarCategoriesColors" const:escapeHTML="NO"/>;
    var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
    var forwardConstraintsDomains = <var:string value="forwardConstraintsDomains" const:escapeHTML="NO"/>;
    var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
    var hasActiveExternalSieveScripts = <var:string value="hasActiveExternalSieveScripts" const:escapeHTML="NO"/>;
  </script>

  <script type="text/ng-template" id="preferences.html">
    <form name="preferencesForm" class="view"
          layout="row" layout-fill="layout-fill">
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" layout="column"
                md-component-id="left" md-is-locked-open="isGtMedium"
                ng-class="{ 'sg-close': leftIsClose }">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex"
                  md-colors="::{ backgroundColor: 'default-background-300' }">
        <md-subheader
            md-colors="::{background: 'default-background-300'}">{{ ::'Preferences' | loc }}</md-subheader>
        <md-list>
          <md-list-item ng-click="app.go('general', preferencesForm)"
                        ng-disabled="preferencesForm.$invalid"
                        ui-sref="preferences.general"
                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
            <md-icon>settings</md-icon>
            <p class="sg-item-name"><var:string label:value="General"/></p>
          </md-list-item>
          <var:if condition="userHasCalendarAccess">
            <md-list-item ng-click="app.go('calendars', preferencesForm)"
                          ng-disabled="preferencesForm.$invalid"
                          ui-sref="preferences.calendars"
                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon>event</md-icon>
              <p class="sg-item-name"><var:string label:value="Calendar"/></p>
            </md-list-item>
          </var:if>
          <md-list-item ng-click="app.go('addressbooks', preferencesForm)"
                        ng-disabled="preferencesForm.$invalid"
                        ui-sref="preferences.addressbooks"
                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
            <md-icon>contacts</md-icon>
            <p class="sg-item-name"><var:string label:value="Contacts"/></p>
          </md-list-item>
          <var:if condition="userHasMailAccess">
            <md-list-item ng-click="app.go('mailer', preferencesForm)"
                          ng-disabled="preferencesForm.$invalid"
                          ui-sref="preferences.mailer"
                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon>email</md-icon>
              <p class="sg-item-name"><var:string label:value="Mail"/></p>
            </md-list-item>
          </var:if>
        </md-list>
      </md-content>
    </md-sidenav>

    <section  layout="column" layout-fill="layout-fill">

      <!-- TOP RIGHT TOOLBAR -->
      <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
        <var:component className="UIxTopnavToolbar" const:navButtonClick="app.confirmChanges($event, preferencesForm)"/>
        <md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
                   ng-disabled="preferencesForm.$invalid || preferencesForm.$pristine"
                   ng-click="app.save(preferencesForm)">
          <md-icon>save</md-icon>
        </md-button>
      </md-toolbar>

      <md-content layout="column">
        <div ui-view="module"><!-- view --></div>
      </md-content>
    </section>

    </form>
  </script>

  <!--
      GENERAL PREFERENCE PANEL
  -->
  <script type="text/ng-template" id="generalPreferences.html">

    <md-tabs class="md-flex" md-border-bottom="md-border-bottom" md-dynamic-height="true">

      <!-- GENERAL OPTIONS -->
      <md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
        <md-content layout="row"
                    aria-labelledby="generalOptionsView"
                    id="generalOptionsView-content" class="md-inline-form md-padding">
          <div layout="column" flex="100">
            <md-input-container>
              <label><var:string label:value="SOGo Version"/></label>
              <input type="text" ng-readonly="true" var:value="sogoVersion"/>
            </md-input-container>

            <div layout="row">
              <md-input-container class="md-block" flex="50">
                <label><var:string label:value="Language"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoLanguage"
                           ng-change="app.onLanguageChange(preferencesForm)">
                  <var:foreach list="languages" item="item">
                    <md-option var:value="item">
                      <var:string value="languageText"/> <small md-colors="::{ color: 'default-background-500'}"><var:string value="languageLocale.NSLocaleCode"/></small>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
              <md-autocomplete
                  class="md-block" flex="50"
                  md-search-text="app.timeZonesSearchText"
                  md-selected-item="app.preferences.defaults.SOGoTimeZone"
                  md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
                  md-item-text="timezone"
                  md-min-length="3"
                  md-select-on-match="true"
                  md-match-case-insensitive="true"
                  ng-required="true"
                  sg-select-only="sg-select-only"
                  label:md-floating-label="Current Time Zone">
                <md-item-template>
                  <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
                </md-item-template>
                <md-not-found>
                  <var:string label:value="No matches found."/>
                </md-not-found>
              </md-autocomplete>
            </div>

            <div layout="row" layout-wrap="layout-wrap">
              <md-input-container class="md-block" flex="30" flex-xs="100">
                <label><var:string label:value="Short Date Format"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
                  <var:foreach list="shortDateFormatsList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemShortDateFormatText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
              <md-input-container class="md-block" flex="40" flex-xs="100">
                <label><var:string label:value="Long Date Format"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
                  <var:foreach list="longDateFormatsList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemLongDateFormatText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
              <md-input-container class="md-block" flex="30" flex-xs="100">
                <label><var:string label:value="Time Format"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
                  <var:foreach list="timeFormatsList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemTimeFormatText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>

            <md-input-container>
              <label><var:string label:value="Default Module"/></label>
              <md-select ng-model="app.preferences.defaults.SOGoLoginModule">
                <var:foreach list="availableModules" item="item">
                  <md-option var:value="item">
                    <var:string value="itemModuleText"/>
                  </md-option>
                </var:foreach>
              </md-select>
            </md-input-container>

            <md-input-container>
              <label><var:string label:value="Refresh View"/></label>
              <md-select ng-model="app.preferences.defaults.SOGoRefreshViewCheck">
                <var:foreach list="refreshViewList" item="item">
                  <md-option var:value="item">
                    <var:string value="itemRefreshViewCheckText"/>
                  </md-option>
                </var:foreach>
              </md-select>
            </md-input-container>

            <var:if condition="externalAvatarsEnabled">
            <div layout="row" layout-align="start start">
              <md-checkbox flex="20"
                           ng-model="app.preferences.defaults.SOGoGravatarEnabled"
                           ng-true-value="1"
                           ng-false-value="0"
                           label:aria-label="Use Gravatar">
                <var:string label:value="Use Gravatar"/>
              </md-checkbox>
              <md-input-container class="md-flex">
                <label><var:string label:value="Alternate Avatar"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoAlternateAvatar"
                           ng-disabled="!app.preferences.defaults.SOGoGravatarEnabled">
                  <var:foreach list="alternateAvatar" item="item">
                    <md-option var:value="item">
                      <var:string value="itemAlternateAvatarText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>
            </var:if>

            <md-input-container class="md-block md-input-has-value">
              <label><var:string label:value="Animation Level"/></label>
              <md-radio-group ng-model="app.preferences.defaults.SOGoAnimationMode">
                <md-radio-button value="normal"><var:string label:value="animation_NORMAL"/></md-radio-button>
                <md-radio-button value="limited"><var:string label:value="animation_LIMITED"/></md-radio-button>
                <md-radio-button value="none"><var:string label:value="animation_NONE"/></md-radio-button>
              </md-radio-group>
            </md-input-container>

          </div>
        </md-content>
      </md-tab>

      <!-- PASSWORD OPTIONS -->
      <var:if condition="shouldDisplayPasswordChange">
        <md-tab id="generalPasswordView"
                aria-controls="generalPasswordView-content"
                label:label="Password">
          <md-content id="passwordView" class="md-padding">
            <div layout="row">
              <md-input-container class="md-block" flex="50">
                <label><var:string label:value="New password"/>
                </label>
	        <input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
              </md-input-container>

              <md-input-container class="md-block" flex="50">
                <label><var:string label:value="Confirmation"/>
                </label>
	        <input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
              </md-input-container>
            </div>
            <div layout="row" layout-align="end center">
              <md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword()">
                <var:string label:value="Change"/>
              </md-button>
            </div>
          </md-content>
        </md-tab>
      </var:if>

    </md-tabs>
  </script>

  <!--
      CALENDAR PREFERENCE PANEL
  -->
  <script type="text/ng-template" id="calendarsPreferences.html">
    <var:if condition="userHasCalendarAccess">
      <md-tabs md-border-bottom="md-border-bottom" md-dynamic-height="true">

        <!-- CALENDAR - GENERAL -->
        <md-tab id="calendarOptionsView"
                aria-controls="calendarOptionsView-content"
                label:label="General">
          <md-content layout="row" layout-align="center center"
                      aria-labelledby="calendarOptionsView"
                      class="md-padding"
                      id="calendarOptionsView-content">
            <div layout="column" flex="100">
              <div layout="row">
                <md-input-container class="md-block" flex="33">
                  <label><var:string label:value="Week begins on" /></label>
                  <md-select ng-model="app.preferences.defaults.SOGoFirstDayOfWeek">
                    <var:foreach list="daysList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemWeekStartDay"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>

                <md-input-container class="md-block" flex="33">
                  <label><var:string label:value="Day start time" /></label>
                  <md-select ng-model="app.preferences.defaults.SOGoDayStartTime">
                    <var:foreach list="hoursList" item="item">
                      <md-option var:value="item">
                        <var:string value="item"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>

                <md-input-container class="md-block" flex="33">
                  <label><var:string label:value="Day end time" /></label>
                  <md-select ng-model="app.preferences.defaults.SOGoDayEndTime">
                    <var:foreach list="hoursList" item="item">
                      <md-option var:value="item">
                        <var:string value="item"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>
              </div>

              <div class="pseudo-input-container"
                   layout="row" layout-align="center center">
                <label class="pseudo-input-label"><var:string label:value="Week days to display"/></label>
                <md-grid-list md-cols="7" md-row-height="2em" md-gutter="0.5em"
                              flex="50" flex-sm="80" flex-xs="100"
                              ng-model="app.preferences.defaults.SOGoCalendarWeekdays"
                              ng-required="true"
                              sg-toggle-grid="sg-toggle-grid">
                  <var:foreach list="shortWeekDaysList" item="item">
                    <md-grid-tile var:value="valueForWeekDay"><var:string value="item"/></md-grid-tile>
                  </var:foreach>
                </md-grid-list>
              </div>

              <md-checkbox layout-padding="layout-padding"
                  ng-model="app.preferences.defaults.SOGoBusyOffHours"
                  ng-true-value="1"
                  ng-false-value="0">
                <var:string label:value="Show time as busy outside working hours"/>
              </md-checkbox>

              <md-input-container>
                <label><var:string label:value="First week of year"/></label>
                <md-select label:aria-label="First week of year"
                           ng-model="app.preferences.defaults.SOGoFirstWeekOfYear">
                  <var:foreach list="firstWeekList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemFirstWeekText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>

              <md-input-container>
                <label><var:string label:value="Default calendar" /></label>
                <md-select ng-model="app.preferences.defaults.SOGoDefaultCalendar">
                  <var:foreach list="defaultCalendarList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemCalendarText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>

              <div layout="row">
                <md-input-container class="md-block" flex="50">
                  <label><var:string label:value="Default events classification" /></label>
                  <md-select ng-model="app.preferences.defaults.SOGoCalendarEventsDefaultClassification">
                    <var:foreach list="calendarClassificationsList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemClassificationText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>

                <md-input-container class="md-block" flex="50">
                  <label><var:string label:value="Default tasks classification"/></label>
                  <md-select ng-model="app.preferences.defaults.SOGoCalendarTasksDefaultClassification">
                    <var:foreach list="calendarClassificationsList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemClassificationText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>
              </div>

              <md-input-container>
                <label><var:string label:value="Default reminder"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoCalendarDefaultReminder">
                  <var:foreach list="reminderValues" item="item">
                    <md-option var:value="item">
                      <var:string value="itemReminderText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>
          </md-content>
        </md-tab>

        <!-- CALENDAR - CATEGORIES -->
        <md-tab id="calendarCategories"
                aria-controls="calendarCategories-content"
                label:label="Categories">
          <md-content class="md-padding">
            <div layout="column" flex="100">
              <md-list layout="row" layout-wrap="layout-wrap">
                <md-list-item flex="50" flex-xs="100"
                              ng-repeat="item in
                                         app.preferences.defaults.SOGoCalendarCategories
                                         track by $index">
                  <sg-color-picker ng-model="app.preferences.defaults.SOGoCalendarCategoriesColorsValues[$index]"><!-- color picker--></sg-color-picker>
                  <md-input-container class="md-block md-flex">
	            <input type="text" label:aria-label="Calendar Category" required="required"
                           name="calendarCategory_{{$index}}"
                           ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"
                           ng-change="app.resetCalendarCategoryValidity($index, preferencesForm)"
                           sg-focus-on="calendarCategory_{{$index}}"/>
                    <div ng-messages="preferencesForm['calendarCategory_' + $index].$error">
                      <div ng-message="duplicate"><var:string label:value="Duplicate name"/></div>
                    </div>
                  </md-input-container>
                  <md-button class="sg-icon-button" type="button"
                             layout="row" layout-align="end center"
                             label:aria-label="Remove Calendar Category"
                             ng-click="app.removeCalendarCategory($index, preferencesForm)">
                    <md-icon>remove_circle</md-icon>
                  </md-button>
                </md-list-item>
              </md-list>

              <div layout="row" layout-align="end center">
                <md-button type="button"
                           label:aria-label="Reset to defaults"
                           ng-click="app.resetCalendarCategories(preferencesForm)">
                  <var:string label:value="Reset to defaults"/>
                </md-button>
                <md-button type="button"
                           label:aria-label="Add Calendar Category"
                           ng-click="app.addCalendarCategory(preferencesForm)">
                  <var:string label:value="Add Calendar Category"/>
                </md-button>
              </div>
            </div>
          </md-content>

        </md-tab>

        <!-- CALENDAR - INVITATIONS -->
        <md-tab id="calendarInvitationsTab"
                aria-controls="calendarInvitationsTab-content"
                label:label="Invitations">
          <md-content layout="row" layout-align="space-around start"
                      class="md-padding"
                      aria-labelledby="calendarInvitationsTab"
                      id="calendarInvitationsTab-content">

            <div layout="column" flex="100">
              <md-checkbox
                  ng-model="app.preferences.settings.Calendar.PreventInvitations"
                  ng-true-value="1"
                  ng-false-value="0">
                <var:string label:value="Prevent from being invited to appointments"/>
              </md-checkbox>
              <div flex-offset="5"
                   ng-show="app.preferences.settings.Calendar.PreventInvitations == 1">
                <label>
                  <var:string label:value="White list for appointment invitations"/>
                </label>
                <md-contact-chips
                    flex="100"
                    class="sg-chips-autocomplete"
                    ng-model="app.preferences.settings.Calendar.PreventInvitationsWhitelist"
                    md-contacts="app.userFilter($query, app.preferences.settings.Calendar.PreventInvitationsWhitelist)"
                    md-contact-name="cn"
                    md-contact-image="$$image"
                    md-contact-email="c_email"
                    md-require-match="true"
                    md-highlight-flags="i"
                    filter-selected="false"
                    label:placeholder="Add"><!-- users --></md-contact-chips>
              </div>
            </div>
          </md-content>
        </md-tab>

      </md-tabs>
    </var:if>
  </script>

  <!--
      CONTACTS PREFERENCE PANEL
  -->
  <script type="text/ng-template" id="addressbooksPreferences.html">
    <md-tabs md-dynamic-height="true">

      <!-- CONTACT > CATEGORIES -->
      <md-tab id="contactsCategoriesTab" aria-controls="contactsCategoriesTab-content" label:label="Categories">

        <md-content role="tabpanel" aria-labelledby="contactsCategoriesView"
                    id="contactsCategoriesView-content" class="md-padding">
          <div layout="column" flex="100">
            <md-list layout="row" layout-wrap="layout-wrap">
              <md-list-item flex="50" flex-sm="100"
                            ng-repeat="item in
                                       app.preferences.defaults.SOGoContactsCategories
                                       track by $index">
                <md-input-container class="md-block md-flex">
	          <input type="text"
                         label:aria-label="Contact Category"
                         required="required"
                         name="contactCategory_{{$index}}"
                         ng-model="app.preferences.defaults.SOGoContactsCategories[$index]"
                         sg-focus-on="contactCategory_{{$index}}"/>
                    <div ng-messages="preferencesForm['contactCategory_' + $index].$error">
                      <div ng-message="duplicate"><var:string label:value="Duplicate name"/></div>
                    </div>
                </md-input-container>
                <md-button type="button" class="sg-icon-button"
                           label:aria-label="Remove Contact Category"
                           ng-click="app.removeContactCategory($index, preferencesForm)">
                  <md-icon>remove_circle</md-icon>
                </md-button>
              </md-list-item>
            </md-list>

            <div layout="row" layout-align="end center">
              <md-button type="button"
                         label:aria-label="Add Contact Category"
                         ng-click="app.addContactCategory(preferencesForm)">
                <var:string label:value="Add Contact Category"/>
              </md-button>
            </div>
          </div>
        </md-content>

      </md-tab>
      <!-- END OF CONTACT > CATEGORIES -->

    </md-tabs>
  </script>

  <!--
      MAIL PREFERENCE PANEL
  -->
  <script type="text/ng-template" id="mailerPreferences.html">
    <var:if condition="userHasMailAccess">
      <md-tabs md-dynamic-height="true">

        <!-- MAIL > GENERAL -->
        <md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
          <md-content role="tabpanel" aria-labelledby="mailGeneralView"
                      id="mailGeneralView-content" class="md-padding md-inline-form">

            <div>
              <md-checkbox
                  ng-model="app.preferences.defaults.SOGoMailShowSubscribedFoldersOnly"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:aria-label="Show subscribed mailboxes only">
                <var:string label:value="Show subscribed mailboxes only"/>
              </md-checkbox>
            </div>

            <div>
              <md-checkbox
                  ng-model="app.preferences.defaults.SOGoMailSynchronizeOnlyDefaultFolders"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:aria-label="Synchronize only default mail folders (EAS)">
                <var:string label:value="Synchronize only default mail folders (EAS)"/>
              </md-checkbox>
            </div>

            <div>
              <md-checkbox
                  ng-model="app.preferences.defaults.SOGoMailFetchAllUnseenCountFolders"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:aria-label="Fetch count of unseen messages for all mailboxes">
                <var:string label:value="Fetch count of unseen messages for all mailboxes"/>
              </md-checkbox>
            </div>

            <div>
              <md-checkbox
                  ng-model="app.preferences.defaults.SOGoMailSortByThreads"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:aria-label="Sort messages by threads">
                <var:string label:value="Sort messages by threads"/>
              </md-checkbox>
            </div>

            <div class="hide-xs" layout="row" layout-align="start center" flex="50">
              <md-checkbox
                  class="md-align-top-left"
                  ng-model="app.preferences.defaults.SOGoMailComposeWindowEnabled"
                  label:aria-label="Always show mail composer">
                <!-- SOGoMailComposeWindow -->
              </md-checkbox>

              <md-input-container class="md-block hide-xs" flex="50">
                <label><var:string label:value="Always open mail composer"/></label>
                <md-select
                    ng-disabled="!app.preferences.defaults.SOGoMailComposeWindowEnabled"
                    ng-model="app.preferences.defaults.SOGoMailComposeWindow">
                  <md-option value="inline">
                    <var:string label:value="Inside current window"/>
                  </md-option>
                  <md-option value="popup">
                    <var:string label:value="In a popup window"/>
                  </md-option>
                </md-select>
              </md-input-container>
            </div>

            <div layout="row" layout-align="start center" flex="50" flex-xs="100">
              <md-checkbox
                  class="md-align-top-left"
                  ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:aria-label="When sending mail, add unknown recipients to my">
                <!-- SOGoMailAddOutgoingAddresses -->
              </md-checkbox>

              <md-input-container class="md-block md-flex">
                <label><var:string label:value="When sending mail, add unknown recipients to my"/></label>
                <md-select
                    ng-disabled="app.preferences.defaults.SOGoMailAddOutgoingAddresses != 1"
                    ng-model="app.preferences.defaults.SOGoSelectedAddressBook">
                  <var:foreach list="addressBookList" item="item">
                    <md-option var:value="item.id">
                      <var:string value="item.name"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>

            <md-input-container class="md-block" flex="50" flex-xs="100">
              <label><var:string label:value="Forward messages"/></label>
              <md-select ng-model="app.preferences.defaults.SOGoMailMessageForwarding">
                <var:foreach list="messageForwardingList" item="item">
                  <md-option var:value="item">
                    <var:string value="itemMessageForwardingText"/>
                  </md-option>
                </var:foreach>
              </md-select>
            </md-input-container>

            <div layout="row" layout-wrap="layout-wrap">
              <md-input-container class="md-block" flex="50" flex-xs="100">
                <label><var:string label:value="When replying to a message"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoMailReplyPlacement">
                  <var:foreach list="replyPlacementList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemReplyPlacementText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>

              <md-input-container class="md-block" flex="50" flex-xs="100">
                <label><var:string label:value="And place my signature"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoMailSignaturePlacement">
                  <var:foreach list="signaturePlacementList" item="item">
                    <md-option var:value="item">
                      <var:string value="itemSignaturePlacementText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>

            <div layout="row" layout-wrap="layout-wrap">
              <md-input-container class="md-block" flex="50">
                <label><var:string label:value="Compose messages in"/></label>
                <md-select ng-model="app.preferences.defaults.SOGoMailComposeMessageType">
                  <var:foreach list="composeMessagesType" item="item">
                    <md-option var:value="item">
                      <var:string value="itemComposeMessagesText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>

              <div layout="row" flex="50"
                   ng-show="app.preferences.defaults.SOGoMailComposeMessageType == 'html'">
                <md-checkbox
                    ng-model="app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
                    label:aria-label="Default font size"><!-- default font size -->
                </md-checkbox>
                <md-input-container class="md-block md-flex">
                  <label><var:string label:value="Default font size"/></label>
                  <md-select label:aria-label="Default font size"
                             ng-disabled="!app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
                             ng-required="app.preferences.defaults.SOGoMailComposeFontSizeEnabled"
                             ng-model="app.preferences.defaults.SOGoMailComposeFontSize">
                    <var:foreach list="fontSizesList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemFontSizeText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>
              </div>
            </div>

            <md-input-container class="md-block" flex="50" flex-xs="100">
              <label><var:string label:value="Display remote inline images"/></label>
              <md-select ng-model="app.preferences.defaults.SOGoMailDisplayRemoteInlineImages">
                <var:foreach list="displayRemoteInlineImages" item="item">
                  <md-option var:value="item">
                    <var:string value="itemDisplayRemoteInlineImagesText"/>
                  </md-option>
                </var:foreach>
              </md-select>
            </md-input-container>

            <div layout="row" layout-align="start center">
              <p><var:string label:value="Auto save every"/></p>
              <md-input-container class="md-input-number" md-no-float="md-no-float">
                <input type="number" min="0" label:aria-label="minutes"
                       ng-model="app.preferences.defaults.SOGoMailAutoSave"/>
              </md-input-container>
              <var:string label:value="minutes"/>
            </div>

          </md-content>
        </md-tab>
        <!-- END OF MAIL > GENERAL -->

        <!-- MAIL > LABELS -->
        <md-tab id="mailLabelsTab"
                aria-controls="mailLabelsTab-content" label:label="Labels">

          <md-content role="tabpanel" aria-labelledby="mailLabelsView"
                      id="mailLabelsView-content" class="md-padding">
            <md-list layout="row" layout-xs="column" layout-wrap="layout-wrap">
              <md-list-item flex="50" flex-xs="100"
                            ng-repeat="key in app.preferences.defaults.SOGoMailLabelsColorsKeys
                                       track by $index">
                <sg-color-picker ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][1]"><!-- color picker--></sg-color-picker>
                <div layout="row" class="md-flex">
                  <md-input-container class="md-block md-flex">
                    <label><var:string label:value="Label"/></label>
	            <input type="text"
                           label:aria-label="Label"
                           ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][0]"
                           sg-focus-on="mailLabel_{{$index}}"/>
                  </md-input-container>
                  <md-input-container class="md-block md-flex">
                    <label><var:string label:value="IMAP Label"/></label>
	            <input type="text"
                           name="mailIMAPLabel_{{$index}}"
                           label:aria-label="IMAP Label"
                           ng-model="app.preferences.defaults.SOGoMailLabelsColorsKeys[$index]"
                           ng-change="app.resetMailLabelValidity($index, preferencesForm)"
                           ng-pattern="app.mailLabelKeyRE" />
                    <div ng-messages="preferencesForm['mailIMAPLabel_' + $index].$error">
                      <div ng-message="pattern"><var:string label:value="Invalid label"/></div>
                      <div ng-message="duplicate"><var:string label:value="Duplicate label"/></div>
                    </div>
                  </md-input-container>
                </div>
                <md-button class="md-icon-button" type="button"
                           layout="row" layout-align="end center"
                           label:aria-label="Delete Label"
                           ng-click="app.removeMailLabel($index, preferencesForm)">
                  <md-icon>remove_circle</md-icon>
                </md-button>
              </md-list-item>
            </md-list>

            <div layout="row" layout-align="end center">
              <md-button type="button"
                         label:aria-label="Create Label"
                         ng-click="app.addMailLabel(preferencesForm)">
                <var:string label:value="Create Label"/>
              </md-button>
            </div>
          </md-content>
        </md-tab>
        <!-- END OF MAIL > LABELS -->

        <!-- MAIL > ACCOUNTS -->
        <md-tab id="mailAccountsTab"
                aria-controls="mailAccountsTab-content"
                label:label="IMAP Accounts">

          <md-list class="md-padding">
            <md-list-item ng-repeat="item in
                                     app.preferences.defaults.AuxiliaryMailAccounts
                                     track by $index">
              <md-input-container class="md-block md-flex">
	        <input type="text"
                       label:aria-label="Mail Account"
                       ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
                       ng-readonly="$index == 0"/>
              </md-input-container>
              <md-button class="sg-icon-button" type="button"
                         ng-click="app.editMailAccount($event, $index, preferencesForm)"
                         layout="row"
                         layout-align="end center"
                         label:aria-label="Edit Account">
                <md-icon>edit</md-icon>
              </md-button>
              <md-button class="sg-icon-button" type="button"
                         ng-click="app.removeMailAccount($index, preferencesForm)"
                         ng-show="$index > 0"
                         layout="row"
                         layout-align="end center"
                         label:aria-label="Delete Account">
                <md-icon>remove_circle</md-icon>
              </md-button>
            </md-list-item>
          </md-list>

          <var:if condition="mailAuxiliaryUserAccountsEnabled">
            <div layout="row" layout-align="end center">
              <md-button type="button"
                         ng-click="app.addMailAccount($event, preferencesForm)"
                         label:aria-label="Create Account">
                <var:string label:value="New Mail Account"/>
              </md-button>
            </div>
          </var:if>

        </md-tab>
        <!-- END OF MAIL > ACCOUNTS -->

        <!-- MAIL > FILTERS -->
        <var:if condition="isSieveScriptsEnabled">
          <md-tab id="mailFiltersTab"
                  aria-controls="mailFiltersTab-content"
                  label:label="Filters"
                  sg-labels="MailerUI">
            <md-content role="tabpanel" aria-labelledby="mailFiltersView" ng-hide="app.hasActiveExternalSieveScripts">
              <div class="sg-list-sortable"
                   ng-model="app.preferences.defaults.SOGoSieveFilters"
                   as-sortable="{ scrollableContainer: '.sg-list-sortable', containment: '.sg-list-sortable', containerPositioning: 'relative', orderChanged: app.onFiltersOrderChanged(preferencesForm) }">
                <div layout="row" layout-align="start center"
                     ng-repeat="item in app.preferences.defaults.SOGoSieveFilters"
                     as-sortable-item="as-sortable-item">
                  <md-button class="md-icon-button" md-no-ink="md-no-ink"
                             as-sortable-item-handle="as-sortable-item-handle">
                    <md-icon class="sg-sortable-grip">drag_handle</md-icon>
                  </md-button>
                  <md-checkbox
                      style="margin-bottom: 0;"
                      label:aria-label="Enable filter"
                      ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"
                      ng-true-value="1"
                      ng-false-value="0">
                    <!-- active or not-->
                  </md-checkbox>
                  <md-input-container class="md-flex">
	            <input type="text" label:aria-label="Filter name"
                           ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
                  </md-input-container>
                  <md-button class="sg-icon-button" type="button"
                             ng-click="app.editMailFilter($event, $index, preferencesForm)"
                             layout="row" layout-align="end center"
                             label:aria-label="Edit Filter">
                    <md-icon>edit</md-icon>
                  </md-button>
                  <md-button class="sg-icon-button" type="button"
                             ng-click="app.removeMailFilter($index, preferencesForm)"
                             layout="row" layout-align="end center"
                             label:aria-label="Delete Filter">
                    <md-icon>remove_circle</md-icon>
                  </md-button>
                </div>
              </div>

              <div layout="row" layout-align="end center">
                <md-button type="button"
                           ng-click="app.addMailFilter($event, preferencesForm)"
                           label:aria-label="Create Filter">
                  <var:string label:value="Create Filter"/>
                </md-button>
              </div>
            </md-content>
            <md-content class="md-padding" ng-show="app.hasActiveExternalSieveScripts">
              <md-card flex="50" flex-xs="100">
                <md-card-title>
                  <md-card-title-text>
                    <span class="md-headline"><var:string label:value="An external Sieve script is active"/></span>
                    <span class="md-subhead"><var:string label:value="Sieve is a programming language that can be used for email filtering. If you let SOGo handle your filters, vacation and forward settings, your active script will be disabled." /></span>
                  </md-card-title-text>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                  <md-button type="button" class="md-raised md-warn"
                             ng-click="app.hasActiveExternalSieveScripts = false">
                    <var:string label:value="Let SOGo handle everything" />
                  </md-button>
                </md-card-actions>
              </md-card>
            </md-content>
          </md-tab>
        </var:if>
        <!-- END OF MAIL > FILTERS -->

        <!-- MAIL > VACATION -->
        <var:if condition="isVacationEnabled">
          <md-tab id="mailVacationTab" aria-controls="mailVacationTab-content" label:label="Vacation">
            <div role="tabpanel" aria-labelledby="mailVacationView"
                 id="mailVacationView-content" class="md-padding"
                 ng-hide="app.hasActiveExternalSieveScripts">

              <md-checkbox
                  ng-model="app.preferences.defaults.Vacation.enabled"
                  ng-true-value="1"
                  ng-false-value="0"
                  ng-change="app.updateVacationDates()"
                  label:aria-label="Enable vacation auto reply">
                <var:string label:value="Enable vacation auto reply"/>
              </md-checkbox>

              <div class="md-inline-form" layout="column" flex-offset="5"
                   ng-show="app.preferences.defaults.Vacation.enabled == 1">

                <div layout="row">
                  <md-checkbox
                      ng-model="app.preferences.defaults.Vacation.customSubjectEnabled"
                      ng-true-value="1"
                      ng-false-value="0"
                      label:aria-label="Enable custom auto reply subject">
                  <!-- enable auto reply subject --></md-checkbox>
                  <md-input-container class="md-block md-flex">
                    <label><var:string label:value="Auto reply subject"/></label>
                    <input type="text"
                           ng-required="app.preferences.defaults.Vacation.customSubjectEnabled"
                           ng-disabled="!app.preferences.defaults.Vacation.customSubjectEnabled"
                           ng-model="app.preferences.defaults.Vacation.customSubject"/>
                    <div class="sg-hint" ng-show="app.sieveVariablesCapability">
                      <var:string label:value="You can write ${subject} to insert the original subject"/>
                    </div>
                  </md-input-container>
                </div>

                <md-input-container class="md-block md-flex md-input-has-placeholder">
                  <label><var:string label:value="Auto reply message"/></label>
                  <var:if condition="vacationHeader.length">
                    <p class="text-preview" md-colors="::{color: 'default-background-600'}"><var:string value="vacationHeader"/></p>
                  </var:if>
                  <textarea name="autoReplyText"
                            id="autoReplyText"
                            ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
                  <var:if condition="vacationFooter.length">
                    <p class="text-preview" md-colors="::{color: 'default-background-600'}"><var:string value="vacationFooter"/></p>
                  </var:if>
                </md-input-container>

                <div layout="row" layout-align="start center">
                  <md-input-container class="md-block md-flex">
                    <label><var:string label:value="Email addresses (separated by commas)"/></label>
                    <textarea name="autoReplyEmailAddresses"
                              required="required"
                              id="autoReplyEmailAddresses"
                              ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
                  </md-input-container>
                  <md-button ng-click="app.addDefaultEmailAddresses(preferencesForm)">
                    <var:string label:value="Add default email addresses" type="button"/>
                  </md-button>
                </div>

                <md-input-container class="md-block md-flex">
                  <label><var:string label:value="Days between responses"/></label>
                  <md-select label:aria-label="Days between responses"
                             ng-model="app.preferences.defaults.Vacation.daysBetweenResponse">
                    <var:foreach list="daysBetweenResponsesList" item="item">
                      <md-option var:value="item">
                        <var:string value="item"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>

                <div>
                  <md-checkbox
                      ng-model="app.preferences.defaults.Vacation.ignoreLists"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Do not send responses to mailing lists" />
                  </md-checkbox>
                </div>

                <var:if condition="isVacationPeriodEnabled">
                  <div>
                    <md-checkbox
                        ng-model="app.preferences.defaults.Vacation.startDateEnabled"
                        ng-true-value="1"
                        ng-false-value="0"
                        ng-change="app.toggleVacationStartDate()">
                      <var:string label:value="Enable auto reply on" />
                    </md-checkbox>
                    <md-input-container>
                      <label class="md-no-truncate"><var:string label:value="First day of vacation"/></label>
                      <md-datepicker
                          name="vacationStartDate"
                          label:md-placeholder="Enter date"
                          ng-disabled="!app.preferences.defaults.Vacation.startDateEnabled"
                          ng-required="app.preferences.defaults.Vacation.startDateEnabled"
                          ng-model="app.preferences.defaults.Vacation.startDate"
                          md-date-filter="app.validateVacationStartDate"
                          sg-reset-on-disabled="sg-reset-on-disabled"><!-- datepicker --></md-datepicker>
                    </md-input-container>
                  </div>

                  <div>
                    <md-checkbox
                        ng-model="app.preferences.defaults.Vacation.endDateEnabled"
                        ng-true-value="1"
                        ng-false-value="0"
                        ng-change="app.toggleVacationEndDate()">
                      <var:string label:value="Disable auto reply on" />
                    </md-checkbox>
                    <md-input-container>
                      <label class="md-no-truncate"><var:string label:value="Last day of vacation"/></label>
                      <md-datepicker
                          name="vacationEndDate"
                          label:md-placeholder="Enter date"
                          ng-disabled="!app.preferences.defaults.Vacation.endDateEnabled"
                          ng-required="app.preferences.defaults.Vacation.endDateEnabled"
                          ng-model="app.preferences.defaults.Vacation.endDate"
                          md-date-filter="app.validateVacationEndDate"
                          sg-reset-on-disabled="sg-reset-on-disabled"><!-- datepicker --></md-datepicker>
                    </md-input-container>
                  </div>
                </var:if>

                <div>
                  <md-checkbox
                      ng-model="app.preferences.defaults.Vacation.alwaysSend"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Always send vacation message response"/>
                    <div class="sg-hint"><var:string label:value="The vacation message is sent prior to apply your filters."/></div>
                  </md-checkbox>
                </div>

                <div>
                  <md-checkbox
                      ng-model="app.preferences.defaults.Vacation.discardMails"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Discard incoming mails during vacation"/>
                    <div class="sg-hint"><var:string label:value="The vacation message is sent but incoming messages are not delivered to your inbox."/></div>
                  </md-checkbox>
                </div>

              </div>
            </div>
            <md-content class="md-padding" ng-show="app.hasActiveExternalSieveScripts">
              <md-card flex="50" flex-xs="100">
                <md-card-title>
                  <md-card-title-text>
                    <span class="md-headline"><var:string label:value="An external Sieve script is active"/></span>
                    <span class="md-subhead"><var:string label:value="Sieve is a programming language that can be used for email filtering. If you let SOGo handle your filters, vacation and forward settings, your active script will be disabled." /></span>
                  </md-card-title-text>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                  <md-button type="button" class="md-raised md-warn"
                             ng-click="app.hasActiveExternalSieveScripts = false">
                    <var:string label:value="Let SOGo handle everything" />
                  </md-button>
                </md-card-actions>
              </md-card>
            </md-content>
          </md-tab>
        </var:if>
        <!-- END OF MAIL > VACATION -->

        <!-- MAIL > FORWARD -->
        <var:if condition="isForwardEnabled">
          <md-tab id="mailForwardTab" aria-controls="mailForwardTab-content" label:label="Forward">
            <div role="tabpanel" aria-labelledby="mailForwardView"
                 id="mailForwardView-content" class="md-padding"
                 ng-hide="app.hasActiveExternalSieveScripts">

              <md-checkbox
                  ng-model="app.preferences.defaults.Forward.enabled"
                  ng-true-value="1"
                  ng-false-value="0">
                <var:string label:value="Forward incoming messages"/>
              </md-checkbox>

              <div flex-offset="5" ng-show="app.preferences.defaults.Forward.enabled == 1">
                <md-input-container class="md-block md-flex">
                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
                  <textarea name="forwardAddress"
                            id="forwardAddress"
                            ng-model="app.preferences.defaults.Forward.forwardAddress" />
                </md-input-container>

                <div>
                  <md-checkbox
                      ng-model="app.preferences.defaults.Forward.keepCopy"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Keep a copy" />
                  </md-checkbox>
                </div>

              </div>
            </div>
            <md-content class="md-padding" ng-show="app.hasActiveExternalSieveScripts">
              <md-card flex="50" flex-xs="100">
                <md-card-title>
                  <md-card-title-text>
                    <span class="md-headline"><var:string label:value="An external Sieve script is active"/></span>
                    <span class="md-subhead"><var:string label:value="Sieve is a programming language that can be used for email filtering. If you let SOGo handle your filters, vacation and forward settings, your active script will be disabled." /></span>
                  </md-card-title-text>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                  <md-button type="button" class="md-raised md-warn"
                             ng-click="app.hasActiveExternalSieveScripts = false">
                    <var:string label:value="Let SOGo handle everything" />
                  </md-button>
                </md-card-actions>
              </md-card>
            </md-content>
          </md-tab>
        </var:if>
        <!-- END OF MAIL > FORWARD -->

      </md-tabs>
    </var:if>
  </script>

</var:component>