<!-- 
  ~ Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved. 
  ~
  ~ This product is licensed to you under the Apache License, Version 2.0 (the "License"). 
  ~ You may not use this product except in compliance with the License. 
  ~
  ~ This product may include a number of subcomponents with separate copyright notices
  ~ and license terms.  Your use of these subcomponents is subject to the terms and
  ~ conditions of the subcomponent's license, as noted in the LICENSE file. 
  -->

<grid-view #gridView [serviceEndpoint]="serviceEndpoint" [projectLink]="projectLink"
           [searchPlaceholder]="'kubernetes.pods.search.placeholder' | i18n"
           [searchSuggestionProperties]="['name', 'ip', 'status']">

    <div title>{{"kubernetes.pods.title" | i18n | titlecase}}</div>

    <ng-template let-item="item">
        <card [routerLink]="['./' + item.documentId]"
              [ngClass]="{'card-actions-selected': isItemSelected(item)}">
            <div card-header>
                <div>
                    <img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>
                    <div class="titleHolder" [title]="item.name">
                        <div class="truncate">{{ item.name }}</div>
                    </div>
                </div>
            </div>

            <div card-content>
                <div card-content>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.creation" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div>{{item.pod?.metadata.creationTimestamp | date:'yyyy-MM-dd HH:mm:ss' || "--"}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.namespace" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div>{{item.pod?.metadata.namespace || "--"}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.containersNumber" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div class="badge badge-count">{{item.pod?.spec.containers.length || "--"}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.status" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div>{{"kubernetes.pods.state."  + item.pod?.status.phase.toUpperCase() | i18n}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.startTime" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div>{{item.pod?.status.startTime | date:'yyyy-MM-dd HH:mm:ss' || "--"}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label>{{"kubernetes.pods.item.ip" | i18n}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div>{{item.pod?.status.podIP || "--"}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div card-footer>
                <button class="btn btn-link"
                        [routerLink]="['./' + item.documentId]">{{"open" | i18n}}</button>
            </div>
        </card>
    </ng-template>
</grid-view>
