<!DOCTYPE html>
<html>
<head>
<title>Embed Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="embed.js"></script>
<link rel="stylesheet" href="embed.css">
</head>
<body id="content" class="cards-pf">
<main class="pf-v6-c-page__main" tabindex="-1">
<section class="pf-v6-c-page__main-section pf-m-light container-cards-pf">
<div class="row row-cards-pf">
<div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
<div class="row row-cards-pf">
<input id="embed-address" class="form-control" value="http://127.0.0.1"/>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a id="embed-full" href="/cockpit/@localhost/system/index.html">
Full Server
</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification" />
</p>
</div>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
<h2 class="card-pf-title">
<a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
Server Terminal</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification">4</span>
<span class="card-pf-aggregate-status-notification">1</span>
</p>
</div>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a id="embed-network" href="/cockpit/@localhost/network/index.html">
Server Networking</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"></span>1</span>
</p>
</div>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
Server Storage</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"></span>1</span>
</p>
</div>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
Separate Auth
</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification">1</span>
</p>
</div>
</div>
</div>
<div class="col-xs-9 col-sm-9 col-md-10">
<div class="card-pf">
<div class="card-pf-heading">
<h2 id="embed-title" class="card-pf-title">
Embedded Cockpit Here
</h2>
</div>
<div id="embed-here" class="card-pf-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="embed-loaded">
</div>
</body>
</html>