<div
  ng-controller="ScadaWidgetConfigCtrl as ctrl"
>
  <fieldset class="c8y-fieldset">
    <legend class="d-flex a-i-center">
      <span translate>SVG</span>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{ 'Toggle help text' | translate }}"
        popover-placement="right"
        popover-trigger="'focus'"
        popover-append-to-body="true"
        ng-click="svgTooltipVisible = !svgTooltipVisible"
      ></button>
    </legend>

    <div
      class="alert alert-info text-left"
      ng-show="svgTooltipVisible"
    >
      <p translate>
        For placeholder to be recognized it needs to be used at least once in curly braces with no
        other expression, for example,
        <code ng-bind-html="'\{\{&nbsp;placeholderName`KEEP_ORIGINAL`&nbsp;\}\}'"></code>
        . Then you can use this placeholderName`KEEP_ORIGINAL` in bindings handled by Angular. There
        are also predefined functions available:
      </p>
      <ul class="p-l-16">
        <li>
          <code ng-non-bindable>goToGroupDetails(groupId)</code>
          &ndash;
          <translate>
            takes the group ID and redirects the user to the group details view, for example:
          </translate>
          <br />
          <code ng-non-bindable>&lt;… ng-click="goToGroupDetails(groupId)"&gt;</code>
          ,
        </li>
        <li>
          <code ng-non-bindable>goToDeviceDetails(deviceId)</code>
          &ndash;
          <translate>
            takes the device ID and redirects the user to the device details view, for example:
          </translate>
          <br />
          <code ng-non-bindable>&lt;… ng-click="goToDeviceDetails(deviceId)"&gt;</code>
          ,
        </li>
        <li>
          <code ng-non-bindable>getActiveAlarmsStatusClass(alarmsStatus)</code>
          &ndash;
          <translate>
            takes the alarm status object and returns a CSS class that can be used for styling:
            none`KEEP_ORIGINAL`, warning`KEEP_ORIGINAL`, minor`KEEP_ORIGINAL`, major`KEEP_ORIGINAL`,
            critical`KEEP_ORIGINAL`, for example:
          </translate>
          <br />
          <code ng-non-bindable>&lt;… ng-class="getActiveAlarmsStatusClass(alarmsStatus)"&gt;</code>
          .
        </li>
      </ul>
    </div>
    <div class="form-group">
      <file-picker
        files="ctrl.files"
        multiple="false"
        display-drop-zone="false"
        on-file-selected="ctrl.onSelectFile(ctrl.files[0].file)"
      ></file-picker>
      <input type="hidden" />
    </div>
    <div class="form-group form-group-sm">
      <label
        for="sanitization"
        translate
      >
        Select code sanitization option
      </label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          id="sanitization"
          ng-model="config.sanitization"
          ng-init="config.sanitization = config.sanitization || 'strict'"
          ng-change="ctrl.retrieveSvgData(ctrl.binaryFile)"
        >
          <option
            value="strict"
            translate
          >
            strict`code sanitization`
          </option>
          <option
            value="lax"
            translate
          >
            lax`code sanitization`
          </option>
          <option
            value="none"
            translate
          >
            none`code sanitization`
          </option>
        </select>
      </div>
    </div>
  </fieldset>

  <div class="form-group p-t-16">
    <label class="input-group">{{ 'Preview' | translate }}</label>
    <span
      class="help-block m-b-8"
      id="helpBlock"
      ng-if="config.sanitization !== 'none'"
      translate
    >
      SVG content will be sanitized.
    </span>
    <span
      class="m-l-4"
      ng-show="ctrl.loading"
    >
      <i
        class="icon-spin"
        c8y-icon="spinner"
      ></i>
    </span>
    <div ng-switch="!!(ctrl.device && forms.componentForm.mapping.$valid && config.mapping)">
      <div
        ng-switch-when="true"
        c8y-scada-svg
        ng-model="ctrl.svgFile.data"
        mapping="config.mapping"
        device="ctrl.device"
        devices="ctrl.devices"
        device-ids="config.deviceIds"
        sanitization-option="config.sanitization"
      ></div>
      <div
        class="alert alert-info"
        ng-switch-default
        translate
      >
        Select a device and fill all mappings to preview an SVG.
      </div>
    </div>
  </div>
  
  <div
    name="mapping"
    c8y-scada-mapping
    ng-model="config.mapping"
    device="ctrl.device"
    devices="ctrl.devices"
    device-ids="config.deviceIds"
    on-device-ids-change="ctrl.onDeviceIdsChange()"
  ></div>
</div>
