<!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>
<head>
    <title translatable="yes">Storage</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" type="text/css" rel="stylesheet">
    <link href="storage.css" type="text/css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../manifests.js"></script>
    <script src="../*/po.js"></script>
    <script src="storage.js"></script>
</head>
<body hidden>

  <!-- CURTAIN -->

  <div id="unsupported" hidden>
    <div class="curtains-ct blank-slate-pf">
      <h1 translatable="yes">The "storaged" API is not available on this system.</h1>
    </div>
  </div>

  <!-- ALERT FOR BROKEN MULTIPATH -->

  <div id="multipath-broken" class="container-fluid page-ct" hidden>
    <div class="alert alert-danger">
      <span class="pficon pficon-error-circle-o"></span>
      <button id="activate-multipath" translatable="yes"
              class="btn btn-default pull-right">Start Multipath</button>
      <span class="alert-message" translatable="yes">There are devices with multiple paths on the system, but the multipath service is not running.</span>
    </div>
  </div>

  <!-- OVERVIEW -->

  <div id="storage" hidden>
  </div>

  <!-- DETAIL -->

  <div id="storage-detail" hidden>
  </div>

  <!-- DIALOGS -->

  <div class="modal" id="error-popup"
       tabindex="-1" role="dialog"
       data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="error-popup-title"></h4>
        </div>
        <div class="modal-body">
          <p id="error-popup-message"></p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" translate>Close</button>
        </div>
      </div>
    </div>
  </div>

  <script id="storage-dialog-tmpl" type="x-template/mustache">
    <div id="dialog" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">{{Title}}</h4>
          </div>
          {{#HasBody}}
          <div class="modal-body">
            {{#Alerts}}
            <div class="alert alert-danger">
              <span class="pficon pficon-error-circle-o"></span>
              <span class="alert-message">{{Message}}</span>
            </div>
            {{/Alerts}}
            {{#Blocking}}
            {{#HasPhysicalVolumes}}
            <p translate>This device is currently used for volume groups.</p>
            <table class="table table-bordered">
              {{#PhysicalVolumes}}
              <tr><td><span class="pull-right">{{Name}}</span>{{VGroup}}</td></tr>
              {{/PhysicalVolumes}}
            </table>
            {{/HasPhysicalVolumes}}
            {{#HasMDRaidMembers}}
            <p translate>This device is currently used for RAID devices.</p>
            <table class="table table-bordered">
              {{#MDRaidMembers}}
              <tr><td><span class="pull-right">{{Name}}</span>{{MDRaid}}</td></tr>
              {{/MDRaidMembers}}
            </table>
            {{/HasMDRaidMembers}}
            {{/Blocking}}
            {{{Body}}}
            <table class="form-table-ct">
              {{#Fields}}
              <tr>
                {{#TextInput}}
                <td class="top">{{Title}}</td>
                <td>
                  <input class="form-control" {{#disabled}}disabled{{/disabled}} type="text" {{#Value}}value="{{.}}"{{/Value}} data-field="{{.}}">
                </td>
                {{/TextInput}}
                {{#PassInput}}
                <td class="top">{{Title}}</td>
                <td>
                  <input class="form-control" type="password" {{#Value}}value="{{.}}"{{/Value}} data-field="{{.}}">
                </td>
                {{/PassInput}}
                {{#SizeInput}}
                <td class="top">{{Title}} (MiB)</td>
                <td>
                  <input class="form-control" type="text" {{#ValueMB}}value="{{.}}"{{/ValueMB}} data-field="{{.}}">
                </td>
                {{/SizeInput}}
                {{#SizeSlider}}
                <td class="top">{{Title}}</td>
                <td>
                  <div class="dialog-wrapper">
                    <div class="size-slider" data-field="{{.}}">
                      <table>
                        <tr>
                          <td>
                            <div class="slider"></div>
                          </td>
                          <td>
                            <input class="form-control size-text">
                          </td>
                          <td>
                            <div class="btn-group bootstrap-select dropdown form-control size-unit">
                              <button class="btn btn-default dropdown-toggle" type="button"
                                      data-toggle="dropdown">
                                <span class="pull-left"></span>
                                <span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu">
                                {{#Units}}
                                <li value="{{factor}}" {{#selected}}selected{{/selected}}><a>{{name}}</a></li>
                                {{/Units}}
                              </ul>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </td>
                {{/SizeSlider}}
                {{#CheckBox}}
                <td class="top">{{RowTitle}}</td>
                <td>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" data-field="{{.}}" {{#Value}}checked{{/Value}}>{{Title}}
                    </label>
                  </div>
                </td>
                {{/CheckBox}}
                {{#CheckBoxText}}
                <td class="top">{{RowTitle}}</td>
                <td>
                  <div class="dialog-checkbox-text" data-field="{{.}}">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" {{#Checked}}checked{{/Checked}}>
                        {{Title}}
                      </label>
                    </div>
                    <input class="form-control" type="text" {{^Checked}}hidden{{/Checked}}
                           {{#Value}}value="{{.}}"{{/Value}}>
                  </div>
                </td>
                {{/CheckBoxText}}
                {{#SelectOne}}
                <td class="top">{{Title}}</td>
                <td>
                  <div class="btn-group bootstrap-select dropdown form-control" data-field="{{.}}">
                    <button class="btn btn-default dropdown-toggle" type="button"
                            data-toggle="dropdown">
                      <span class="pull-left"></span>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      {{#Options}}
                      <li value="{{value}}"
                          {{#selected}}selected{{/selected}}
                          {{#disabled}}class="disabled"{{/disabled}}><a>{{Title}}</a></li>
                      {{/Options}}
                    </ul>
                  </div>
                </td>
                {{/SelectOne}}
                {{#SelectMany}}
                <td class="top">{{Title}}</td>
                <td>
                  {{#HasOptions}}
                  <ul class="list-group available-disks-group dialog-list-ct" data-field="{{.}}">
                    {{#Options}}
                    <li class="list-group-item">
                      <div class="checkbox">
                        <label><input type="checkbox">
                          {{#Label}}
                          <span class="pull-right">{{.}}</span>
                          {{/Label}}
                          <span>{{Title}}</span>
                        </label>
                      </div>
                    </li>
                    {{/Options}}
                  </ul>
                  {{/HasOptions}}
                  {{^HasOptions}}
                  <span class="text-danger">{{EmptyWarning}}</span>
                  {{/HasOptions}}
                </td>
                {{/SelectMany}}
                {{#SelectRow}}
                <td colspan="2">
                  <table data-field="{{.}}" class="dialog-select-row-table">
                    <thead>
                      <tr>
                        {{#Headers}}<th>{{.}}</th>{{/Headers}}
                      </tr>
                    </thead>
                    <tbody>
                      {{#Rows}}
                      <tr>
                        {{#Columns}}<td>{{.}}</td>{{/Columns}}
                      </tr>
                      {{/Rows}}
                    </tbody>
                  </table>
                </td>
                {{/SelectRow}}
                {{#ComboBox}}
                <td class="top">{{Title}}</td>
                <td>
                  <div data-field="{{.}}" class="combobox-container">
                    <div class="input-group">
                      <input autocomplete="false" class="combobox form-control" type="text" {{#disabled}}disabled{{/disabled}} value="{{Value}}" />
                      <span class="form-control-feedback caret"></span>
                      <ul class="typeahead typeahead-long dropdown-menu">
                      </ul>
                    </div>
                  </div>
                </td>
                {{/ComboBox}}
                {{#Arrow}}
                <td colspan="2">
                  <div data-field="{{.}}" class="dialog-arrow {{^Value}}collapsed{{/Value}}">
                    <span class="fa {{^Value}}fa-angle-right{{/Value}}{{#Value}}fa-angle-down{{/Value}}"></span>
                    <span>{{Title}}</span>
                  </div>
                </td>
                {{/Arrow}}
              </tr>
              {{/Fields}}
            </table>
          </div>
          {{/HasBody}}
          <div class="modal-footer">
            {{#Teardown}}
            <div class="modal-footer-teardown">
              {{#HasMounts}}
              <p translate>This device has filesystems that are currently in use.<br>
                Proceeding will unmount all filesystems on it.</p>
              <table class="table table-bordered">
                {{#Mounts}}
                <tr><td><span class="pull-right">{{Name}}</span>{{MountPoint}}</td></tr>
                {{/Mounts}}
              </table>
              {{/HasMounts}}
              {{#HasPhysicalVolumes}}
              <p translate>This device is currently used for volume groups.<br>
                Proceeding will remove it from its volume groups.</p>
              <table class="table table-bordered">
                {{#PhysicalVolumes}}
                <tr><td><span class="pull-right">{{Name}}</span>{{VGroup}}</td></tr>
                {{/PhysicalVolumes}}
              </table>
              {{/HasPhysicalVolumes}}
              {{#HasMDRaidMembers}}
              <p translate>This device is currently used for RAID devices.<br>
                Proceeding will remove it from its RAID devices.</p>
              <table class="table table-bordered">
                {{#MDRaidMembers}}
                <tr><td><span class="pull-right">{{Name}}</span>{{MDRaid}}</td></tr>
                {{/MDRaidMembers}}
              </table>
              {{/HasMDRaidMembers}}
              {{#HasUnits}}
              <p translate>The filesystem is in use by system services or login sessions.<br>
                Proceeding will stop these services and sessions.</p>
              <table class="table table-bordered">
                {{#Units}}
                <tr><td><span class="pull-right">{{Name}}</span>{{Unit}}</td></tr>
                {{/Units}}
              </table>
              {{/HasUnits}}
            </div>
            {{/Teardown}}
            {{#Action}}
            {{#Danger}}<div class="modal-footer-danger">{{.}}</div>{{/Danger}}
            <div class="spinner spinner-sm pull-left" hidden></div>
            <button class="btn btn-default" translatable="yes" data-action="cancel">Cancel</button>
            <button class="btn {{#DangerButton}}btn-danger{{/DangerButton}}{{^DangerButton}}btn-primary{{/DangerButton}}"
                    data-action="apply">{{Title}}</button>
            {{/Action}}
            {{^Action}}
            <button class="btn btn-default" translatable="yes" data-action="cancel">Close</button>
            {{/Action}}
          </div>
        </div>
      </div>
    </div>
  </script>

</body>
</html>
