Synnefo

{{#details-content id="info" class="info-simple"}}

	<section class="info-block">

		<h2>info</h2>

		<dl>

			<dt><span class="snf-font snf-pc-full"></span>Name</dt>

			<dd>

				<div class="editable">

			        <span class="input-txt">My Opensuse Desktop Server 1</span>

			        <input type="text">

			        <span class="editbuttons">

						<a href="#" class="edit"><span class="snf-edit"></span></a>

						<a href="#" class="save"><span class="snf-ok-sign"></span></a>

						<a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>

					</span>

			    </div>

			</dd>

			<dt><span class="snf-font snf-dashboard-outline"></span>Assigned Project</dt>

			<dd>Basic Project</dd>

			<dt><span class="snf-chip-outline snf-font"></span>CPUs</dt>

			<dd>4</dd>

			<dt><span class="snf-ram-full snf-font"></span>RAM</dt>

			<dd>512 MB</dd>

			<dt><span class="snf-volume-full snf-font"></span>System Disk Size</dt>

			<dd>4GB</dd>

			<dt><span class="snf-volume-full snf-font"></span>Storage Type</dt>

			<dd>Archipelago</dd>

			<dt><span class="snf-image-full snf-font"></span>Image Name</dt>

			<dd>Fedora</dd>

			<dt><span class="snf-image-full snf-font"></span>Image Size</dt>

			<dd>3.68 GB</dd>

			<dt><span class="snf-nic-full snf-font"></span>IPv4</dt>

			<dd>83.212.96.152</dd>

			<dt><span class="snf-nic-full snf-font"></span>IPv4</dt>

			<dd>83.212.96.153</dd>

			<dt><span class="snf-nic-full snf-font"></span>IPv6</dt>

			<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>

		</dl>

	</section>

	<section class="info-block tags">

		<h2>tags</h2>

		{{view App.tagsListView}}

		<div class="buttons">

			<a href="" class="btn1 show-add-tag wrap-a" id="show-add-tag">add new tag</a>

		</div>

		<div class="snf-color-picker">

		<h3>Select color:</h3>

			<form action="#" method="post">

				<div id="picker-2">

					<div class="farbtastic">

						<div class="color" style="background-color: rgb(255, 0, 21);"></div>

						<div class="wheel"></div>

						<div class="overlay"></div>

						<div class="h-marker marker" style="left: 90px; top: 13px;"></div>

						<div class="sl-marker marker" style="left: 87px; top: 114px;"></div>

					</div>

				</div>

				<div class="form-item">

					<input type="text" id="color-2" class="color-preview "name="color" value="#16C1E9" disabled>

					<span class="input"><input class="tag_name" type="text" placeholder="My Tag"></span>

				</div>

			</form>

			<div class="btns">

				<a class="btn1 wrap-a" href="">OK</a>

				<a class="btn1 hide-add-tag wrap-a" href="">CANCEL</a>

			</div>

		</div>

	</section>

	<section class="info-block charts">

		<div>

			<h2>CPU utilization</h2>

			<div class="graph_container">

				<img src="images/cpu-ts.png" alt="CPU utilization graph">

			</div>

		</div>

		<div>

			<h2>Network utilization</h2>

			<div class="graph_container">

				<img src="images/net-ts.png" alt="network utilization graph">

			</div>

		</div>

	</section>

{{/details-content}}