sogo/UI/Templates/PreferencesUI/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:uix="OGo:uix"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    className="UIxPageFrame"
    title="title"
    const:jsFiles="Common/resource.js,Mailer/mailbox-model.js,Mailer/message-model.js,Preferences/preferences-model.js">

  <!-- <md-content md-scroll-y="true"> -->

  <!--
      <div id="mainMenu">
      <ul>
      <li ng-class="{_selected: $state.is('general')}" ui-sref="general">
      <i class="icon-cog"> </i><var:string label:value="General" /></li>
      <var:if condition="userHasCalendarAccess">
      <li ng-class="{_selected: state.is('calendars')}" ui-sref="calendars">
      <i class="icon-calendar2"> </i><var:string label:value="Calendars" /></li>
      </var:if>
      <li ng-class="{_selected: state.is('addressbooks')}" ui-sref="addressbooks">
      <i class="icon-address-book"> </i><var:string label:value="Address Book" /></li>
      <var:if condition="userHasMailAccess">
      <li ng-class="{_selected: state.is('mailer')}" ui-sref="mailer">
      <i class="icon-mail3"> </i><var:string label:value="Mailer" /></li>
      </var:if>
      </ul>
      </div>
  -->

  <!--
      <div id="container">
      <div id="viewer" ui-view="preferences"> </div>
      </div>
  -->
  <section layout="row" flex="flex">

    <md-sidenav  class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">

      <md-toolbar class="md-tall" layout-align="end start">
        <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
          <span class="md-flex">{{activeUser.identification}}</span>
        </h2>
      </md-toolbar>

      <md-content md-scroll-y="md-scroll-y" class="md-padding md-flex">
        <md-list>

          <md-item>
            <md-item-content>
              <a ui-sref="preferences.general">General</a>
            </md-item-content>
          </md-item>

          <md-item>
            <md-item-content>
              <a ui-sref="preferences.calendars">Calendar</a>
            </md-item-content>
          </md-item>

          <md-item>
            <md-item-content>
              <a ui-sref="preferences.addressbooks">Contacts</a>
            </md-item-content>
          </md-item>

          <md-item>
            <md-item-content>
              <a ui-sref="preferences.mailer">Mail</a>
            </md-item-content>
          </md-item>

        </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" ng-controller="toggleCtrl">
          <span flex="flex">
            <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="hide-gt-md">
              <span class="icon-ic_menu_24px"></span>
            </md-button>
            <div class="display-1" style="font-size: 2em; font-weight: 300">
              [[Preferences]]
            </div>
          </span>
          <span class="sd-toolbar-tools">
            <span>search</span>
          </span>
        </div>
      </md-toolbar>


      <div ui-view="preferences"><!-- view --></div>

      <script type="text/ng-template" id="preferences.html">
        <form name="preferencesForm"
              ng-submit="save()">
          <div ui-view="module"><!-- view --></div>
          <md-button class="button tiny radius" type="submit">
            <var:string label:value="Save" />
          </md-button>
        </form>
      </script>
    </section>

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

      <md-content layout="row" class="md-flex">
        <md-tabs class="md-accent">

          <!-- GENERAL OPTIONS -->
          <md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
            <div role="tabpanel" aria-labelledby="generalOptionsView" id="generalOptionsView-content">

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="SOGo Version :"/></div>
                <div><var:string value="sogoVersion"/></div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Language :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoLanguage">
                    <var:foreach list="languages" item="item">
                      <md-option var:value="item">
                        <var:string value="languageText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Current Time Zone :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoTimeZone">
                    <var:foreach list="timeZonesList" item="item">
                      <md-option var:value="item">
                        <var:string value="item"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Short Date Format :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoShortDateFormat">
                    <var:foreach list="shortDateFormatsList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemShortDateFormatText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>

                  <!-- <var:popup list="shortDateFormatsList" item="item"
                             const:id="shortDateFormat"
                             const:name="shortDateFormat"
                             string="itemShortDateFormatText"
                             selection="userShortDateFormat" /> -->
                </div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Long Date Format :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoLongDateFormat">
                    <var:foreach list="longDateFormatsList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemLongDateFormatText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                  <!-- <var:popup list="longDateFormatsList" item="item"
                             const:id="longDateFormat"
                             const:name="longDateFormat"
                             string="itemLongDateFormatText"
                             selection="userLongDateFormat" /> -->
                </div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Time Format :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoTimeFormat">
                    <var:foreach list="timeFormatsList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemTimeFormatText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                  <!-- <var:popup list="timeFormatsList" item="item"
                             const:id="timeFormat"
                             const:name="timeFormat"
                             string="itemTimeFormatText"
                             selection="userTimeFormat" /> -->
                </div>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Default Module:"/></div>
                <md-select ng-model="preferences.defaults.SOGoLoginModule">
                    <var:foreach list="availableModules" item="item">
                      <md-option var:value="item">
                        <var:string value="itemModuleText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
              </div>

              <div layout="row" layout-align="space-around center">
                <div><var:string label:value="Refresh View :"/></div>
                <div>
                  <md-select ng-model="preferences.defaults.SOGoRefreshViewCheck">
                    <var:foreach list="refreshViewList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemRefreshViewCheckText"/>
                      </md-option>
                    </var:foreach>
                  </md-select>
                </div>
              </div>
            </div>
          </md-tab>

          <!-- PASSWORD OPTIONS -->
          <var:if condition="shouldDisplayPasswordChange">
            <md-tab id="generalPasswordView"
                    aria-controls="generalPasswordView-content"
                    label:label="Password">
              <div id="passwordView">
                <md-input-container>
                  <label><var:string label:value="New password:"/>
                  </label>
	          <input type="text"/>
                </md-input-container>

                <md-input-container>
                  <label><var:string label:value="Confirmation:"/>
                  </label>
	          <input type="text"/>
                </md-input-container>

                <md-button ng-click="changePassword()" type="button">
                  <var:string label:value="Change"/>
                </md-button>

              </div>
            </md-tab>
          </var:if>

        </md-tabs>
      </md-content>
    </script>

    <!--
        CALENDAR PREFERENCE PANEL
    -->
    <script type="text/ng-template" id="calendarsPreferences.html">
      <md-content layout="row" class="md-flex">
        <md-tabs class="md-accent">

          <!-- CALENDAR - GENERAL -->
          <md-tab id="calendarOptionsView"
                  aria-controls="calendarOptionsView-content"
                  label:label="General">
            <!-- <script type="text/ng-template" id="calendarsPreferences.html"> -->
            <var:if condition="userHasCalendarAccess">
              <div role="tabpanel"
                   aria-labelledby="calendarOptionsView"
                   id="calendarOptionsView-content">

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Week begins on :" /></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoFirstDayOfWeek">
                      <var:foreach list="daysList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemWeekStartDay"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="daysList" item="item"
                               const:id="weekStartDay"
                               const:name="weekStartDay"
                               string="itemWeekStartDay"
                               selection="userWeekStartDay" /> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Day start time :" /></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoDayStartTime">
                      <var:foreach list="hoursList" item="item">
                        <md-option var:value="item">
                          <var:string value="item"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="hoursList" item="item"
                               const:id="dayStartTime"
                               const:name="dayStartTime"
                               string="item"
                               selection="userDayStartTime" /> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Day end time :" /></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoDayEndTime">
                      <var:foreach list="hoursList" item="item">
                        <md-option var:value="item">
                          <var:string value="item"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="hoursList" item="item"
                               const:id="dayEndTime"
                               const:name="dayEndTime"
                               string="item"
                               selection="userDayEndTime"/> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <md-checkbox
                      ng-model="preferences.defaults.SOGoBusyOffHours"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Show time as busy outside working hours"/>
                  </md-checkbox>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="First week of year :"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoFirstWeekOfYear">
                      <var:foreach list="firstWeekList" item="item">
                        <md-option var:ng-value="item">
                          <var:string value="itemFirstWeekText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="firstWeekList" item="item"
                               const:id="firstWeek"
                               const:name="firstWeek"
                               string="itemFirstWeekText"
                               selection="userFirstWeek"/> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Default calendar :" /></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoDefaultCalendar">
                      <var:foreach list="defaultCalendarList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemCalendarText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="defaultCalendarList" item="item"
                               const:id="defaultCalendar"
                               const:name="defaultCalendar"
                               string="itemCalendarText"
                               selection="userDefaultCalendar"/> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Default events classification :" /></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoCalendarEventsDefaultClassification">
                      <var:foreach list="calendarClassificationsList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemClassificationText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="calendarClassificationsList" item="item"
                               const:id="eventsClassification"
                               const:name="eventsClassification"
                               string="itemClassificationText"
                               selection="eventsDefaultClassification"/> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Default tasks classification :"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoCalendarTasksDefaultClassification">
                      <var:foreach list="calendarClassificationsList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemClassificationText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="calendarClassificationsList" item="item"
                               const:id="tasksClassification"
                               const:name="tasksClassification"
                               string="itemClassificationText"
                               selection="tasksDefaultClassification"/> -->
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Default reminder :"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoCalendarDefaultReminder">
                      <var:foreach list="reminderList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemReminderText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                    <!-- <var:popup list="reminderList" item="item"
                               const:disabledValue="-"
                               label:noSelectionString="reminder_NONE"
                               const:name="reminderList"
                               const:id="reminderList"
                               string="itemReminderText"
                               var:selection="reminder"/> -->
                  </div>
                </div>

              </div>
            </var:if>
          </md-tab>

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

              <md-list>
                <md-item ng-repeat="item in
                                    preferences.defaults.SOGoCalendarCategories
                                    track by $index">
                  <md-item-content>
                    <div class="md-icon-label"><!-- create --></div>
                    <md-input-container>
	              <input type="text" ng-model="preferences.defaults.SOGoCalendarCategories[$index]"/>
                    </md-input-container>
                    <md-button ng-click="removeCalendarCategory($index)" type="button">
                      <div class="md-icon-remove"><!-- delete --></div>
                    </md-button>
                  </md-item-content>
                </md-item>
              </md-list>

              <div class="bottomToolbar">
                <md-button ng-click="addCalendarCategory()" type="button">
                  <div class="md-icon-add"><!-- create --></div>
                </md-button>
              </div>

          </md-tab>

          <!-- CALENDAR - INVITATIONS -->
          <md-tab id="calendarInvitationsTab" aria-controls="calendarInvitationsTab-content" label:label="Invitations">
            <div role="tabpanel" aria-labelledby="calendarInvitationsView"  id="calendarInvitationsView-content">
              <!-- <div id="calendarAppointmentsInvitationsView"
                   class="tab"> -->
              <md-checkbox
                  ng-model="preferences.settings.Calendar.PreventInvitations"
                  ng-true-value="1"
                  ng-false-value="0">
                <var:string label:value="Prevent from being invited to appointments"/>
              </md-checkbox>

              <md-list>
                <md-item ng-repeat="(key, value) in
                                    preferences.settings.Calendar.PreventInvitationsWhitelist">
                  <md-item-content>
                    <md-input-container>
	              <input type="text" ng-model="key"/>
                    </md-input-container>
                  </md-item-content>
                </md-item>
              </md-list>

              <div class="bottomToolbar">
                <md-button ng-click="addPreventInvitationsWhitelist()" type="button">
                  <div class="md-icon-add"><!-- create --></div>
                </md-button>
                <md-button ng-click="removePreventInvitationsWhitelist()" type="button">
                  <div class="md-icon-remove"><!-- delete --></div>
                </md-button>
              </div>

            </div>
          </md-tab>

        </md-tabs>
      </md-content>
    </script>

    <!--
        CONTACTS PREFERENCE PANEL
    -->
    <script type="text/ng-template" id="addressbooksPreferences.html">
      <md-content layout="row" class="md-flex">
        <md-tabs class="md-accent">

          <!-- CONTACT > GENERAL -->
          <md-tab id="contactsGeneralTab"
                  aria-controls="contactsGeneralTab-content" label:label="General">
            GENERAL
          </md-tab>
           <!-- END OF CONTACT > GENERAL -->

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

            <div role="tabpanel" aria-labelledby="contactsCategoriesView"  id="contactsCategoriesView-content">
              <!-- <label><var:string label:value="Categories"/></label> -->
              <md-list>
                <md-item ng-repeat="item in
                                    preferences.defaults.SOGoContactsCategories
                                    track by $index">
                  <md-item-content>
                    <md-input-container>
	              <input type="text" ng-model="preferences.defaults.SOGoContactsCategories[$index]"/>
                    </md-input-container>
                    <md-button ng-click="removeContactCategory($index)" type="button">
                      <div class="md-icon-remove md-icon-lg"><!-- delete --></div>
                    </md-button>
                  </md-item-content>
                </md-item>
              </md-list>

              <div class="bottomToolbar">
                <md-button ng-click="addContactCategory()" type="button">
                  <div class="md-icon-add"><!-- create --></div>
                </md-button>
              </div>

            </div>
          </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-content layout="row" class="md-flex">
          <md-tabs class="md-accent">

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

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

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

                <div layout="row" layout-align="space-around center">
                  <md-checkbox
                      ng-model="preferences.defaults.SOGoMailAddOutgoingAddresses"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="When sending mail, add unknown recipients to my"/>
                  </md-checkbox>

                  <md-select ng-model="preferences.defaults.SOGoSelectedAddressBook">
                    <var:foreach list="addressBookList" item="item">
                      <md-option var:value="item">
                        <var:string value="itemAddressBookText"/>
                    </md-option>
                    </var:foreach>
                  </md-select>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Forward messages:"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoMailMessageForwarding">
                      <var:foreach list="messageForwardingList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemMessageForwardingText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="When replying to a message:"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoMailReplyPlacement">
                      <var:foreach list="replyPlacementList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemReplyPlacementText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="And place my signature"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoMailSignaturePlacement">
                      <var:foreach list="signaturePlacementList" item="item">
                        <md-option var:value="item">
                          <var:string value="itemSignaturePlacementText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Compose messages in"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoMailComposeMessageType">
                      <var:foreach list="composeMessagesType" item="item">
                        <md-option var:value="item">
                          <var:string value="itemComposeMessagesText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Display remote inline images"/></div>
                  <div>
                    <md-select ng-model="preferences.defaults.SOGoMailDisplayRemoteInlineImages">
                      <var:foreach list="displayRemoteInlineImages" item="item">
                        <md-option var:value="item">
                          <var:string value="itemDisplayRemoteInlineImagesText"/>
                        </md-option>
                      </var:foreach>
                    </md-select>
                  </div>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Auto save every"/></div>
                  <md-input-container class="md-input-number">
                    <input type="number" label:aria-label="minutes" ng-model="preferences.defaults.SOGoMailAutoSave"/>
                  </md-input-container>
                  <var:string label:value="minutes"/>
                </div>

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


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

                <md-list>
                    <md-item ng-repeat="item in
                                        preferences.defaults.SOGoSieveFilters
                                        track by $index">
                      <md-item-content>
                        <md-checkbox
                            ng-model="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="preferences.defaults.SOGoSieveFilters[$index].name"/>
                        </md-input-container>
                        <md-button ng-click="editMailFilter($index)" type="button">
                          <div class="md-icon-edit md-icon-lg"><!-- edit --></div>
                        </md-button>
                        <md-button ng-click="removeMailFilter($index)" type="button">
                          <div class="md-icon-remove"><!-- delete --></div>
                        </md-button>
                      </md-item-content>
                    </md-item>
                  </md-list>

                  <!-- FIXME: move up/down to be replaced by DnD? -->
                  <div class="bottomToolbar">
                    <md-button ng-click="addMailFilter($event)" type="button">
                      <div class="md-icon-add"><!-- create --></div>
                    </md-button>
                  </div>
              </div>
            </md-tab>
            <!-- END OF MAIL > FILTERS -->

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

                <div role="tabpanel" aria-labelledby="mailLabelsView"  id="mailLabelsView-content">
                  <md-list>
                    <md-item ng-repeat="(key, value) in
                                        preferences.defaults.SOGoMailLabelsColors">
                      <md-item-content>
                        <md-input-container>
	                  <input type="text" ng-model="value[0]"/>
                        </md-input-container>
                        <md-button ng-click="removeMailLabel(key)" type="button">
                          <div class="md-icon-remove"><!-- delete --></div>
                        </md-button>
                      </md-item-content>
                    </md-item>
                  </md-list>

                  <div class="bottomToolbar">
                    <md-button ng-click="addMailLabel()" type="button">
                      <div class="md-icon-add"><!-- create --></div>
                    </md-button>
                  </div>
                </div>
              </md-tab>
            <!-- END OF MAIL > LABELS -->

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

              <md-list>
                <md-item ng-repeat="item in
                                    preferences.defaults.AuxiliaryMailAccounts
                                    track by $index">
                  <md-item-content>
                    <md-input-container>
	              <input type="text" ng-model="preferences.defaults.AuxiliaryMailAccounts[$index].name"/>
                    </md-input-container>
                    <md-button ng-click="editMailAccount($index)" type="button">
                      <div class="md-icon-edit md-icon-lg"><!-- edit --></div>
                    </md-button>
                    <md-button ng-click="removeMailAccount()" type="button">
                      <div class="md-icon-remove md-icon-lg"><!-- delete --></div>
                    </md-button>
                  </md-item-content>
                </md-item>
              </md-list>

              <div class="bottomToolbar">
                <md-button ng-click="addMailAccount()" type="button">
                  <div class="md-icon-add"><!-- create --></div>
                </md-button>
              </div>

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


            <!-- MAIL > VACATION -->
            <md-tab id="mailVacationTab" aria-controls="mailVacationTab-content" label:label="Vacation">
              <div role="tabpanel" aria-labelledby="mailVacationView" id="mailVacationView-content">

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


                <div>
                  <label><var:string label:value="Auto reply message :"/>
                  <textarea const:name="autoReplyText"
                            const:id="autoReplyText"
                            ng-model="preferences.defaults.Vacation.autoReplyText"/>
                  </label>
                </div>

                <div>
                  <!-- <script>
                    var defaultEmailAddresses = <var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>;
                  </script> -->
                  <label><var:string label:value="Email addresses (separated by commas) :"/></label><br/>
                  <textarea const:name="autoReplyEmailAddresses"
                            const:id="autoReplyEmailAddresses"
                            ng-model="preferences.defaults.Vacation.autoReplyEmailAddresses"/><br/>
                  <md-button>
                    <var:string label:value="Add default email addresses" type="button"/>
                  </md-button>
                </div>

                <div layout="row" layout-align="space-around center">
                  <div><var:string label:value="Days between responses :"/></div>
                  <div>
                    <md-select ng-model="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>
                  </div>
                </div>

                <md-checkbox
                    ng-model="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="space-around center">
                  <md-checkbox
                      ng-model="preferences.defaults.Vacation.endDateEnabled"
                      ng-true-value="1"
                      ng-false-value="0">
                    <var:string label:value="Disable auto reply on" />
                  </md-checkbox>

                  <div class="value">
                    <p class="PseudoField-inputLike--underline">
                      <input type="date" ng-model="preferences.defaults.Vacation.endDate"/>
                    </p>
                  </div>

                </div>

                <md-checkbox
                    ng-model="preferences.defaults.Vacation.alwaysSend"
                    ng-true-value="1"
                    ng-false-value="0">
                   <var:string label:value="Always send vacation message response"/>
                </md-checkbox>

              </div>
            </md-tab>
            <!-- END OF MAIL > VACATION -->

            <!-- MAIL > FORWARD -->
            <md-tab id="mailForwardTab" aria-controls="mailForwardTab-content" label:label="Forward">
              <div role="tabpanel" aria-labelledby="mailForwardView"  id="mailForwardView-content">
                <var:if condition="isForwardEnabled">
                  <div id="forwardView" class="tab">
                    <md-checkbox
                        ng-model="preferences.defaults.Forward.enabled"
                        ng-true-value="1"
                        ng-false-value="0">
                      <var:string label:value="Forward incoming messages"/>
                    </md-checkbox>

                    <div id="forward">
                      <label><var:string label:value="Email addresses (separated by commas) :"/><br/>
                       <textarea const:name="forwardAddress"
                                 const:id="forwardAddress"
                                 ng-model="preferences.defaults.Forward.forwardAddress" />
                      </label><br/>
                    </div>

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

                      <script type="text/javascript">
                        var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
                      </script>

                  </div>
                </var:if>
              </div>
            </md-tab>
            <!-- END OF MAIL > FORWARD -->


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

</section>
</var:component>