"use strict";

const React = require("react");

const Layout = require("./layout");

module.exports = function AdminPanel({ queue }) {
	return (
		<Layout>
			<h2>Admin panel</h2>

			<h3>Add signatory manually</h3>

			<p>Note: no further verification takes place for this!</p>

			<form action="/add" method="post">
				<label htmlFor="address">Admin ID:</label>
				<input type="text" name="address" id="address" />
				<button type="submit">Add</button>
			</form>

			<h3>Verification queue</h3>

			<p>Note: approving an entry in this list causes the submitter ID to be shown as the admin, without further verification whether they actually are! Manually add them instead, if the actual admin account is a different one than the submitter.</p>

			<ul>
				{queue.map((item) => {
					return (
						<li key={item.submitter}>
							{item.submitter}
							<form style={{ display: "inline" }} action="/approve" method="post">
								<input type="hidden" name="submitter" value={item.submitter} />
								<button type="submit" name="decision" value="approve">Approve</button>
								<button type="submit" name="decision" value="reject">Reject</button>
							</form>
						</li>
					);
				})}
			</ul>
		</Layout>
	);
};