<c8y-ui-title-set title="vm.mo.name | humanizeAppName"></c8y-ui-title-set>

<c8y-ui-action-bar-set>
  <c8y-realtime-switch state="vm.realtime"></c8y-realtime-switch>
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Refresh status page' | translate }}"
    ng-click="vm.refresh()"
  >
    <i c8y-icon="refresh" ng-class="{ 'icon-spin': vm.isRefreshing() }"></i>
    <span translate>Reload</span>
  </button>
</c8y-ui-action-bar-set>

<div class="card card--grid grid__col--4-4-4--md">
  <div class="d-flex d-col content-fullpage--md bg-level-0">
    <div class="inner-scroll--md" ng-if="vm.statusVisible()">
      <div class="card-header large-padding separator sticky-top">
        <div class="card-title">
          {{ 'Instances' | translate }}
        </div>
        <button
          class="btn-help"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'Number of active, unhealthy and desired microservice instances for the current tenant'
              | translate
          }}"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
        ></button>
      </div>
      <div class="card-block large-padding p-t-0 overflow-visible">
        <c8y-app-instances status-fragment="vm.status"></c8y-app-instances>
      </div>
    </div>

    <div
      class="inner-scroll--md"
      ng-if="vm.subscriptionsVisible()"
      data-cy="app-status--subscription-div"
    >
      <div class="card-header large-padding separator-top-bottom sticky-top">
        <div class="card-title">
          {{ 'Subscriptions' | translate }}
        </div>
        <button
          class="btn-help"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'Number of active, unhealthy and desired microservice instances for all subtenants subscribed to the microservice'
              | translate
          }}"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
        ></button>
      </div>
      <div class="card-block large-padding p-t-0 overflow-visible">
        <c8y-app-tenant-subscriptions-list mo="vm.mo"></c8y-app-tenant-subscriptions-list>
      </div>
    </div>
  </div>

  <div class="d-flex d-col content-fullpage--md bg-level-1">
    <div ng-if="vm.mo" class="inner-scroll--md">
      <div class="card-header large-padding separator sticky-top">
        <div class="card-title">
          {{ 'Events' | translate }}
        </div>
        <button
          class="btn-help"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{ 'Events for given application, provided in realtime' | translate }}"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
        ></button>
      </div>
      <div class="card-block large-padding p-t-16">
        <c8y-app-events
          hide-device="true"
          realtime="vm.realtime"
          source-id="vm.mo.id"
          refresh-loading="vm.refreshingItems.events"
        ></c8y-app-events>
      </div>
    </div>
  </div>

  <div class="d-flex d-col content-fullpage--md bg-level-0">
    <div ng-if="vm.mo" class="inner-scroll--md">
      <div class="card-header large-padding separator sticky-top">
        <div class="card-title">
          {{ 'Alarms' | translate }}
        </div>
        <button
          class="btn-help btn-help--sm"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{ 'Alarms for given application, provided in realtime' | translate }}"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
        ></button>
      </div>
      <div class="card-block large-padding p-r-md-0 hide-inner-cards">
        <c8y-app-alarms
          hide-device="true"
          realtime="vm.realtime"
          source-id="vm.mo.id"
          refresh-loading="vm.refreshingItems.alarms"
        ></c8y-app-alarms>
      </div>
    </div>
    <div ng-if="vm.mo && vm.smartRulesMsExist" class="inner-scroll--md">
      <div class="card-header large-padding separator-top-bottom sticky-top">
        <div class="card-title">
          {{ 'Smart rules' | translate }}
        </div>
        <button
          class="btn-help btn-help--sm"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'Use alarms to create smart rules for microservice availability.' | translate
          }}"
          popover-trigger="'focus'"
          popover-append-to-body="true"
          popover-placement="right"
        ></button>
      </div>
      <div class="card-block large-padding p-t-0 overflow-visible">
        <smart-rules-list mo="vm.mo.id" filter="smartRulesFilter"></smart-rules-list>
      </div>
    </div>
  </div>
</div>
