@if (!isLoaded) {
  <c8y-title>{{ model.name }}</c8y-title>
}
<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-protocols'"
    [label]="'Device types' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-protocols'"
    [label]="'Device protocols' | translate"
    [path]="'deviceprotocols'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-protocols'"
    [label]="model?.name"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="row">
  <div class="col-lg-12 col-lg-max">
    @if (!isLoaded) {
      <form
        class="card card--fullpage"
        name="detailForm"
        #deviceTypeForm="ngForm"
      >
        <opcua-device-protocol-description [model]="model"></opcua-device-protocol-description>
        <div class="inner-scroll">
          <div class="d-contents">
            <div class="card-header separator-top-bottom bg-component sticky-top">
              <div
                class="h4"
                translate
              >
                Variables
              </div>
            </div>
            <div class="p-l-16 p-r-16">
              @if (model.mappings.length > 0) {
                <div
                  class="c8y-list__group"
                  ngModelGroup="variable"
                >
                  @for (resource of getMapping(); track trackById(i, resource); let i = $index) {
                    <opcua-device-protocol-mapping
                      [index]="i"
                      [referencedServerId]="model.referencedServerId"
                      [referencedRootNodeId]="model.referencedRootNodeId"
                      [resource]="getStructuredResource(resource)"
                      [getParentAttr]="getParentAttr"
                      (onAction)="actionHandler($event)"
                    ></opcua-device-protocol-mapping>
                  }
                </div>
              }
            </div>
            <div class="p-l-16 p-r-16 p-t-16">
              @if (model.mappings.length === 0) {
                <c8y-ui-empty-state
                  [icon]="'sliders'"
                  [title]="'No variables to display.' | translate"
                  [subtitle]="'Click below to add your first variable.' | translate"
                ></c8y-ui-empty-state>
              }
              <div class="card-footer">
                <button
                  class="btn btn-default addVariableBtn"
                  title="{{ 'Add variable' | translate }}"
                  type="button"
                  (click)="addVariable()"
                >
                  <i c8yIcon="plus-circle"></i>
                  {{ 'Add variable' | translate }}
                </button>
              </div>
            </div>
          </div>
          <div class="d-contents">
            <div class="card-header separator-top-bottom bg-component sticky-top">
              <div
                class="h4"
                translate
              >
                Data reporting
              </div>
            </div>
            <div
              class="p-l-16 p-r-16 p-t-16"
              ngModelGroup="subscription"
            >
              <opcua-device-protocol-data-reporting
                [groupName]="'subscription'"
                [model]="model"
              ></opcua-device-protocol-data-reporting>
            </div>
          </div>
          <div class="d-contents">
            <div class="card-header separator-top-bottom sticky-top">
              <div
                class="h4"
                translate
              >
                Auto apply constraints
              </div>
            </div>
            <div
              class="p-l-16 p-r-16 p-t-16 overflow-visible"
              ngModelGroup="autoApply"
            >
              <opcua-auto-apply [model]="model"></opcua-auto-apply>
            </div>
          </div>
          <div
            class="card-footer sticky-bottom separator"
            style="z-index: 101"
          >
            <button
              class="btn btn-primary"
              title="{{ 'Save' | translate }}"
              id="deviceTypeSave"
              type="button"
              (click)="save()"
              [disabled]="canSave(deviceTypeForm)"
            >
              {{ 'Save' | translate }}
            </button>
          </div>
        </div>
      </form>
    }
  </div>
</div>