<div class="viewport-modal">
  <div class="modal-header dialog-header" ng-show="title">
    <i c8y-icon="data-export"></i>
    <h4 id="modal-title">{{ title | translate }}</h4>
  </div>
  <div class="inner-scroll">
    <div class="modal-body" id="modal-body">
      <div>
        <form name="csvExporterForm">
          <div class="form-group">
            <label for="Field" class="control-label">{{ 'Field separator' | translate }}</label>
            <div class="c8y-select-wrapper">
              <select
                id="Field"
                ng-options="s.value as (s.label | translate) for s in fieldSeparators"
                class="form-control"
                ng-model="csvExporter.config.fieldSeparator"
              ></select>
              <span></span>
            </div>
          </div>
          <div class="form-group">
            <label for="Decimal" class="control-label">
              {{ 'Decimal separator' | translate }}
            </label>
            <div class="c8y-select-wrapper">
              <select
                id="Decimal"
                ng-options="s.value as (s.label | translate) for s in decimalSeparators"
                class="form-control"
                ng-model="csvExporter.config.decimalSeparator"
              ></select>
              <span></span>
            </div>
          </div>
          <div class="form-group">
            <label for="Charset" class="control-label">{{ 'Charset' | translate }}</label>
            <div class="c8y-select-wrapper">
              <select
                id="Charset"
                ng-options="charset for charset in charsets"
                class="form-control"
                ng-model="csvExporter.config.charset"
              ></select>
              <span></span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">{{ 'Options' | translate }}</label>
            <label title="{{ 'Quote strings' | translate }}" class="c8y-checkbox m-r-8">
              <input type="checkbox" ng-model="csvExporter.config.quoteStrings" />
              <span></span>
              <span>{{ 'Quote strings' | translate }}</span>
            </label>
            <label
              title="{{ 'Add Byte Order Mask (for Windows)' | translate }}"
              class="c8y-checkbox"
            >
              <input type="checkbox" ng-model="csvExporter.config.addBom" />
              <span></span>
              <span>{{ 'Add Byte Order Mask (for Windows)' | translate }}</span>
            </label>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default"
      type="button"
      ng-click="dismiss()"
    >
      {{ 'Cancel' | translate }}
    </button>

    <button
      title="{{ 'Download' | translate }}"
      class="btn btn-primary"
      type="button"
      ng-click="download()"
    >
      {{ 'Download' | translate }}
    </button>
  </div>
</div>
