<div class="modal-header separator">
  <h4 id="modal-title" translate>Add alarm/event</h4>
</div>
<div class="modal-inner-scroll">
  <div class="modal-body" id="modal-body">
    <div class="form">
      <div class="form-group">
        <label translate>Asset</label>
        <c8y-device-selector-combo
          parent="vm.rootId"
          selected-child-device="vm.selectedDevice"
          read-only="vm.config.allowOnlyContextMo"
        ></c8y-device-selector-combo>
      </div>
    </div>

    <div ng-form="alarmEventConfigForm">
      <div class="alert alert-info" ng-show="vm.loadingSuggestedAlarmsEventsConfigs">
        <span>{{ 'Loading alarms and events…' | translate }}</span>
      </div>

      <div class="alert alert-info" ng-show="vm.suggestedAlarmsEventsConfigs.length" translate>
        The following are recent alarms and events you may want to add:
      </div>

      <table class="table table-condensed data-point-list" ng-show="vm.selectedDevice">
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th translate>Device</th>
            <th translate>Data type</th>
            <th translate>Alarm/event type</th>
          </tr>
        </thead>

        <tbody>
          <tr ng-repeat="cfg in vm.suggestedAlarmsEventsConfigs">
            <td class="text-center">
              <input title="{{ 'Select' | translate }}" type="checkbox" ng-model="cfg.__active" />
            </td>
            <td style="width: 30px" class="text-center">
              <i c8y-icon="circle" ng-style="{ color: cfg.color }"></i>
            </td>
            <td class="word-break">{{ cfg.__target.name }}</td>
            <td class="word-break">{{ cfg.timelineType | translate }}</td>
            <td class="word-break">{{ cfg.filters.type }}</td>
          </tr>
          <tr>
            <td class="text-center">
              <input
                title="{{ 'Select' | translate }}'"
                type="checkbox"
                ng-model="vm.customCfg.__active"
              />
            </td>
            <td class="text-center colorpicker-column" style="width: 20px">
              <i c8y-icon="circle" ng-style="{ color: vm.customCfg.color }"></i>
            </td>
            <td class="word-break">{{ vm.customCfg.__target.name }}</td>
            <td class="text-center">
              <select
                aria-label="{{ 'Data type' | translate }}"
                class="input-sm form-control"
                ng-options="tt.value as (tt.label | translate) for tt in vm.timelineTypes"
                ng-model="vm.customCfg.timelineType"
                ng-init="vm.customCfg.timelineType = vm.customCfg.timelineType || vm.timelineTypes[0].val"
                ng-required="vm.customCfg.__active"
              ></select>
            </td>
            <td class="text-center">
              <input
                name="alarmEventType"
                ng-model="vm.customCfg.filters.type"
                class="input-sm form-control"
                placeholder="{{ 'e.g.' | translate }} c8y_UnavailabilityAlarm"
                ng-required="vm.customCfg.__active"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    type="button"
    class="btn btn-default"
    ng-click="vm.cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ 'Add' | translate }}"
    type="button"
    class="btn btn-primary"
    ng-click="vm.add()"
    ng-disabled="!vm.getSelected().length || alarmEventConfigForm.$invalid"
  >
    {{ 'Add' | translate }}
  </button>
</div>
