<page-header
  ng-if="ctrl.state.viewReady"
  title="'Application details'"
  breadcrumbs="[
    { label:'Namespaces', link:'kubernetes.resourcePools' },
    {
      label:ctrl.application.ResourcePool,
      link: 'kubernetes.resourcePools.resourcePool',
      linkParams:{ id: ctrl.application.ResourcePool }
    },
    { label:'Applications', link:'kubernetes.applications' },
    ctrl.application.Name
     ]"
  reload="true"
>
</page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row kubernetes-application">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body classes="no-padding">
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
              <uib-tab-heading> <pr-icon icon="'svg-laptopcode'" class-name="'mr-1'"></pr-icon> Application </uib-tab-heading>
              <application-summary-widget></application-summary-widget>
            </uib-tab>

            <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
              <uib-tab-heading>
                <pr-icon icon="'minimize-2'"></pr-icon> Placement
                <div ng-if="ctrl.state.placementWarning" class="vertical-center">
                  <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
                  warning
                </div>
              </uib-tab-heading>
              <div class="small text-muted vertical-center" style="padding: 20px">
                <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                The placement component helps you understand whether or not this application can be deployed on a specific node.
              </div>
              <kubernetes-application-placements-datatable
                title-text="Placement constraints/preferences"
                title-icon="minimize-2"
                dataset="ctrl.placements"
                table-key="kubernetes.application.placements"
                order-by="Name"
                reverse-order="false"
                loading="ctrl.state.dataLoading"
                refresh-callback="ctrl.getApplication"
              ></kubernetes-application-placements-datatable>
            </uib-tab>

            <uib-tab index="2" classes="btn-sm" select="ctrl.selectTab(2)">
              <uib-tab-heading>
                <pr-icon icon="'history'"></pr-icon> Events
                <div ng-if="ctrl.hasEventWarnings()" class="vertical-center">
                  <pr-icon icon="'alert-circle'" mode="'warning'"></pr-icon>
                  {{ ctrl.state.eventWarningCount }} warning(s)
                </div>
              </uib-tab-heading>
              <kubernetes-events-datatable
                title-text="Events"
                title-icon="history"
                dataset="ctrl.events"
                table-key="kubernetes.application.events"
                order-by="Date"
                reverse-order="true"
                loading="ctrl.state.eventsLoading"
                refresh-callback="ctrl.getEvents"
              ></kubernetes-events-datatable>
            </uib-tab>

            <uib-tab index="3" ng-if="ctrl.application.Yaml" select="ctrl.showEditor()" classes="btn-sm">
              <uib-tab-heading> <pr-icon icon="'code'"></pr-icon> YAML </uib-tab-heading>
              <div class="px-5" ng-if="ctrl.state.showEditorTab">
                <kubernetes-yaml-inspector key="application-yaml" data="ctrl.application.Yaml"></kubernetes-yaml-inspector>
              </div>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <application-details-widget></application-details-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <kubernetes-containers-datatable
        title-text="Application containers"
        title-icon="server"
        dataset="ctrl.allContainers"
        table-key="kubernetes.application.containers"
        is-pod="ctrl.application.ApplicationType === ctrl.KubernetesApplicationTypes.POD"
        order-by="{{ ctrl.application.ApplicationType === ctrl.KubernetesApplicationTypes.POD ? 'Name' : 'PodName' }}"
        use-server-metrics="ctrl.state.useServerMetrics"
      >
      </kubernetes-containers-datatable>
    </div>
  </div>
</div>
