<div class="card content-fullpage split-view--5-7">
  <div class="card-header separator grid__col--fullspan">
    <h4>{{ 'Connections' | translate}}</h4>
  </div>
  <div class="inner-scroll split-view__list">
    <div class="bg-gray-white flex-grow">
      <div class="card-block large-padding">
        <c8y-ui-empty-state
          [icon]="'plug'"
          [title]="'No connections found.' | translate"
          [subtitle]="'Click below to add a new connection.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
    </div>

    <div class="card-footer separator">
      <button
        title="{{ 'Add connection' | translate }}"
        class="btn btn-primary"
        (click)="addConnection()"
      >
        <i [c8yIcon]="'plus-circle'"></i>
        {{ 'Add connection' | translate }}
      </button>
    </div>
  </div>
  <div class="inner-scroll split-view__detail">
    <div class="flex-grow">
      <div class="card-block large-padding">
        <c8y-ui-empty-state
          [icon]="'more-details'"
          [title]="'No settings to display.' | translate"
          [subtitle]="'Add a connection.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
    </div>
  </div>
</div>