<!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 translate="yes">Networking</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="network.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="network.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>

  <div id="testing-connection-curtain" class="curtains-ct blank-slate-pf" hidden>
    <h1><div class="spinner spinner-lg"></div></h1>
    <h1 id="testing-connection-curtain-testing" translate="yes">Testing connection</h1>
    <h1 id="testing-connection-curtain-restoring" translate="yes">Restoring connection</h1>
  </div>

  <div id="networking" class="pf-c-page" hidden>
    <main  class="pf-c-page__main" tabIndex="-1">
      <div id="networking-nm-crashed" class="pf-c-alert pf-m-danger pf-m-inline" aria-label="inline danger alert" hidden>
        <div class="pf-c-alert__icon">
          <span class="pficon pficon-error-circle-o"></span>
        </div>
        <h4 class="pf-c-alert__title"> <span translate="yes" >NetworkManager is not running.</span> <a href="#" class="alert-link">Troubleshoot…</a> <h4>
        <button class="pf-c-button pf-m-secondary pull-right" type="submit" translate="yes">Start service</button>
      </div>

      <div id="networking-nm-disabled" class="pf-c-alert pf-m-info pf-m-inline" aria-label="inline danger alert" hidden>
        <button class="pf-c-button pf-m-secondary pull-right" type="submit" translate="yes">Enable service</button>
        <div class="pf-c-alert__icon">
          <span class="pficon pficon-info"></span>
        </div>
        <h4 class="pf-c-alert__title" translate="yes">Network devices and graphs require NetworkManager.</h4>
      </div>

      <section id="networking-graphs" class="pf-c-page__main-section pf-m-light">
        <div id="networking-graph-toolbar" class="zoom-controls standard-zoom-controls">
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span></span>
              <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now" translate="yes">Go to now</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="300" translate="yes">5 minutes</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="3600" translate="yes">1 hour</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="21600" translate="yes">6 hours</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="86400" translate="yes">1 day</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="604800" translate="yes">1 week</a></li>
            </ul>
          </div>
          <button class="pf-c-button pf-m-secondary" data-action="zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
          <div class="btn-group">
            <button class="pf-c-button pf-m-secondary" data-action="scroll-left">
                <span class="fa fa-angle-left" />
            </button>
            <button class="pf-c-button pf-m-secondary" data-action="scroll-right">
                <span class="fa fa-angle-right" />
            </button>
          </div>
        </div>
        <div class="col-sm-6">
          <div>
            <span class="plot-unit" id="networking-tx-unit"></span><span class="plot-title" translate="yes">Sending</span>
          </div>
          <div id="networking-tx-graph"></div>
        </div>
        <div class="col-sm-6">
          <div>
            <span class="plot-unit" id="networking-rx-unit"></span><span class="plot-title" translate="yes">Receiving</span>
          </div>
          <div id="networking-rx-graph"></div>
        </div>
      </section>

      <section class="networking-page pf-c-page__main-section">
        <div class="pf-l-gallery pf-m-gutter">
          <article class="pf-c-card" id="networking-firewall" hidden>
            <div class="pf-c-card__header">
              <div class="pf-c-card__title" translate="yes">Firewall</div>
              <div class="firewall-switch">
              </div>
              <div class="pf-c-card__actions">
                <button class="pf-c-button pf-m-secondary" id="networking-firewall-link" translate="yes">Edit rules and zones</button>
              </div>
            </div>
            <div id="networking-firewall-summary" class="pf-c-card__body">
            </div>
          </article>
          <article class="pf-c-card" id="networking-interfaces">
            <div class="pf-c-card__header">
              <div class="pf-c-card__title" translate="yes">Interfaces</div>
              <div class="pf-c-card__actions">
                <button translate="yes" id="networking-add-bond" class="pf-c-button pf-m-secondary network-privileged">Add bond</button>
                <button translate="yes" id="networking-add-team" class="pf-c-button pf-m-secondary network-privileged">Add team</button>
                <button translate="yes" id="networking-add-bridge" class="pf-c-button pf-m-secondary network-privileged">Add bridge</button>
                <button translate="yes" id="networking-add-vlan" class="pf-c-button pf-m-secondary network-privileged">Add VLAN</button>
              </div>
            </div>
            <table class="pf-c-table pf-m-grid-md pf-m-compact table-hover" role="grid">
              <thead>
                <tr role="row">
                  <th role="columnheader" scope="col" translate="yes">Name</th>
                  <th role="columnheader" scope="col" translate="yes">IP address</th>
                  <th role="columnheader" scope="col" translate="yes" class="networking-speed">Sending</th>
                  <th role="columnheader" scope="col" translate="yes" class="networking-speed">Receiving</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
              </tbody>
            </table>
          </article>
          <article class="pf-c-card" id="networking-unmanaged-interfaces">
            <div class="pf-c-card__header">
              <div class="pf-c-card__title" translate="yes">Unmanaged interfaces</div>
            </div>
            <table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
              <thead>
                <tr role="row">
                  <th role="columnheader" scope="col" translate="yes">Name</th>
                  <th role="columnheader" scope="col" translate="yes">IP address</th>
                  <th role="columnheader" scope="col" translate="yes" class="networking-speed">Sending</th>
                  <th role="columnheader" scope="col" translate="yes" class="networking-speed">Receiving</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
              </tbody>
            </table>
          </article>
          <article class="pf-c-card cockpit-log-panel" aria-labelledby="networking-log-header">
            <div class="pf-c-card__header">
                <div class="pf-c-card__title" id="networking-log-header" translate>Networking logs</div>
                <div class="pf-c-card__actions">
                  <button class="link-button" role="link" id="goto-networking-logs" translate>All logs</button>
                </div>
            </div>
            <div class="pf-c-card__body" id="networking-log" role="rowgroup"></div>
          </div>
        </article>
      </section>
    </main>
  </div>

  <script id="network-vlan-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-vlan-settings-parent-select" translate="yes">Parent</label>
      <div id="network-vlan-settings-parent-select">
        {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-vlan-settings-vlan-id-input" translate="yes">VLAN ID</label>
      <input id="network-vlan-settings-vlan-id-input" class="form-control" type="text"
             value="{{vlan_id}}"/>

      <label class="control-label" for="network-vlan-settings-interface-name-input" translate="yes">Name</label>
      <input id="network-vlan-settings-interface-name-input" class="form-control" type="text"
             value="{{interface_name}}"/>
    </form>
  </script>

  <script id="network-mtu-settings-template" type="x-template/mustache">
    <div>
      <label>
        <input id="network-mtu-settings-auto" {{^mtu}}checked="checked"{{/mtu}}
               type="radio" name="mtu-mode"/>
        <span translate="yes">Automatic</span>
      </label>
    </div>
    <div>
      <label>
        <input id="network-mtu-settings-custom"  {{#mtu}}checked="checked"{{/mtu}}
               type="radio" name="mtu-mode"/>
        <span translate="yes">Set to</span>
        <input id="network-mtu-settings-input"
               class="form-control" type="text" value="{{mtu}}"/>
      </label>
    </div>
  </script>

  <script id="network-mac-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-mac-settings-input" translate="yes">MAC</label>
      <div class="input-group">
        <input id="network-mac-settings-input" class="form-control" type="text"
               value="{{assigned_mac_address}}"/>
        <div class="input-group-btn dropdown">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="fa fa-caret-down"></span>
          </button>
          <ul id="network-mac-settings-menu" class="dropdown-menu add-button" role="menu">
          </ul>
        </div>
      </div>
    </form>
  </script>

  <script id="network-bridge-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-bridge-settings-name-input" translate="yes">Name</label>
      <input id="network-bridge-settings-name-input" class="form-control" type="text"
             value="{{bridge_name}}"/>

      <label class="control-label" translate="yes">Ports</label>
      <div id="network-bridge-settings-member-interfaces">
        {{! member interfaces will be rendered into here as a list of checkboxes }}
      </div>

      <label class="control-label" for="network-bridge-settings-stp-enabled-input" translate="yes">Spanning tree protocol (STP)</label>
      <label class="checkbox-inline">
        <input id="network-bridge-settings-stp-enabled-input" type="checkbox"
          {{#stp_checked}}checked{{/stp_checked}}/>
      </label>

      <label class="control-label" for="network-bridge-settings-stp-priority-input" translate="yes">STP priority</label>
      <input id="network-bridge-settings-stp-priority-input" class="form-control" type="text"
             value="{{stp_priority}}"/>

      <label class="control-label" for="network-bridge-settings-stp-forward-delay-input" translate="yes">STP forward delay</label>
      <input id="network-bridge-settings-stp-forward-delay-input" class="form-control" type="text"
             value="{{stp_forward_delay}}"/>

      <label class="control-label" for="network-bridge-settings-stp-hello-time-input" translate="yes">STP hello time</label>
      <input id="network-bridge-settings-stp-hello-time-input" class="form-control" type="text"
             value="{{stp_hello_time}}"/>

      <label class="control-label" for="network-bridge-settings-stp-max-age-input" translate="yes">STP maximum message age</label>
      <input id="network-bridge-settings-stp-max-age-input" class="form-control" type="text"
             value="{{stp_max_age}}"/>
    </form>
  </script>

  <script id="network-bridge-port-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-bridge-port-settings-priority-input" translate="yes">Priority</label>
      <input id="network-bridge-port-settings-priority-input" class="form-control network-number-field ct-form-relax"
             type="text" value="{{priority}}"/>

      <label class="control-label" for="network-bridge-port-settings-path-cost-input" translate="yes">Path cost</label>
      <input id="network-bridge-port-settings-path-cost-input" class="form-control network-number-field ct-form-relax"
             type="text" value="{{path_cost}}"/>

      <label class="control-label" for="network-bridge-settings-hairpin-mode-input" translate="yes">Hair pin mode</label>
      <label class="checkbox-inline">
        <input id="network-bridge-settings-hairpin-mode-input" type="checkbox"
               {{#hairpin_mode_checked}}checked{{/hairpin_mode_checked}}/>
      </label>
    </form>
  </script>

  <script id="network-bond-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-bond-settings-interface-name-input" translate="yes">Name</label>
      <input id="network-bond-settings-interface-name-input" class="form-control"
             value="{{interface_name}}"/>

      <label class="control-label" translate="yes">Interfaces</label>
      <div id="network-bond-settings-members">
      {{! member interfaces will be rendered into here as a list of checkboxes }}
      </div>

      <label class="control-label" for="network-bond-settings-mac-input" translate="yes">MAC</label>
      <div class="input-group">
        <input id="network-bond-settings-mac-input" class="form-control" type="text"
               value="{{assigned_mac_address}}"/>
        <div class="input-group-btn dropdown">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="fa fa-caret-down"></span>
          </button>
          <ul id="network-bond-settings-mac-menu" class="dropdown-menu add-button" role="menu">
          </ul>
        </div>
      </div>

      <label class="control-label" for="network-bond-settings-mode-select" translate="yes">Mode</label>
      <div id="network-bond-settings-mode-select">
        {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-bond-settings-primary-select" translate="yes">Primary</label>
      <div id="network-bond-settings-primary-select">
        {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-bond-settings-link-monitoring-select" translate="yes">Link monitoring</label>
      <div id="network-bond-settings-link-monitoring-select">
        {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-bond-settings-monitoring-interval-input" translate="yes">Monitoring interval</label>
      <input id="network-bond-settings-monitoring-interval-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{monitoring_interval}}"/>

      <label class="control-label" for="network-bond-settings-monitoring-targets-input" translate="yes">Monitoring targets</label>
      <input id="network-bond-settings-monitoring-targets-input" class="form-control"
             type="text" value="{{monitoring_target}}"/>

      <label class="control-label" for="network-bond-settings-link-up-delay-input" translate="yes">Link up delay</label>
      <input id="network-bond-settings-link-up-delay-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{link_up_delay}}"/>

      <label class="control-label" for="network-bond-settings-link-down-delay-input" translate="yes">Link down delay</label>
      <input id="network-bond-settings-link-down-delay-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{link_down_delay}}"/>
    </form>
  </script>

  <script id="network-team-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-team-settings-interface-name-input" translate="yes">Name</label>
      <input id="network-team-settings-interface-name-input" class="form-control"
             value="{{interface_name}}"/>

      <label class="control-label" translate="yes">Ports</label>
      <div id="network-team-settings-members">
          {{! ports will be rendered into here as a list of checkboxes }}
      </div>

      <label class="control-label" for="network-team-settings-runner-select" translate="yes">Runner</label>
      <div id="network-team-settings-runner-select">
          {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-team-settings-balancer-select" translate="yes">Balancer</label>
      <div id="network-team-settings-balancer-select">
          {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-team-settings-link-watch-select" translate="yes">Link watch</label>
      <div id="network-team-settings-link-watch-select">
          {{! the rather complex dropdown-select will be created dynamically via jquery }}
      </div>

      <label class="control-label" for="network-team-settings-ping-interval-input" translate="yes">Ping interval</label>
      <input id="network-team-settings-ping-interval-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{config.link_watch.interval}}"/>

      <label class="control-label" for="network-team-settings-ping-target-input" translate="yes">Ping target</label>
      <input id="network-team-settings-ping-target-input" class="form-control"
             type="text" value="{{config.link_watch.target_host}}"/>

      <label class="control-label" for="network-team-settings-link-up-delay-input" translate="yes">Link up delay</label>
      <input id="network-team-settings-link-up-delay-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{config.link_watch.delay_up}}"/>

      <label class="control-label" for="network-team-settings-link-down-delay-input" translate="yes">Link down delay</label>
      <input id="network-team-settings-link-down-delay-input" class="form-control network-number-field ct-form-relax"
             type="text" maxlength="4" value="{{config.link_watch.delay_down}}"/>
    </form>
  </script>

  <script id="network-team-port-settings-template" type="x-template/mustache">
    <form class="ct-form">
      <label class="control-label" for="network-team-port-settings-ab-prio-input" translate="yes">Priority</label>
      <input id="network-team-port-settings-ab-prio-input" class="form-control network-number-field ct-form-relax"
             type="text" value="{{prio}}"/>

      <label class="control-label" for="network-team-port-settings-ab-sticky-input" translate="yes">Sticky</label>
      <label class="checkbox-inline">
        <input id="network-team-port-settings-ab-sticky-input" type="checkbox"
               {{#sticky}}checked{{/sticky}}/>
      </label>

      <label class="control-label" for="network-team-port-settings-lacp-prio-input" translate="yes">Priority</label>
      <input id="network-team-port-settings-lacp-prio-input" class="form-control network-number-field ct-form-relax"
             type="text" value="{{lacp_prio}}"/>

      <label class="control-label" for="network-team-port-settings-lacp-key-input" translate="yes">LACP key</label>
      <input id="network-team-port-settings-lacp-key-input" class="form-control network-number-field ct-form-relax"
             type="text" value="{{lacp_key}}"/>
    </form>
  </script>

  <div id="network-interface" class="pf-c-page" hidden>
    <main  class="pf-c-page__main" tabIndex="-1">
      <section class="pf-c-page__main-breadcrumb pf-m-light">
          <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
              <ol class="pf-c-breadcrumb__list">
                <li class="pf-c-breadcrumb__item"><a class="pf-c-breadcrumb__link" role="link" tabindex="0" translate="yes">Networking</a></li>
                <li class="pf-c-breadcrumb__item">
                    <span class="pf-c-breadcrumb__item-divider">
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </span>
                    <a class="pf-c-breadcrumb__link pf-m-current"></a>
                </li>
              </ol>
          </nav>
      </section>
      <section class="pf-c-page__main-section pf-m-light">
        <div id="network-interface-graph-toolbar" class="zoom-controls standard-zoom-controls">
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span></span>
              <div class="caret"></div>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now" translate="yes">Go to now</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="300" translate="yes">5 minutes</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="3600" translate="yes">1 hour</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="21600" translate="yes">6 hours</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="86400" translate="yes">1 day</a></li>
              <li role="presentation"><a tabindex="0" role="menuitem" data-range="604800" translate="yes">1 week</a></li>
            </ul>
          </div>
          <button class="pf-c-button pf-m-secondary" data-action="zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
          <div class="btn-group">
            <button class="pf-c-button pf-m-secondary" data-action="scroll-left">
                <span class="fa fa-angle-left" />
            </button>
            <button class="pf-c-button pf-m-secondary" data-action="scroll-right">
                <span class="fa fa-angle-right" />
            </button>
          </div>
        </div>
        <div class="col-sm-6">
          <div>
            <span class="plot-unit" id="network-interface-tx-unit"></span><span class="plot-title" translate="yes">Sending</span>
          </div>
          <div id="network-interface-tx-graph"></div>
        </div>
        <div class="col-sm-6">
          <div>
            <span class="plot-unit" id="network-interface-rx-unit"></span><span class="plot-title" translate="yes">Receiving</span>
          </div>
          <div id="network-interface-rx-graph"></div>
        </div>
      </section>
      <section class="pf-c-page__main-section">
        <div class="pf-l-gallery pf-m-gutter">
            <div class="pf-c-card">
              <div class="pf-c-card__header">
                <div class="pf-c-card__title">
                  <span id="network-interface-name"></span>
                  <span id="network-interface-hw"></span>
                  <span id="network-interface-mac"></span>
                </div>
                <div class="pf-c-card__actions">
                  <button class="pf-c-button pf-m-danger network-privileged" id="network-interface-delete" translate="yes">Delete</button>
                  <span id="network-interface-delete-switch" class="network-privileged">
                  </span>
                </div>
              </div>
              <div class="pf-c-card__body">
                <table class="form-table-ct" id="network-interface-settings">
                </table>
              </div>
            </div>
            <div class="pf-c-card" id="network-interface-members">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th></th>
                    <th translate="yes" class="networking-speed">Sending</th>
                    <th translate="yes" class="networking-speed">Receiving</th>
                    <th class="networking-spacer"></th>
                    <th class="networking-action"></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
      </section>
    </main>
  </div>

  <div hidden aria-hidden="true" id="network-ip-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-ip-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">IP settings</h4>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-ip-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-ip-settings-error">
              <div class="pf-c-alert__icon">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
              </div>
              <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-ip-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-ip-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-bond-settings-dialog">
   <div class="pf-c-backdrop">
     <div class="pf-l-bullseye">
       <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
         <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-bond-settings-close-button" translate="aria-label">
           <i class="fa fa-times" aria-hidden="true"></i>
         </button>
         <header class="pf-c-modal-box__header pf-m-help">
           <div class="pf-c-modal-box__header-main">
             <h1 class="pf-c-modal-box__title" translate="yes">Bond settings</h4>
           </div>
           <div class="pf-c-modal-box__header-help">
             <button id="bond-help-popup-button" class="pf-c-button pf-m-plain" type="button" aria-label="Help" tranlate="aria-label">
               <i class="pficon pficon-help" aria-hidden="true" data-toggle="popover"></i>
             </button>
           </div>
         </header>
         <div class="pf-c-modal-box__body">
           <div id="network-bond-settings-body">
           </div>
         </div>
         <footer class="pf-c-modal-box__footer">
           <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-bond-settings-error">
             <div class="pf-c-alert__icon">
                 <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
             </div>
             <h4 class="pf-c-alert__title"></h4>
           </div>
           <button class="pf-c-button pf-m-primary" translate="yes" id="network-bond-settings-apply">Apply</button>
           <button class="pf-c-button pf-m-link" translate="yes" id="network-bond-settings-cancel">Cancel</button>
         </footer>
       </div>
     </div>
   </div>
  </div>

  <div hidden aria-hidden="true" id="network-team-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-team-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Team settings</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-team-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-team-settings-error">
              <div class="pf-c-alert__icon">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
              </div>
              <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-team-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-team-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-teamport-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-teamport-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Team port settings</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-teamport-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-teamport-settings-error">
              <div class="pf-c-alert__icon">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
              </div>
              <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-teamport-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-teamport-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-bridge-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-bridge-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Bridge settings</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-bridge-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-bridge-settings-error">
                <div class="pf-c-alert__icon">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                </div>
                <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-bridge-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-bridge-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-bridgeport-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-bridgeport-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Bridge port settings</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-bridgeport-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-bridgeport-settings-error">
                <div class="pf-c-alert__icon">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                </div>
                <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-bridgeport-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-bridgeport-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-vlan-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-vlan-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">VLAN settings</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-vlan-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-vlan-settings-error">
                <div class="pf-c-alert__icon">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                </div>
                <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-vlan-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-vlan-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-mtu-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-mtu-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Ethernet MTU</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-mtu-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-mtu-settings-error">
              <div class="pf-c-alert__icon">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
              </div>
              <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-mtu-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-mtu-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="network-mac-settings-dialog">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Close" id="network-mac-settings-close-button" translate="aria-label">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Ethernet MAC</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div id="network-mac-settings-body">
            </div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert" id="network-mac-settings-error">
              <div class="pf-c-alert__icon">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
              </div>
              <h4 class="pf-c-alert__title"></h4>
            </div>
            <button class="pf-c-button pf-m-primary" translate="yes" id="network-mac-settings-apply">Apply</button>
            <button class="pf-c-button pf-m-link" translate="yes" id="network-mac-settings-cancel">Cancel</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="error-popup">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Unexpected error</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <p id="error-popup-message"></p>
          </div>
          <footer class="pf-c-modal-box__footer">
            <button class="pf-c-button pf-m-primary" id="error-popup-cancel" translate>Close</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

  <div hidden aria-hidden="true" id="confirm-breaking-change-popup">
    <div class="pf-c-backdrop">
      <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
          <header class="pf-c-modal-box__header">
            <h1 class="pf-c-modal-box__title" translate="yes">Connection will be lost</h1>
          </header>
          <div class="pf-c-modal-box__body">
            <div class="pficon pficon-warning-triangle-o"></div>
            <div id="confirm-breaking-change-text"></div>
          </div>
          <footer class="pf-c-modal-box__footer">
            <button class="pf-c-button pf-m-danger"></button>
            <button class="pf-c-button pf-m-primary" data-dismiss="modal" translate>Keep connection</button>
          </footer>
        </div>
      </div>
    </div>
  </div>

</body>
