<list-cluster [resources]="clusterList"></list-cluster>
<div class="clr-row" style="padding-left: 5%">
  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
    <div class="clr-row flex flex-items-xs-between flex-items-xs-top"
         style="flex-wrap: nowrap;justify-content: flex-start;padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title"
          style="margin-top: 12px;white-space: nowrap;">{{'MENU.APP' | translate}}{{'MENU.OVERVIEW' | translate}}</h2>
    </div>
    <form>
      <section class="form-block form-box">
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.NAME' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{app.name}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.CREATE_USER' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{app.user}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.CREATE_TIME' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{app.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.EXPLAIN' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{app.description}}
            <a (click)="editApp(app)" *ngIf="authService.currentNamespacePermission.app.update || authService.currentUser.admin"  href="javascript:void();"><clr-icon shape="pencil"></clr-icon></a>
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            <div class="flex" style="height:70px;flex-direction: column; justify-content:space-around;">
              <span>{{'TITLE.CPU_USAGE' | translate}}</span>
              <span>{{'TITLE.MEMORY_USAGE' | translate}}</span>
            </div>
          </div>
          <div class="clr-col-sm-10">
            <ng-container *ngFor="let cluster of clusters; let i = index">
              <div class="statistic-column-block" style="text-align: left">
                <div>
                  <div class="statistic-wrapper">
                    <span class="statistic-data" style="font-size: 14px">{{cluster}} <label
                      class="resource-label">{{resources[cluster].usage.cpu}}</label>
                      {{'UNIT.CORE' | translate}}</span>
                  </div>
                </div>
                <div>
                  <div class="statistic-wrapper">
                    <span class="statistic-data" style="font-size: 14px">{{cluster}}
                      <label class="resource-label">{{resources[cluster].usage.memory}}</label> G</span>
                  </div>
                </div>
              </div>

            </ng-container>
          </div>
        </div>
        <div class="clr-row group">
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.DEPLOYMENT' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('deployment')"
                 class="nav-link">{{resourceCount(deployment)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.STATEFULSET' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('statefulset')"
                 class="nav-link">{{resourceCount(statefulSet)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.DAEMONSET' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('daemonset')"
                 class="nav-link">{{resourceCount(daemonSet)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.CRONJOB' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('cronjob')" class="nav-link">{{resourceCount(cronJob)}}</a>
            </p>
          </wayne-card>
        </div>
        <div class="clr-row group">
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.SERVICE' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('service')" class="nav-link">{{resourceCount(service)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.CONFIGMAP' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('configmap')"
                 class="nav-link">{{resourceCount(configMap)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.SECRET' | translate}}</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('secret')" class="nav-link">{{resourceCount(secret)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">PVC</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('persistentvolumeclaim')"
                 class="nav-link">{{resourceCount(persistentVolumeClaim)}}</a>
            </p>
          </wayne-card>
        </div>
      </section>
    </form>
  </div>
</div>
<create-edit-app (create)="updateAppEvent($event)"></create-edit-app>
