<div
  class="c8y-list__item"
  [ngClass]="{ expanded: isDetailOpen }"
  [attr.data-cy]="mapping.browsePath | json"
>
  <div class="c8y-list__item__block">
    <div class="c8y-list__item__icon">
      <i c8yIcon="sliders"></i>
    </div>
    <div class="c8y-list__item__body">
      <div class="content-flex-70">
        <div class="col-5">
          <p
            class="text-truncate"
            title=" {{ nodeDisplayName }} {{
              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''
            }}"
            (click)="toggleDetail()"
          >
            {{ nodeDisplayName }}
            <small
              class="text-muted"
              *ngIf="mapping.browsePath.length > 0"
            >
              {{ mapping.browsePath | json }}
            </small>
          </p>
        </div>
        <div class="col-5">
          <div class="list-functionalities">
            <label class="small m-r-8 m-b-0 hidden-xs">
              {{ 'Functionalities' | translate }}
            </label>
            <c8y-object-mapping-status-icons [mapping]="mapping"></c8y-object-mapping-status-icons>
          </div>
        </div>
        <div class="flex-grow d-flex p-r-8">
          <button
            class="btn btn-dot btn-dot--danger showOnHover m-l-auto"
            [attr.aria-label]="'Remove' | translate"
            tooltip="{{ 'Remove' | translate }}"
            type="button"
            [delay]="500"
          >
            <i
              c8yIcon="minus-circle"
              (click)="onDelete()"
            ></i>
          </button>
        </div>
      </div>
    </div>
    <div class="c8y-list__item__actions">
      <button
        class="collapse-btn"
        title="{{ 'Expand' | translate }}"
        type="button"
        [ngClass]="{ active: isDetailOpen }"
        (click)="toggleDetail()"
        [attr.data-cy]="'toggleDetail'"
      >
        <i c8yIcon="chevron-down"></i>
      </button>
    </div>
  </div>
  <div
    class="collapse"
    [collapse]="!isDetailOpen"
    [isAnimated]="true"
  >
    <div class="c8y-list__item__collapse--container">
      <div
        class="form"
        [ngModelGroup]="index"
        #variableForm="ngModelGroup"
        *ngIf="isDetailOpen"
      >
        <div class="row p-t-8">
          <c8y-form-group
            class="col-md-4"
            [status]="!isBrowsePathUniq ? 'error' : ''"
            *ngIf="showAddressSpaceTree(); else simpleInput"
          >
            <label>{{ 'Path' | translate }}</label>
            <div
              class="dropdown fit-w"
              dropdown
              #dropdown="bs-dropdown"
              [insideClick]="true"
            >
              <div class="input-group">
                <input
                  class="form-control"
                  placeholder="{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}"
                  name="browsePath"
                  type="text"
                  autocomplete="off"
                  required
                  c8yBrowsePathValidator
                  [getMappings]="getMappings"
                  [model]="mapping"
                  [(ngModel)]="browsePath"
                  (change)="updateBrowsePathInput()"
                  (focus)="setTreeFromRefNode()"
                  #browsePathModel="ngModel"
                />
                <span class="input-group-btn">
                  <button
                    class="btn btn-default"
                    title="{{ 'Toggle address space' | translate }}"
                    type="button"
                    dropdownToggle
                  >
                    <i [c8yIcon]="'caret-down'"></i>
                  </button>
                </span>
              </div>
              <div
                class="dropdown-menu panel-inner-scroll fit-w"
                style="max-height: 240px"
                *dropdownMenu
              >
                <opcua-address-space-tree
                  [node]="referencedNode"
                  [moId]="referencedServerId"
                  (selectedNode)="updateBrowsePath($event); dropdown.hide()"
                ></opcua-address-space-tree>
              </div>
            </div>
            <c8y-messages>
              <c8y-message
                name="invalidBrowsePathNotation"
                text="{{ 'Must be a valid array of strings.' | translate }}"
              ></c8y-message>
              <c8y-message
                name="browsePathNotUnique"
                text="{{ 'Variable with this path is already added.' | translate }}"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>

          <ng-template #simpleInput>
            <c8y-form-group class="col-md-4">
              <label>{{ 'Path' | translate }}</label>
              <input
                class="form-control"
                placeholder="{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}"
                name="browsePath"
                type="text"
                autocomplete="off"
                required
                c8yBrowsePathValidator
                [getMappings]="getMappings"
                [model]="mapping"
                [(ngModel)]="browsePath"
                (change)="updateBrowsePathInput()"
                #browsePathModel="ngModel"
              />
              <c8y-messages>
                <c8y-message
                  name="invalidBrowsePathNotation"
                  text="{{ 'Must be a valid array of strings.' | translate }}"
                ></c8y-message>
                <c8y-message
                  name="browsePathNotUnique"
                  text="{{ 'Variable with this path is already added.' | translate }}"
                ></c8y-message>
              </c8y-messages>
            </c8y-form-group>
          </ng-template>

          <c8y-form-group class="col-md-4">
            <label>{{ 'Name' | translate }}</label>
            <div class="input-group">
              <input
                class="form-control"
                placeholder="{{ 'e.g. childDevice2' | translate }} "
                name="displayName"
                type="text"
                autocomplete="off"
                required
                [(ngModel)]="nodeDisplayName"
                (change)="updateDisplayname()"
              />
            </div>
          </c8y-form-group>
        </div>
        <div
          class="row"
          ngModelGroup="dataReportingSection"
        >
          <c8y-form-group class="col-sm-4 col-md-3 col-lg-2">
            <label>
              <span>{{ 'Data reporting' | translate }}</span>
            </label>
            <div class="input-group">
              <label
                class="c8y-radio radio-inline"
                title="{{ 'Default' | translate }}"
              >
                <input
                  name="{{ dataReportingName }}"
                  type="radio"
                  value="default"
                  [(ngModel)]="dataReporting"
                />
                <span></span>
                <span>{{ 'Default' | translate }}</span>
              </label>
              <label
                class="c8y-radio radio-inline"
                title="{{ 'Custom' | translate }}"
              >
                <input
                  name="{{ dataReportingName }}"
                  type="radio"
                  value="custom"
                  [(ngModel)]="dataReporting"
                />
                <span></span>
                <span>{{ 'Custom' | translate }}</span>
              </label>
            </div>
          </c8y-form-group>
          <div
            class="col-sm-8 col-md-9 col-lg-10"
            *ngIf="dataReporting === 'custom'"
            ngModelGroup="overriddenSubscription"
          >
            <opcua-device-protocol-data-reporting
              [model]="mapping"
              (onSubscriptionChange)="updateSubscriptionType($event)"
            ></opcua-device-protocol-data-reporting>
          </div>
        </div>

        <c8y-device-protocol-object-mappings
          [data]="mapping"
          [objectMappingTypes]="mappingTypes"
          (onUpdate)="onMappingUpdate($event)">
        </c8y-device-protocol-object-mappings>

        <button
          class="btn btn-default m-t-16 m-b-16"
          title="{{ 'Cancel' | translate }}"
          id="cancelBtn"
          type="button"
          (click)="cancel()"
        >
          {{ 'Cancel' | translate }}
        </button>
        <button
          class="btn btn-primary m-t-16 m-b-16"
          title="{{ 'Save' | translate }}"
          id="saveBtn"
          type="button"
          (click)="save()"
          [disabled]="!canSave(variableForm)"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>