<!DOCTYPE html>
<!--
This file is part of Cockpit.

Copyright (C) 2015 Red Hat, Inc.

Cockpit is free software; you can redistribute it and/or modify it
under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation; either version 2.1 of the License, or
(at your option) any later version.

Cockpit is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en" ng-csp class="no-js">
<head>
  <meta charset="utf-8">
  <title translate>Kubernetes Cluster</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../base1/patternfly.css">
  <link rel="stylesheet" href="kubernetes.css">
  <script src="../base1/cockpit.js"></script>
  <script src="kubernetes.js"></script>
  <script src="../*/po.js"></script>
</head>

<body ng-app='kubernetes' ng-controller="MainCtrl" ng-class="{'cards-pf': viewActive(null)}" hidden>
    <div ng-cloak ng-if="!curtains">
        <div class="nav-pf-vertical nav-sidebar">
            <div class="nav-item-pf-header">
                <span translate>Cluster</span>
            </div>
                <ul class="list-group" id="kubernetes-navigation">
                <li class="list-group-item" ng-class="{ active: viewActive(null)}">
                    <a ng-href="#{{ viewUrl(null) }}">
                        <i class="fa fa-dashboard fa-fw" title="Overview"></i>
                        <span class="list-group-item-value" translate>Overview</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('nodes')}">
                    <a ng-href="#/nodes">
                        <i class="pficon pficon-container-node" title="Nodes"></i>
                        <span class="list-group-item-value" translate>Nodes</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('pods')}">
                    <a ng-href="#{{ viewUrl('pods') }}">
                        <i class="fa fa-cubes fa-fw" title="Containers"></i>
                        <span class="list-group-item-value" translate>Containers</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('vms')}" ng-if="settings.kubevirtEnabled">
                    <a ng-href="#{{ viewUrl('vms') }}" id="vms-menu-link">
                        <i class="fa pficon-virtual-machine fa-fw" title="Virtual Machines"></i>
                        <span class="list-group-item-value" translate>Virtual Machines</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('topology')}">
                    <a ng-href="#{{ viewUrl('topology') }}">
                        <i class="pficon pficon-topology fa-fw" title="Topology"></i>
                        <span class="list-group-item-value" translate>Topology</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('list')}">
                    <a ng-href="#{{ viewUrl('list') }}">
                        <i class="fa fa-list fa-fw" title="Details"></i>
                        <span class="list-group-item-value" translate>Details</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('volumes')}">
                    <!-- Directly to avoid any namespace filtering -->
                    <a id="kubernetes-volumes" ng-href="#{{ viewUrl('volumes', true) }}">
                        <i class="fa fa-database fa-fw" title="Volumes"></i>
                        <span class="list-group-item-value" translate>Volumes</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('images')}"
                    ng-if="settings.flavor == 'openshift'">
                    <a ng-href="#{{ viewUrl('images') }}">
                        <i class="pficon pficon-image fa-fw" title="Images"></i>
                        <span class="list-group-item-value" translate>Images</span>
                    </a>
                </li>
                <li class="list-group-item" ng-class="{ active: viewActive('projects')}"
                    ng-if="settings.flavor == 'openshift'">
                    <a ng-href="#{{ viewUrl('projects') }}">
                        <i class="pficon pficon-project fa-fw" title="Projects"></i>
                        <span class="list-group-item-value" translate>Projects</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

      <div id="content" role="main" class="container-fluid" ng-view ng-if="!curtains" data-flavor="{{settings.flavor}}">
      </div>

    <div class="curtains-ct blank-slate-pf" ng-if="curtains">
        <div class="blank-slate-pf-icon">
            <div class="spinner spinner-lg" ng-show="!curtains.status"></div>
            <i class="fa fa-exclamation-circle" ng-if="curtains.status && curtains.status != 403"></i>
            <i class="fa fa-lock" ng-if="curtains.status == 403"></i>
        </div>
        <h1 ng-if="!curtains.status" translate>Connecting...</h1>
        <h1 ng-if="curtains.status" role="alert" translate>Couldn't connect to server</h1>
        <p ng-if="curtains.message">{{curtains.message}}</p>
        <div class="blank-slate-pf-main-action" ng-if="curtains.status">
            <button id="kubernetes-reconnect" class="btn btn-primary btn-lg" translate ng-click="reconnect()">Reconnect</button>
            <button id="kubernetes-connection-tb" class="btn btn-primary btn-lg" translate ng-click="changeAuth(curtains.resp)">Troubleshoot</button>
        </div>
    </div>
</body>
</html>
