<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    label="{{ 'Properties library' | translate }}"
    icon="cog"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Settings' | translate }}"
    icon="cog"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div class="card content-fullpage split-view--5-7">
  <div class="card-header separator grid__col--fullspan">
    <div class="card-title">{{ vm.getName() }}</div>
  </div>
  <div class="inner-scroll split-view__list">
    <div class="bg-level-1 flex-grow">
      <div class="nav c8y-nav-stacked">
        <button
          type="button"
          ng-if="vm.jsonSchemaObjects.length"
          class="c8y-stacked-item"
          ng-repeat="jsonSchemaObject in vm.jsonSchemaObjects | orderBy:'name' track by jsonSchemaObject.id"
          ng-click="vm.select(jsonSchemaObject)"
          ng-class="{ active: vm.selected === jsonSchemaObject }"
        >
          <i c8y-icon="{{ vm.getIcon() }}" class="icon-20 m-r-4"></i>
          <span class="text-truncate" title="{{ jsonSchemaObject.name }}">
            <span ng-bind="jsonSchemaObject.name"></span>
          </span>
        </button>
        <div ng-show="vm.jsonSchemaObjects.length === 0" class="card-block">
          <div class="c8y-empty-state c8y-empty-state--horizontal">
            <i class="c8y-icon c8y-icon-duocolor" c8y-icon="{{ vm.getIcon() }}"></i>
            <div>
              <p class="text-medium">{{ 'No properties to display.' | translate }}</p>
              <p>{{ 'Add a new property by clicking below.' | translate }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer sticky-bottom separator">
      <button
        title="{{ 'Add property' | translate }}"
        type="button"
        class="btn btn-default"
        ng-click="vm.newJsonSchemaObject()"
      >
        <i c8y-icon="plus-circle"></i>
        {{ 'Add property' | translate }}
      </button>
    </div>
  </div>

  <div
    class="inner-scroll split-view__detail"
    ng-class="{ 'split-view__detail--selected': vm.selected && vm.jsonSchemaObjects }"
  >
    <div class="card-header separator visible-sm visible-xs fit-w sticky-top">
      <button
        title="{{ 'Back' | translate }}"
        type="button"
        class="btn btn-clean text-primary"
        ng-click="vm.deselect()"
      >
        <i c8y-icon="chevron-left"></i>
        <span translate>Back</span>
      </button>
    </div>
    <div class="card-block" ng-if="!vm.selected">
      <div class="c8y-empty-state c8y-empty-state--horizontal">
        <i class="c8y-icon c8y-icon-duocolor" c8y-icon="{{ vm.getIcon() }}"></i>
        <div>
          <p class="text-medium">{{ 'No property to display.' | translate }}</p>
          <p>{{ 'Add or select a property.' | translate }}</p>
        </div>
      </div>
    </div>
    <c8y-json-schema-object-editor
      json-schema-object="vm.selected"
      on-save="vm.save(jsonSchemaObject)"
      on-cancel="vm.deselect()"
      on-remove="vm.remove(jsonSchemaObject)"
      class="d-flex d-col fit-h bg-level-0 p-16"
    ></c8y-json-schema-object-editor>
  </div>
</div>
