<div class="list-group-item collapsible" [ngClass]="{ expanded: isDetailOpen }">
  <div class="flex-row" (click)="toggleDetail()">
    <div class="list-item-actions">
      <button class="btn btn-clean showOnHover flex-item-right" title="{{ 'Delete' | translate }}">
        <i c8yIcon="minus-circle" class="text-danger" (click)="onDelete()"></i>
      </button>
      <button
        type="button"
        title="{{ 'Expand' | translate }}"
        class="collapse-btn"
        [ngClass]="{ active: isDetailOpen }"
      >
        <i c8yIcon="chevron-down"></i>
      </button>
    </div>

    <div class="list-item-icon">
      <i c8yIcon="sliders"></i>
    </div>

    <div class="list-item-body">
      <div class="row flex-row">
        <div class="col-sm-7 col-xs-12">
          <p>
            {{ nodeDisplayName }}<br />
            <small
              *ngIf="mapping.browsePath.length > 0"
              class="text-muted text-truncate"
              title="{{ mapping.browsePath | json }}"
              >{{ mapping.browsePath | json }}</small
            >
          </p>
          <p></p>
        </div>
        <div class="col-sm-4 col-xs-10">
          <div class="list-functionalities">
            <label class="small m-r-8 hidden-xs" translate>Functionalities</label>&nbsp;
            <c8y-object-mapping-status-icons [mapping]="mapping"></c8y-object-mapping-status-icons>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="detail" [collapse]="!isDetailOpen" [isAnimated]="true">
    <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' : ''">
          <label translate>Path</label>
          <div
            class="dropdown"
            dropdown
            #dropdown="bs-dropdown"
            [insideClick]="true"
            style="width:100%;"
          >
            <input
              class="form-control"
              c8yBrowsePathValidator
              [getMappings]="getMappings"
              [model]="mapping"
              type="text"
              name="browsePath"
              dropdownToggle
              placeholder="{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}"
              [(ngModel)]="browsePath"
              (change)="updateBrowsePathInput()"
              (focus)="setTreeFromRefNode()"
              required
              #browsePathModel="ngModel"
              autocomplete="off"
            />
            <div
              *dropdownMenu
              class="dropdown-menu panel-inner-scroll"
              style="max-height:200px; width: 100%;"
            >
              <opcua-address-space-tree
                *ngIf="showAddressSpaceTree()"
                [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>

        <c8y-form-group class="col-md-4">
          <label translate>Name</label>
          <div class="input-group">
            <input
              class="form-control"
              type="test"
              name="displayName"
              placeholder="{{ 'e.g. childDevice2' | translate }} "
              required
              [(ngModel)]="nodeDisplayName"
              (change)="updateDisplayname()"
              autocomplete="off"
            />
          </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 translate>Data reporting</span>
          </label>
          <div class="input-group">
            <label title="{{ 'Default' | translate }}" class="c8y-radio radio-inline">
              <input
                type="radio"
                [(ngModel)]="dataReporting"
                name="{{ dataReportingName }}"
                value="default"
              />
              <span></span>
              <span>{{ 'Default' | translate }}</span>
            </label>
            <label title="{{ 'Custom' | translate }}" class="c8y-radio radio-inline">
              <input
                type="radio"
                [(ngModel)]="dataReporting"
                name="{{ dataReportingName }}"
                value="custom"
              />
              <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"
          ></opcua-device-protocol-data-reporting>
        </div>
      </div>

      <c8y-object-mapping [mapping]="mapping" [hideAutoObserve]="true"></c8y-object-mapping>
      <div ngModelGroup="customAction">
        <opcua-device-protocol-mapping-customaction
          [customAction]="customAction"
        ></opcua-device-protocol-mapping-customaction>
      </div>
      <button
        title="{{ 'Cancel' | translate }}"
        id="cancelBtn"
        class="btn btn-default m-t-16 m-b-16"
        (click)="cancel()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        title="{{ 'Save' | translate }}"
        id="saveBtn"
        class="btn btn-primary m-t-16 m-b-16"
        (click)="save()"
        [disabled]="!canSave(variableForm)"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </div>
</div>