<div class="card content-fullpage split-view--5-7">
  <div class="card-header grid__col--fullspan separator">
    <div class="h4 card-title">OPC UA servers</div>
    <button
      class="btn-help"
      [attr.aria-label]="'Help' | translate"
      popover="{{
        'Below you can configure one or more OPC UA servers. The OPC UA agent will connect to these servers if they are enabled and the connection state is set to connected.'
          | translate
      }}"
      placement="right"
      triggers="focus"
      type="button"
    ></button>
  </div>
  <div class="inner-scroll split-view__list">
    <div class="bg-level-1 flex-grow">
      <div class="c8y-nav-stacked">
        <opcua-server-list
          [serverList]="serverObjectList"
          (present)="onPresent($event)"
        ></opcua-server-list>
      </div>
    </div>
    <div class="card-footer separator sticky-bottom">
      <button
        class="btn btn-default"
        title="{{ 'Add server' | translate }}"
        type="button"
        [disabled]="localServerObjectExist()"
        (click)="addServer()"
      >
        <i [c8yIcon]="'plus-circle'"></i>
        {{ 'Add server' | translate }}
      </button>
    </div>
  </div>

  <opcua-server-config
    class="inner-scroll split-view__detail"
    [ngClass]="{ 'split-view__detail--selected': server }"
    (canceled)="onCanceled($event)"
    (removed)="onRemoved($event)"
    (saved)="onSaved($event)"
    (updated)="onUpdated($event)"
    [server]="server"
  ></opcua-server-config>
</div>