<?xml version="1.0" standalone="yes"?>
<!DOCTYPE container>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label"
    xmlns:rsrc="OGo:url"
    xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
<md-dialog flex="50" flex-sm="80" flex-xs="100">
  <form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
        <md-input-container class="md-block md-flex">
          <label><var:string label:value="Filter name"/></label>
          <input class="md-title"
                 type="text"
                 md-autofocus="true"
                 ng-model="filterEditor.filter.name"
                 label:placeholder="Filter name"
                 required="required"/>
        </md-input-container>
      </div>
    </md-toolbar>
    <md-dialog-content class="sg-has-form-sections">
      <script type="text/javascript">
        var filterId = '<var:string value="filterId"/>';
        var mailTags = <var:string value="labels" const:escapeHTML="NO"/>;
      </script>

      <div class="sg-form-section">
        <div layout="row" layout-align="start center">
          <div class="pseudo-input-container">
            <p class="pseudo-input-field"><var:string label:value="For incoming messages that"/></p>
          </div>
          <md-input-container class="md-flex">
            <md-select ng-model="filterEditor.filter.match">
              <md-option const:value="all">
                <var:string label:value="match all of the following rules"/>
              </md-option>
              <md-option const:value="any">
                <var:string label:value="match any of the following rules"/>
              </md-option>
              <md-option const:value="allmessages">
                <var:string label:value="match all messages"/>
              </md-option>
            </md-select>
          </md-input-container>
        </div>

        <!-- CONDITIONS -->
        <div layout="column" ng-hide="filterEditor.filter.match == 'allmessages'">
          <div id="filterRules"><!-- empty --></div>
          <div layout="row" layout-align="start center"
               ng-repeat="rule in filterEditor.filter.rules">

            <md-input-container class="md-block" flex="25">
              <md-select ng-model="rule.field">
                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.fieldLabels">{{ value }}</md-option>
              </md-select>
            </md-input-container>

            <md-input-container class="md-block" flex="25" ng-if="rule.field == 'header'">
              <input type="text" ng-model="rule.custom_header" label:placeholder="Header" required="required"/>
            </md-input-container>

            <md-input-container class="md-block" flex="25" ng-if="rule.field == 'size'">
              <md-select ng-model="rule.operator">
                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.numberOperatorLabels">
                  {{ value }}
                </md-option>
              </md-select>
            </md-input-container>

            <md-input-container class="md-block" flex="25" ng-if="rule.field != 'size'">
              <md-select ng-model="rule.operator">
                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.textOperatorLabels">
                  {{ value }}
                </md-option>
              </md-select>
            </md-input-container>

            <md-input-container class="md-block md-flex" md-no-float="md-no-float">
              <label><var:string label:value="Value"/></label>
              <input type="text" ng-model="rule.value" required="required"/>
            </md-input-container>

            <md-button class="md-icon-button" type="button"
                       ng-click="filterEditor.removeMailFilterRule($index)">
              <md-icon>remove_circle</md-icon>
            </md-button>
          </div>

          <div layout="row" layout-align="end center">
            <label class="button-label button-label--right"><var:string label:value="Add a condition"/></label>
            <md-button class="md-icon-button" type="button"
                       ng-click="filterEditor.addMailFilterRule($event)">
              <md-icon>add_circle</md-icon>
            </md-button>
          </div>
        </div>
      </div>
      <div class="sg-form-section">

        <!-- ACTIONS -->
        <div layout="column">
          <p><var:string label:value="Perform these actions"/></p>
          <div id="filterActions"><!-- empty --></div>
          <div class="sg-list-sortable"
               ng-model="filterEditor.filter.actions"
               as-sortable="{ containment: '.sg-list-sortable', containerPositioning: 'relative' }">
          <div layout="row" layout-align="start center"
               ng-repeat="action in filterEditor.filter.actions"
               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-input-container class="md-block md-flex">
              <md-select ng-model="action.method">
                <md-option ng-value="key" ng-repeat="key in filterEditor.methods">{{ filterEditor.methodLabels[key] }}</md-option>
              </md-select>
            </md-input-container>

            <!-- FORWARD MESSAGE TO -->
            <md-input-container class="md-block" flex="50" ng-if="action.method == 'redirect'" >
              <label><var:string label:value="Email"/></label>
              <input type="text" ng-model="action.argument" required="required"/>
            </md-input-container>

            <!-- NOTIFY MESSAGE TO -->
            <md-input-container class="md-block" flex="50" ng-if="action.method == 'notify'" >
              <label><var:string label:value="Email"/></label>
              <input type="text" ng-model="action.argument" required="required"/>
            </md-input-container>

            <!-- DISCARD -->
            <!-- nada -->

            <!-- KEEP -->
            <!-- nada -->

            <!-- SEND REJECT MESSAGE -->
            <md-input-container class="md-block" flex="50" ng-if="action.method == 'reject'">
              <label><var:string label:value="Message"/></label>
              <textarea ng-model="action.argument" required="required"></textarea>
            </md-input-container>

            <!-- FILE INTO -->
            <md-input-container class="md-block" flex="50" ng-if="action.method == 'fileinto'">
              <label><var:string label:value="Mailbox"/></label>
              <md-select ng-model="action.argument" required="required">
                <md-option ng-value="item.sievePath" ng-repeat="item in filterEditor.mailboxes">
                  <div ng-class="'sg-child-level-' + item.level">
                    {{ item.$displayName }}
                  </div>
                </md-option>
              </md-select>
            </md-input-container>

            <!-- FLAG WITH -->
            <md-input-container class="md-block" flex="50" ng-if="action.method == 'addflag'">
              <label><var:string label:value="Flag"/></label>
              <md-select ng-model="action.argument" required="required">
                <md-option value="seen"><var:string label:value="Seen"/></md-option>
                <md-option value="deleted"><var:string label:value="Deleted"/></md-option>
                <md-option value="answered"><var:string label:value="Answered"/></md-option>
                <md-option value="flagged"><var:string label:value="Flagged"/></md-option>
                <md-option value="junk"><var:string label:value="Junk"/></md-option>
                <md-option value="not_junk"><var:string label:value="Not Junk"/></md-option>
                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.labels track by key">{{ value[0] }}</md-option>
              </md-select>
            </md-input-container>

            <!-- STOP -->
            <!-- nada -->

            <md-button class="md-icon-button" type="button"
                       ng-click="filterEditor.removeMailFilterAction($index)">
              <md-icon>remove_circle</md-icon>
            </md-button>

          </div>
          </div>

          <div layout="row" layout-align="end center">
            <label class="button-label button-label--right"><var:string label:value="Add an action"/></label>
            <md-button class="md-icon-button" type="button"
                       ng-click="filterEditor.addMailFilterAction($event)">
              <md-icon>add_circle</md-icon>
            </md-button>
          </div>
        </div>
      </div>
    </md-dialog-content>
    <md-dialog-content class="md-default-theme md-bg md-warn md-padding sg-dialog-message ng-hide"
                       ng-show="filterEditor.invalid">
      <div>{{filterEditor.invalid}}</div>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button type="button" ng-click="filterEditor.cancel()"><var:string label:value="Cancel"/></md-button>
      <md-button type="submit"
                 ng-disabled="filterForm.$invalid || !filterEditor.hasRulesAndActions()"
                 ng-bind="::'OK' | loc"><!-- OK --></md-button>
    </md-dialog-actions>
  </form>
</md-dialog>
</container>
