<!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 ng-csp>

<head>
  <title translate>Software Updates</title>
  <meta charset="utf-8">
  <link href="../base1/patternfly.css" rel="stylesheet">
  <link href="ostree.css" rel="stylesheet">
  <script src="../base1/cockpit.js"></script>
  <script src="ostree.js"></script>
  <script src="../*/po.js"></script>
</head>
<body ng-app='ostree' hidden>

<script type="text/ng-template" id="edit-remote.html">
<modal-group>
    <div class="list-group-item">
        <div class="group-buttons">
            <div class="listing-ct-actions">
                <button class="btn btn-danger" ng-click="complete(delete())" translate>Delete</button>
                <button class="btn btn-primary" ng-click="complete(update())" ng-class="{disabled: !fields}" translate>Apply</button>
            </div>
            <p><strong>{{ remote }}</strong></p>
        </div>

        <table class="form-table-ct" ng-if="fields">
            <tbody>
            <tr>
                <td>
                    <label class="control-label" translate>URL</label>
                </td>
                <td>
                    <span>{{ fields.url }}</span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="top">
                    <label>
                        <input id="gpg-verify" class="form-checkbox" type="checkbox" ng-model="fields.gpgVerify" translate>
                        <span translate>Use trusted GPG key</span>
                    </label>

                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <textarea id="gpg-data"
                        class="form-control"
                        placeholder="Begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'"
                        ng-model="fields.gpgData"
                        translate="placeholder"
                        ng-if="showGpgData">
                    </textarea>
                    <button class="btn btn-default" ng-click="toggleGpgData()"
                        ng-if="!showGpgData" translate>Add Another Key</button>
                </td>
            </tr>
            </tbody>

        </table>
    </div>
</modal-group>
</script>

<script type="text/ng-template" id="add-remote.html">
<modal-group>
    <div class="group-buttons">
        <div class="listing-ct-actions">
            <button class="btn btn-primary" ng-click="complete(add())" translate>Add</button>
        </div>
        <p><strong translate>- Add New Repository</strong></p>
    </div>

    <table class="form-table-ct">
        <tbody>
            <tr>
                <td>
                    <label class="control-label" translate>Name</label>
                </td>
                <td>
                    <input id="remote-name" class="form-control" type="text"
                        ng-model="fields.name">
                </td>
            </tr>

            <tr>
                <td>
                    <label class="control-label" translate>URL</label>
                </td>
                <td>
                    <input id="remote-url" class="form-control" type="text"
                        ng-model="fields.url">
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="top">
                    <label>
                        <input id="gpg-verify" class="form-checkbox" type="checkbox" ng-model="fields.gpgVerify" translate>
                        <span translate>Use trusted GPG key</span>
                    </label>

                </td>
            </tr>
        </tbody>
    </table>
</modal-group>
</script>

<script type="text/ng-template" id="repository-dialog.html">
<modal-dialog>
    <div class="modal-header">
        <h3 class="modal-title" translate>Change Repository</h3>
    </div>

    <div class="modal-body modal-scrollable">
        <div class="alert alert-warning" ng-if="loading_error">
          <span class="pficon pficon-warning-triangle-o"></span>
          <strong>{{ loading_error }}</strong>
        </div>
        <div class="spinner spinner-lg" ng-if="loading"></div>

        <div class="list-group dialog-list-ct" ng-if="!loading">
            <div ng-if="0" ng-repeat-start="r in remotes"></div>
                <div class="list-group-item" ng-if="editing != r" ng-class="{'active' : remote == r}"
                    ng-click="toggleSelected(r)">
                    <div class="listing-ct-actions">
                        <button class="btn btn-default pficon pficon-edit"
                            ng-if="r != editing" ng-click="toggleEdit(r, $event)"></button>
                    </div>
                    <p>{{ r }}</p>
                </div>
                <edit-remote remote="r" ng-if="r == editing"></edit-remote>
            <div ng-if="0" ng-repeat-end></div>
            <div class="list-group-item" ng-click="openAdd()">
                <p ng-if="!adding">+ Add New Repository</p>
                <add-remote ng-if="adding"></add-remote>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn btn-default btn-cancel" ng-click="$dismiss()" translate>Cancel</button>
        <button class="btn btn-primary" ng-class="{'disabled': !canSubmit()}" ng-click="complete(update())">Change Repository</button>
    </div>

</modal-dialog>
</script>

<script type="text/ng-template" id="ostree-check.html">
<div class="timeline-ct timeline-ct-end">
    <div class="timeline-ct-point timeline-ct-md" ng-if="isRunning">
        <div class="spinner"></div>
    </div>
    <i ng-if="!isRunning" class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
    <div class="listing-ct-panel listing-ct-maybe">
        <div class="listing-ct-head">
            <div ng-if="isRunning" class="display-inline">
                {{ progressMsg }}
            </div>
            <div ng-if="!isRunning" class="display-inline">
                <span ng-if="currentOrigin">
                    <span translate>Currently using:</span>
                    <a id="change-repo" ng-click="changeRepository()">{{ currentOrigin.remote }}</a>
                    <span translate>at</span>
                    <span class="dropdown main-nav" dropdown>
                        <a id="change-branch" class="dropdown-toggle" dropdown-toggle>
                            <span>{{ currentOrigin.branch }}</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li ng-if="branches.error">
                                <div class="alert">
                                <span class="pficon pficon-warning-triangle-o"></span>
                                {{ branches.error }}
                                </div>
                            </li>
                            <li ng-repeat="branch in branches.list"
                                ng-class="{ checked: currentOrigin.branch == branch }">
                                <a ng-click="switchBranch(branch)" value="{{branch}}">{{branch}}</a>
                            </li>
                        </ul>
                    </span>
                </a>
                <span ng-if="!currentOrigin">No configured remote</span>
            </div>
            <div class="display-inline">&nbsp;</div>
            <div class="listing-ct-actions">
                <button class="btn btn-default" ng-class="{ disabled: runningMethod, enabled: !runningMethod }" ng-click="checkForUpgrades()" translate>Check for Updates</button>
            </div>
            <div class="alert alert-warning" ng-if="error && !runningMethod">
                <span class="pficon pficon-warning-triangle-o"></span>
                {{ error }}
            </div>
        </div>
    </div>
</div>
</script>

<script type="text/ng-template" id="ostree-item.html">
<div class="timeline-ct">
    <div class="timeline-ct-point timeline-ct-md" ng-if="isRunning">
        <div class="spinner"></div>
    </div>
    <i class="fa fa-circle timeline-ct-point"
       ng-if="!matches('DefaultDeployment') && !isRunning"></i>
    <i class="fa timeline-ct-point timeline-ct-lg active fa-check-circle-o"
       ng-if="matches('DefaultDeployment') && !isRunning"></i>
    <div class="listing-ct-panel">
        <div class="listing-ct-head">
            <div class="listing-ct-actions">
                <button ng-class="{ disabled: runningMethod, enabled: !runningMethod }"
                        ng-click="doUpgrade(item.osname.v, item.checksum.v)"
                        ng-if="isUpdate()"
                        class="btn btn-primary" translate>Update and Reboot</button>
                <button ng-class="{ disabled: runningMethod, enabled: !runningMethod }"
                        ng-click="doRollback(item.osname.v)"
                        ng-if="isRollback()"
                        translate class="btn btn-default">Roll Back and Reboot</button>
                <button ng-class="{ disabled: runningMethod, enabled: !runningMethod }"
                        ng-click="doRebase(item.osname.v, item.origin.v, item.checksum.v)"
                        ng-if="isRebase()"
                        translate class="btn btn-default">Rebase and Reboot</button>
            </div>
            <h3>{{ item | releaseName }}</h3>
            <div ng-if="!isRunning" class="listing-ct-status">
              <span ng-if="!error">
                  <span ng-if="matches('BootedDeployment')">
                    <i class="pficon pficon-ok"></i>
                    <span translate>Running</span>
                  </span>
                  <span ng-if="!matches('BootedDeployment') && matches('DefaultDeployment')"
                        translate>Default</span>
                  <span ng-if="!matches('BootedDeployment') && !matches('DefaultDeployment')"
                        translate>Available</span>
              </span>
              <span ng-if="error" translate>Failed</span>
            </div>
            <div ng-if="isRunning" class="listing-ct-status">
                <div class="ostree-progress" ng-if="progressMsg">{{ progressMsg }}</div>
                <div class="ostree-progress" ng-if="!progressMsg" translate>Updating</div>
            </div>
            <ul class="nav nav-tabs nav-tabs-pf">
                <li ng-class="{active: activeTab('tree')}"><a translate ng-click="switchTab('tree')">Tree</a></li>
                <li ng-class="{active: activeTab('packages') }"><a translate ng-click="switchTab('packages')">Packages</a></li>
                <li ng-class="{active: activeTab('signature') }"><a translate ng-click="switchTab('signature')">Signature</a></li>
            </ul>
        </div>
        <div class="listing-ct-error alert" ng-if="error">
            <span class="pficon pficon-warning-triangle-o"></span>
            {{ error }}
        </div>
        <div class="listing-ct-body hidden signatures" ng-class="{active: activeTab('signature')}">
            <div class="row">
                <div class="col-sm-12" ng-repeat="v in item.signatures.v"
                    ng-init="sig = signature_obj(v)" ng-if="item.signatures">
                    <dl>
                        <dt ng-if="sig.by" translate>Signed by</dt>
                        <dd ng-if="sig.by">{{ sig.by }}</dd>

                        <dt ng-if="sig.timestamp" translate>When</dt>
                        <dd ng-if="sig.timestamp">{{ sig.timestamp | dateFormat }}</dd>

                        <dt ng-if="sig.fp && sig.fp_name">{{ sig.fp_name }}</dt>
                        <dd ng-if="sig.fp && sig.fp_name">{{ sig.fp }}</dd>

                        <dt translate>Status</dt>
                        <dd ng-if="sig.valid" translate>Good Signature</dd>
                        <dd ng-if="sig.expired" translate>Expired Signature</dd>
                        <dd ng-if="!sig.valid && !sig.expired" translate>Invalid Signature</dd>
                    </dl>
                </div>
                <div ng-if="!item.signatures" class="text-center" translate>No signature avaliable</div>
            </div>
        </div>
        <div class="listing-ct-body hidden tree" ng-class="{active: activeTab('tree')}">
            <div class="row">
                <div class="col-sm-6">
                    <dl>
                        <dt ng-if="item.osname.v" translate>Operating System</dt>
                        <dd class="os" ng-if="item.osname.v"> {{ item.osname.v }}</dd>
                        <dt ng-if="item.version.v" translate>Version</dt>
                        <dd class="version" ng-if="item.version.v">{{ item.version.v }}</dd>
                        <dt ng-if="item.timestamp.v" translate>Released</dt>
                        <dd class="timestamp" ng-if="item.timestamp.v" title="{{ item.timestamp.v | dateFormat }}">{{ item.timestamp.v | timeAgo }}</dd>
                        <dt ng-if="item.origin.v" translate>Origin</dt>
                        <dd class="origin" ng-if="item.origin.v">{{ item.origin.v }}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="packages">
                    <dl>
                        <dt ng-if="packages.adds" translate>Additions</dt>
                        <dd class="adds" ng-if="packages.adds">{{ packages.adds.length|packages }}</dd>
                        <dt ng-if="packages.removes" translate>Removals</dt>
                        <dd class="removes" ng-if="packages.removes">{{ packages.removes.length|packages }}</dd>
                        <dt ng-if="packages.up" translate>Updates</dt>
                        <dd class="updates" ng-if="packages.up">{{ packages.up.length|packages }}</dd>
                        <dt ng-if="packages.down" translate>Downgrades</dt>
                        <dd class="downgrades" ng-if="packages.down">{{ packages.down.length|packages }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="listing-ct-body hidden packages" ng-class="{active: activeTab('packages')}">
            <div class="row">
                <div class="col-sm-6" ng-if="packages.empty"
                    translate>This deployment contains the same packages as your currently booted system</div>
                <div class="col-sm-6" ng-if="packages.adds">
                    <dl class="additions full-width">
                        <dt translate>Additions</dt>
                        <dd ng-repeat="package in packages.adds">{{package.name}}-{{package.version}}.{{package.arch}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="packages.removes">
                    <dl class="removals full-width">
                        <dt translate>Removals</dt>
                        <dd ng-repeat="package in packages.removes">{{package.name}}-{{package.version}}.{{package.arch}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="packages.up">
                    <dl class="upgrades full-width">
                        <dt translate>Updates</dt>
                        <dd ng-repeat="package in packages.up">{{package.name}}-{{package.version}}.{{package.arch}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="packages.down">
                    <dl class="downgrades full-width">
                        <dt translate>Downgrades</dt>
                        <dd ng-repeat="package in packages.down">{{package.name}}-{{package.version}}.{{package.arch}}</dd>
                    </dl>
                </div>

                <div class="col-sm-6" ng-if="packages.rpms1">
                    <dl class="rpms-col1">
                        <dd class="full" ng-repeat="package in packages.rpms1">{{package.name}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="packages.rpms2">
                    <dl class="rpms-col2">
                        <dd class="full" ng-repeat="package in packages.rpms2">{{package.name}}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
</script>

<script type="text/ng-template" id="index.html">
<table class="listing-ct listingtop">
    <thead>
        <tr>
            <td colspan="2">
                <h3 translate>Operating System Updates</h3>
                <div class="btn-group bootstrap-select os-list" ng-if="os_list.length > 1" dropdown>
                    <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                        <span class="pull-left">{{ os }}</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li ng-repeat="name in os_list"
                            ng-class="{ checked: os == name }">
                            <a ng-click="displayOS(name)" value="{{name}}">{{name}}</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </thead>
    <tbody ng-if="os">
        <tr>
            <td>
                <ostree-check os="os" running-method = "runningMethod" current-origin="currentOrigin"></ostree-check>
            </td>
        </tr>
    </tbody>
    <tbody ng-repeat="item in knownVersions() track by track_id(item)"
           ng-class="{ active: itemMatches(item, 'BootedDeployment') }">
        <tr>
            <td>
                <ostree-item item="item" running-method = "runningMethod"></ostree-item>
            </td>
        </tr>
    </tbody>
</table>
</script>

    <div id="ostree-software-update" ng-controller="mainController" ng-cloak>
        <div class="container-fluid" ng-view ng-if="!curtains">
        </div>

        <div class="curtains-ct blank-slate-pf" ng-if="curtains && curtains.state != 'silent'">
            <div class="blank-slate-pf-icon">
                <div class="spinner spinner-lg" ng-if="curtains.state == 'connecting'"></div>
                <i class="fa fa-exclamation-circle" ng-if="curtains.failure"></i>
            </div>
            <h1 ng-if="curtains.state == 'connecting'" translate>Connecting to OSTree</h1>
            <h1 ng-if="curtains.state == 'failed'" translate>Unable to communicate with OSTree</h1>
            <h1 ng-if="curtains.state == 'empty'" translate>No Deployments</h1>
            <p ng-if="curtains.message">{{curtains.message}}</p>
            <div class="blank-slate-pf-main-action" ng-if="curtains.state == 'failed' && !curtains.final">
                <button class="btn btn-primary btn-lg" translate ng-click="reconnect()">Reconnect</button>
            </div>
        </div>
    </div>
</body>

</html>
