<div class="inner-scroll">
  <div class="d-flex d-col fit-min-h">
    <div class="card-block bg-level-0 p-t-0">
      <device-availability-status
        device="vm.device"
        status="vm.status"
      ></device-availability-status>
    </div>
    <div class="card-block m-t-auto separator-top bg-level-1 p-t-0 p-b-8">
      <owner-status device="vm.device"></owner-status>
      <required-availability-interval-setting
        device="vm.device"
        status="vm.status"
      ></required-availability-interval-setting>

      <div
        class="btn-group-justified btn-group-sm p-t-8 separator-top device-status-btn"
        role="group"
      >
        <button
          class="btn btn-default"
          title="{{ 'Restart device' | translate }}"
          data-cy="c8y-device-status--restart-btn"
          ng-if="vm.displayRestartBtn"
          ng-click="vm.restart()"
        >
          <i c8y-icon="reset"></i>
          <span>{{ 'Restart' | translate }}</span>
        </button>
        <button
          class="btn btn-default {{ buttonInfo.class }}"
          title="{{ buttonInfo.title | translate }}"
          type="button"
          data-cy="c8y-device-status--additional-btn"
          ng-click="buttonInfo.action(vm.device)"
          ng-repeat="buttonInfo in vm.additionalButtonsInfo"
        >
          <i c8y-icon="{{ buttonInfo.icon }}"></i>
          <span>{{ buttonInfo.label | translate }}</span>
        </button>
        <button
          class="btn btn-danger"
          title="{{ 'Delete device' | translate }}"
          type="button"
          data-cy="c8y-device-status--delete-btn"
          ng-click="vm.deleteDevice()"
          ng-if="!vm.additionalButtonsHaveDelete"
        >
          <i c8y-icon="delete"></i>
          <span>{{ 'Delete' | translate }}</span>
        </button>
      </div>
    </div>
  </div>
</div>
