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="Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js">

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

  <script type="text/javascript">
    var mailCustomFromEnabled = <var:string value="mailCustomFromEnabled" const:escapeHTML="NO"/>;
    var timeZonesList = <var:string value="timeZonesList" const:escapeHTML="NO"/>;
    var defaultEmailAddresses = '<var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>';
    var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
    var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
  </script>

  <script type="text/ng-template" id="preferences.html">
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex">
        <md-list>
          <md-list-item ng-click="app.go('general')"
                        ui-sref="preferences.general"
                        ui-sref-active="sg-active">
            <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')"
                          ui-sref="preferences.calendars"
                          ui-sref-active="sg-active">
              <p class="sg-item-name"><var:string label:value="Calendar"/></p>
            </md-list-item>
          </var:if>
          <md-list-item ng-click="app.go('addressbooks')"
                        ui-sref="preferences.addressbooks"
                        ui-sref-active="sg-active">
            <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')"
                          ui-sref="preferences.mailer"
                          ui-sref-active="sg-active">
              <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" class="md-layout-fill">

      <!-- TOP RIGHT TOOLBAR -->
      <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
        <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
          <var:component className="UIxTopnavToolbarTemplate" />
        </div>
        <md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
                   ng-click="app.save()">
          <md-icon>save</md-icon>
        </md-button>
      </md-toolbar>

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

  </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="sg-padded">
          <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">
              <div flex="50">
                <md-input-container>
                  <label><var:string label:value="Language"/></label>
                  <md-select ng-model="app.preferences.defaults.SOGoLanguage">
                    <var:foreach list="languages" item="item">
                      <md-option var:value="item">
                        <var:string value="languageText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </md-input-container>
              </div>
              <div flex="50">
                <md-autocomplete
                    style="padding-bottom: 0"
                    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"
                    label:md-floating-label="Current Time Zone">
                  <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
                </md-autocomplete>
              </div>
            </div>

            <div layout="row">
              <div flex="30">
                <md-input-container>
                  <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>
              </div>
              <div flex="40">
                <md-input-container>
                  <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>
              </div>
              <div flex="30">
                <md-input-container>
                  <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>
            </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>
          </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="sg-padded">
            <div layout="row">
              <md-input-container>
                <label><var:string label:value="New password"/>
                </label>
	        <input type="password" ng-model="app.passwords.newPassword"/>
              </md-input-container>

              <md-input-container>
                <label><var:string label:value="Confirmation"/>
                </label>
	        <input type="password" 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="sg-padded"
                      id="calendarOptionsView-content">
            <div layout="column" flex="100">
              <div layout="row">
                <md-input-container>
                  <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>
                  <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>
                  <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>

              <md-checkbox
                  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>
                  <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>
                  <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>
            <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.SOGoCalendarCategories
                                         track by $index">
                  <i class="md-avatar" ng-style="{'background-color': app.preferences.defaults.SOGoCalendarCategoriesColors[item]}">
                    <sg-color-picker sg-on-select="app.preferences.defaults.SOGoCalendarCategoriesColors[item] = color"><!-- color picker--></sg-color-picker>
                  </i>
                  <md-input-container>
	            <input type="text" label:aria-label="Calendar Category" ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
                  </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)">
                    <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 Calendar Category"
                           ng-click="app.addCalendarCategory()">
                  <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">
          <div layout="column" layout-align="space-around start"
               layout-padding="layout-padding"
               aria-labelledby="calendarInvitationsTab"
               id="calendarInvitationsTab-content">

            <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 ng-show="app.preferences.settings.Calendar.PreventInvitations == 1">
              <label>
                <var:string label:value="White list for appointment invitations"/>
              </label>
              <md-contact-chips
                  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="md-require-match"
                  filter-selected="false"
                  label:placeholder="Add"><!-- users --></md-contact-chips>
            </div>

          </div>
        </md-tab>

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

  <!--
      CONTACTS PREFERENCE PANEL
  -->
  <script type="text/ng-template" id="addressbooksPreferences.html">
    <md-content layout="row" class="md-flex">
      <md-tabs class="md-flex" 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">
            <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>
	            <input type="text"
                           label:aria-label="Contact Category"
                           ng-model="app.preferences.defaults.SOGoContactsCategories[$index]"/>
                  </md-input-container>
                  <md-button type="button" class="sg-icon-button"
                             label:aria-label="Remove Contact Category"
                             ng-click="app.removeContactCategory($index)">
                    <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()">
                  <var:string label:value="Add Contact Category"/>
                </md-button>
              </div>
            </div>
          </md-content>

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

      </md-tabs>
    </md-content>
  </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="sg-padded">

            <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>

            <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 layout="row" layout-align="space-around end">
              <md-checkbox
                  class="md-align-top-left" ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
                  ng-true-value="1"
                  ng-false-value="0"
                  label:arial-label="When sending mail, add unknown recipients to my">
                <var:string label:value="When sending mail, add unknown recipients to my"/>
              </md-checkbox>

              <md-input-container>
                <label><var:string label:aria-label="Address Book"/></label>
                <md-select
                    ng-disabled="app.preferences.defaults.SOGoMailAddOutgoingAddresses == 0"
                    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>
              <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">
              <md-input-container>
                <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>
                <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>

            <md-input-container>
              <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>

            <md-input-container>
              <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">
              <var:string label:value="Auto save every"/>
              <md-input-container class="md-input-number">
                <input type="number" min="0" label:aria-label="minutes" ng-model="preferences.defaults.SOGoMailAutoSave"/>
              </md-input-container>
              <var:string label:value="minutes"/>
            </div>

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


        <!-- MAIL > FILTERS -->
        <var:if condition="isSieveScriptsEnabled">
          <md-tab id="mailFiltersTab"
                  aria-controls="mailFiltersTab-content"
                  label:label="Filters">
            <div role="tabpanel" aria-labelledby="mailFiltersView"
                 id="mailFiltersView-content">

              <md-list>
                <md-list-item ng-repeat="item in
                                         app.preferences.defaults.SOGoSieveFilters
                                         track by $index">
                  <md-checkbox
                      ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"
                      ng-true-value="1"
                      ng-false-value="0">
                    <!-- active or not-->
                  </md-checkbox>
                  <md-input-container>
	            <input type="text" ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
                  </md-input-container>
                  <md-button class="sg-icon-button" type="button"
                             ng-click="app.editMailFilter($index)"
                             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)"
                             layout="row" layout-align="end center"
                             label:aria-label="Delete Filter">
                    <md-icon>remove_circle</md-icon>
                  </md-button>
                </md-list-item>
              </md-list>

              <!-- FIXME: move up/down to be replaced by DnD? -->
              <div layout="row" layout-align="end center">
                <md-button type="button"
                           ng-click="app.addMailFilter($event)"
                           label:aria-label="Create Filter">
                  <var:string label:value="Create Filter"/>
                </md-button>
              </div>
            </div>
          </md-tab>
        </var:if>
        <!-- END OF MAIL > FILTERS -->

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

          <md-content role="tabpanel" aria-labelledby="mailLabelsView"
                      id="mailLabelsView-content" class="sg-padded">
            <md-list layout="row" layout-wrap="layout-wrap">
              <md-list-item flex="50"
                            ng-repeat="(key, value) in
                                       app.preferences.defaults.SOGoMailLabelsColors">
                <i class="md-avatar" ng-style="{'background-color': value[1]}">
                  <sg-color-picker sg-on-select="value[1] = color"><!-- color picker--></sg-color-picker>
                </i>
                <md-input-container>
	          <input type="text"
                         label:aria-label="Label"
                         ng-model="value[0]"/>
                </md-input-container>
                <md-button class="sg-icon-button" type="button"
                           layout="row" layout-align="end center"
                           label:aria-label="Delete Label"
                           ng-click="app.removeMailLabel(key)">
                  <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()">
                <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="Accounts">

          <md-list class="sg-padded">
            <md-list-item ng-repeat="item in
                                     app.preferences.defaults.AuxiliaryMailAccounts
                                     track by $index">
              <md-input-container>
	        <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)"
                         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)"
                         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()"
                         label:aria-label="Create Account">
                <var:string label:value="New Mail Account"/>
              </md-button>
            </div>
          </var:if>

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


        <!-- 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="sg-padded">

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

              <div ng-show="app.preferences.defaults.Vacation.enabled == 1">
                <md-input-container>
                  <label><var:string label:value="Auto reply message"/></label>
                  <textarea const:name="autoReplyText"
                            const:id="autoReplyText"
                            ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
                </md-input-container>

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

                <md-input-container>
                  <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>

                <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 layout="row" layout-align="end center">
                  <md-checkbox
                      ng-model="app.preferences.defaults.Vacation.endDateEnabled"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Disable auto reply on" />
                  </md-checkbox>
                  <md-datepicker
                      ng-disabled="app.preferences.defaults.Vacation.endDateEnabled == 0"
                      ng-model="app.preferences.defaults.Vacation.endDate"><!-- datepicker --></md-datepicker>
                </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"/>
                </md-checkbox>
              </div>
            </div>
          </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="sg-padded">
              <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 ng-show="app.preferences.defaults.Forward.enabled == 1">
                <md-input-container>
                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
                  <textarea const:name="forwardAddress"
                            const:id="forwardAddress"
                            ng-model="app.preferences.defaults.Forward.forwardAddress" />
                </md-input-container>

                <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>
          </md-tab>
        </var:if>
        <!-- END OF MAIL > FORWARD -->

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

</var:component>