<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Ringspace | {{ring.name}}</title>
		<link rel="stylesheet" type="text/css" href="/public/style.css">
	</head>
	<body>
		<header>
			<img src="/public/wordmark.png" alt="Ringspace Wordmark">
			<h1>{{ ring.name }}</h1>
			<p>{{ ring.description }}</p>
			<div class="keys">
				<p><b>Public Signing Key:</b>
				<code>{{ ring.public_signing_key }}</code></p>
				<p><b>Public Encryption Key:</b>
				<code>{{ ring.public_encryption_key }}</code></p>
				<p><a href="/api/manifest" target="_blank">View Full Manifest</a></p>
			</div>
		</header>
		<div class="members">
			<h2>Members</h2>
			{% for member in members %}
			<div class="member" id="{{ member.url }}">
				<h3 class="member-title"><a href="{{ member.url }}">{{ member.name }} ({{ member.url }})</a><span class="validation-result"></span></h3>
				<p>
					{{ member.description }}
				</p>
				<div class="keys">
					<p><b>Public Signing Key:</b>
					<code>{{ member.public_signing_key }}</code></p>
				</div>
				<div class="validation">
					<button class="btn-validate">Validate</button>
				</div>
				<dialog class="validation-modal">
					<h3>{{ member.url }}</h3>
					<p class="validation-text">Fetching site manifest...</p>
					<div class="validation-list">
						<ul>
							<li>
								<b>Manifest Public Key:</b>
								<code class="validate-manifest-pubkey"></code>
							</li>
							<li>
								<b>Member Public Key:</b>
								<code class="validate-member-pubkey">{{ member.public_signing_key }}</code>
							</li>
							<li>
								<b>Manifest Signature:</b>
								<code class="validate-manifest-signature"></code>
							</li>
							<li>
								<b>Signature Verification:</b>
								<span class="validate-signature-verification"></span>
							</li>
							<li>
								<b>Validation Result:</b>
								<span class="validate-result"></span>
							</li>
						</ul>
					</div>
					<div class="standing-details">
						<h4>Standing: <span></span></h4>
						<h5>Vote Split</h5>
						<ul class="vote-split">
							<li>Good: <code class="vote-split-good"></code></li>
							<li>Bad: <code class="vote-split-bad"></code></li>
							<li>Neutral: <code class="vote-split-neutral"></code></li>
						</ul>
						<h5>Vote Descriptions</h5>
						<ul class="vote-descriptions"></ul>
					</div>
					<button class="modal-close">Close</button>
				</dialog>
			</div>
			{% endfor %}
		</div>
		<script src="/public/index.js"></script>
	</body>
</html>
