<div class="card content-fullpage split-view--5-7">
  <div class="card-header flex-no-shrink large-padding separator-bottom grid__col--fullspan">
    <div class="card-title">{{ 'Objects' | translate }}</div>
  </div>
  <div class="inner-scroll split-view__list">
    <div class="bg-level-1 flex-grow">
      <ul class="c8y-nav-stacked">
        <li
          class="c8y-stacked-item removable"
          ng-repeat="object in vm.objects"
          ng-class="{ active: vm.isSelected(object) }"
        >
          <div class="d-flex flex-grow a-i-center">
            <button
              class="text-truncate btn-clean flex-grow"
              title="{{ object.title | translate }}"
              ng-click="vm.select(object)"
            >
              <i c8y-icon="portraits"></i>
              <span ng-bind="object.title | translate"></span>
            </button>
          </div>

          <c8y-generic-ui-inventory
            path="object.key"
            data-title="object.title"
            schema="object.schema"
            context="object.managedObject"
            only-basic-operations="true"
            class="m-l-auto m-r-24"
          ></c8y-generic-ui-inventory>
        </li>
      </ul>
    </div>
  </div>

  <div
    class="inner-scroll split-view__detail"
    ng-class="{ 'split-view__detail--selected': vm.selected }"
  >
    <div class="card-header separator visible-xs visible-sm sticky-top">
      <button
        class="btn btn-dot"
        title="{{ 'Back' | translate }}"
        type="button"
        ng-click="vm.select(null)"
      >
        <i c8y-icon="chevron-left"></i>
        <span translate>Back</span>
      </button>
    </div>
    <div class="flex-grow">
      <div class="card-block large-padding" ng-if="!vm.selected.key">
        <div class="c8y-empty-state c8y-empty-state--horizontal">
          <i class="c8y-icon c8y-icon-duocolor" c8y-icon="portraits"></i>
          <div>
            <p class="text-medium">{{ 'No object to display.' | translate }}</p>
            <p>{{ 'Select an instruction.' | translate }}</p>
          </div>
        </div>
      </div>
      <c8y-generic-ui-inventory
        path="vm.selected.key"
        data-title="vm.selected.title"
        schema="vm.selected.schema"
        context="vm.selected.managedObject"
        class="d-contents"
        ng-if="vm.selected.key"
      ></c8y-generic-ui-inventory>
    </div>
  </div>
</div>
