<div ng-controller="exportConfigDetailCtrl">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      path="#export"
      label="{{ 'Exports' | translate }}"
      icon="c8y-report"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      label="{{ 'Configuration' | translate }}"
      icon="c8y-tools"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <form name="exportForm" novalidate>
    <div class="row">
      <div class="col-md-10 col-xs-12">
        <div class="card card--fullpage">
          <div class="card-header separator">
            <div class="card-title">
              {{ 'Export details' | translate }}
            </div>
          </div>
          <div class="inner-scroll">
            <div class="card-block overflow-visible">
              <div class="form-group" ng-class="{ 'has-error': invalid('name') }">
                <input
                  type="text"
                  name="name"
                  class="form-control"
                  ng-model="config.name"
                  ng-maxlength="120"
                  placeholder="{{ 'e.g. My export' | translate }}"
                  required
                />
                <div class="c8y-messages" ng-if="invalid('name')">
                  <small class="form-control-feedback-message">
                    {{ validationHints('name') | translate }}
                  </small>
                </div>
              </div>

              <div class="form-group" ng-class="{ 'has-error': invalid('exportType') }">
                <label>{{ 'File type' | translate }} *</label>
                <div>
                  <label
                    title="{{ option.name | translate }}"
                    ng-repeat="option in exportTypes"
                    class="fileType c8y-radio radio-inline m-r-16"
                  >
                    <input
                      id="optionName"
                      type="radio"
                      ng-value="option.type"
                      ng-model="config.exportType"
                    />
                    <span></span>
                    <span
                      for="optionName"
                      class="dlt-c8y-icon m-r-4"
                      ng-class="{
                        'dlt-c8y-icon-file-text-o': option.type === 'csv',
                        'dlt-c8y-icon-file-excel-o': option.type === 'vnd.ms-excel'
                      }"
                    ></span>
                    {{ option.name | translate }}
                  </label>
                </div>
              </div>

              <div class="p-b-16" ng-if="shouldShowSmartRules()">
                <div class="legend form-block">
                  {{ 'Scheduled exports' | translate }}
                  <span>
                    {{ '(deprecated)' | translate }}
                  </span>
                </div>

                <div ng-if="config.id" class="p-relative">
                  <div class="d-flex a-i-center" ng-if="isMigratingInProgress()">
                    <c8y-loading></c8y-loading>
                  </div>
                  <smart-rules-list
                    mo="config.id"
                    filter="smartRulesFilter"
                    disable-edit-and-create="disableEditAndCreate"
                    on-rules="(onRules)"
                  ></smart-rules-list>
                </div>
              </div>

              <div class="p-b-16" ng-if="shouldShowSchedules()">
                <div class="legend form-block">
                  {{ 'Scheduled exports' | translate }}
                </div>

                <div class="alert alert-info max-width-100" ng-if="!config.id" translate>
                  You can add schedules once you saved export configuration.
                </div>

                <div ng-if="config.id">
                  <c8y-export-schedules
                    export-id="{{ config.id }}"
                    (on-schedules-update)="updateSchedules($event)"
                  ></c8y-export-schedules>
                </div>
              </div>

              <div class="query-parameters">
                <div class="legend form-block">
                  {{ 'Filters' | translate }}
                </div>
                <div class="c8y-list__group">
                  <div class="c8y-list__item hidden-xs">
                    <div class="c8y-list__item__block">
                      <div class="c8y-list__item__check p-r-0">
                        <i class="p-l-24"></i>
                      </div>
                      <div class="c8y-list__item__body">
                        <div class="d-flex">
                          <div class="col-sm-4">
                            <label class="m-0">
                              {{ 'Name' | translate }}
                            </label>
                          </div>
                          <div class="col-sm-8 p-l-0">
                            <label class="m-0">
                              {{ 'Value' | translate }}
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div
                    class="c8y-list__item"
                    ng-repeat="filter in filters"
                    ng-include="':::PLUGIN_PATH:::/views/filter.html'"
                  ></div>
                </div>
              </div>

              <div class="legend form-block">
                {{ 'Fields' | translate }}
                <button
                  class="btn-help btn-help--sm"
                  type="button"
                  aria-label="{{ 'Help' | translate }}"
                  uib-popover="{{
                    'You will receive a CSV/Excel file for each selected type of data via email.'
                      | translate
                  }}"
                  popover-trigger="'focus'"
                  popover-placement="right"
                ></button>
              </div>

              <div ng-if="isNoApiChecked()" class="alert alert-warning max-width-100">
                <span translate>Select at least one data type for export.</span>
              </div>

              <div class="apiList">
                <div class="d-flex flex-wrap m-t-8 separator-bottom" ng-repeat="api in apis">
                  <div class="col-sm-4 m-b-auto p-b-8">
                    <div class="d-flex m-t-4 a-i-center">
                      <label class="c8y-switch">
                        <input
                          id="apiLabel"
                          type="checkbox"
                          ng-model="api.enabled"
                          ng-change="api.toggle(api, api.enabled);"
                          ng-required="isNoApiChecked()"
                        />
                        <span></span>
                      </label>
                      <div ng-class="{ 'text-muted': !api.enabled }">
                        <i c8y-icon="{{ api.icon }}" class="status icon-16"></i>
                      </div>
                      <p for="apiLabel" ng-class="{ 'text-muted': !api.enabled }" class="m-l-8">
                        {{ api.label | translate }}
                      </p>
                    </div>
                  </div>

                  <div class="apiListDetails col-sm-8 col-xs-12 m-b-auto" ng-show="api.enabled">
                    <div ng-include="':::PLUGIN_PATH:::/views/properties.html'"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer separator">
            <div class="row">
              <div class="col-md-8">
                <button
                  class="btn btn-default"
                  type="button"
                  title="{{ 'Cancel' | translate }}"
                  ng-click="cancel()"
                >
                  {{ 'Cancel' | translate }}
                </button>
                <button
                  class="btn btn-primary"
                  type="submit"
                  title="{{ 'Save' | translate }}"
                  ng-click="saveStay()"
                  ng-disabled="exportForm.$invalid || exportForm.$pristine"
                >
                  {{ 'Save' | translate }}
                </button>
                <button
                  class="btn btn-primary"
                  type="submit"
                  title="{{ 'Save and close' | translate }}"
                  ng-click="saveClose()"
                  ng-disabled="exportForm.$invalid || exportForm.$pristine"
                >
                  {{ 'Save and close' | translate }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
