<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
		/>
		<title>OpenFusion: Server Selector</title>
		<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
		<link rel="stylesheet" href="assets/css/openfusion.css" />
		<link rel="stylesheet" href="assets/css/styles.css" />
	</head>

	<body
		style="
			background: rgb(0, 0, 0);
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			clear: both;
		"
		onresize="onResize()"
	>
		<section id="of-serverselector">
			<div class="container" id="serverselector-container">
				<div class="row text-center mt-3" id="of-logoheader">
					<div class="col">
						<img
							class="img-fluid"
							id="of-logo"
							src="assets/img/of-3.png"
							width="256"
						/>
						<p id="of-intro-text">
							Welcome to OpenFusion.<br />Select a server from the list below to
							get started.
						</p>
					</div>
				</div>
				<div
					class="row d-sm-flex d-xl-flex justify-content-center justify-content-sm-center justify-content-xl-center"
					id="of-serverlist"
				>
					<div class="col-8 mb-2">
						<div
							class="table-responsive text-center border rounded border-primary"
							id="server-table"
						>
							<table class="table table-striped table-hover mb-0">
								<thead>
									<tr>
										<th>Description</th>
										<th>Game Version</th>
									</tr>
								</thead>
								<tbody id="server-tablebody">
									<tr id="server-listing-placeholder">
										<td colspan="2">
											No servers added yet... perhaps you should find one?
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div
					class="row row-cols-2 d-xl-flex justify-content-center justify-content-xl-center"
					id="of-serverbuttons"
					style="padding-bottom: 16px"
				>
					<div class="col-4 text-left d-inline-flex justify-content-xl-start">
						<button
							class="btn btn-success mr-1"
							data-toggle="modal"
							data-bs-tooltip=""
							data-placement="bottom"
							id="of-addserver-button"
							type="button"
							title="Add Server"
							data-target="#of-addservermodal"
							onclick="deselectServer()"
						>
							<i class="fas fa-plus"></i>
						</button>
						<button
							class="btn btn-primary mr-1 disabled"
							data-toggle="modal"
							data-bs-tooltip=""
							data-placement="bottom"
							id="of-editserver-button"
							type="button"
							title="Edit Server"
							data-target="#of-editservermodal"
							disabled=""
						>
							<i class="fas fa-edit"></i>
						</button>
						<button
							class="btn btn-danger mr-1 disabled"
							data-toggle="modal"
							data-bs-tooltip=""
							data-placement="bottom"
							id="of-deleteserver-button"
							type="button"
							title="Delete Server"
							data-target="#of-deleteservermodal"
							disabled=""
						>
							<i class="fas fa-trash-alt"></i>
						</button>
					</div>
					<div class="col-4 d-inline-flex justify-content-end">
						<button
							class="btn btn-primary disabled"
							id="of-connect-button"
							type="button"
							onclick="connectToServer()"
							disabled=""
						>
							Connect&nbsp;<i class="fas fa-angle-double-right"></i>
						</button>
					</div>
				</div>
			</div>
			<div class="modal fade" role="dialog" tabindex="-1" id="of-aboutmodal">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">About OpenFusionClient</h4>
							<button
								type="button"
								class="close"
								data-dismiss="modal"
								aria-label="Close"
							>
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							<p class="text-monospace">Version 1.4</p>
							<p>
								©2020-2022 OpenFusion Contributors<br />OpenFusion is licensed
								under MIT.<br />
							</p>
							<a
								href="#of-restoreserversmodal"
								onclick="$('#of-aboutmodal').modal('toggle')"
								data-toggle="modal"
								data-target="#of-restoreserversmodal"
								>Reset to Default Servers</a
							>
						</div>
						<div class="modal-footer">
							<div class="row flex-fill">
								<div class="col">
									<button
										class="btn btn-primary border rounded border-primary pb-1 pt-1 mr-2 pl-2 pr-2"
										data-toggle="tooltip"
										data-bs-tooltip=""
										type="button"
										title="Github Page"
										onclick="window.open(&#39;https://github.com/OpenFusionProject/OpenFusion&#39;,&#39;_blank&#39;);"
									>
										<i
											class="fab fa-github"
											style="font-size: 24px"
										></i></button
									><button
										class="btn btn-primary border rounded border-primary pb-1 pt-1 pl-2 pr-2"
										data-toggle="tooltip"
										data-bs-tooltip=""
										type="button"
										title="Discord Chat"
										onclick="window.open(&#39;https://discord.gg/DYavckB&#39;,&#39;_blank&#39;);"
									>
										<i
											class="fab fa-discord"
											style="font-size: 24px; position: relative; top: 1px"
										></i>
									</button>
								</div>
								<div class="col text-right">
									<button
										class="btn btn-primary border rounded border-primary"
										type="button"
										data-dismiss="modal"
									>
										Close
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div
				class="modal fade"
				role="dialog"
				tabindex="-1"
				id="of-addservermodal"
			>
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">Add Server</h4>
							<button
								type="button"
								class="close"
								data-dismiss="modal"
								aria-label="Close"
							>
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							<form id="addserver-form" class="needs-validation">
								<label for="addserver-descinput">Server Description</label
								><input
									class="form-control form-row w-75"
									type="text"
									id="addserver-descinput"
									placeholder="My OpenFusion Server"
									required=""
									minlength="1"
									maxlength="70"
								/><label for="addserver-ipinput">Server IP</label
								><input
									class="form-control form-row w-75"
									type="text"
									id="addserver-ipinput"
									placeholder="127.0.0.1:23000"
									required=""
									pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
								/><label for="addserver-versionselect"
									>Game Version:&nbsp;</label
								><select
									class="form-control w-50"
									id="addserver-versionselect"
									required=""
									style="margin-left: -5px"
								></select>
							</form>
						</div>
						<div class="modal-footer">
							<button
								class="btn btn-primary border rounded border-primary btn-danger border-danger"
								id="addserver-cancel"
								type="button"
								data-dismiss="modal"
							>
								Cancel</button
							><button
								class="btn btn-primary border rounded border-primary btn-success border-success"
								id="addserver-savebutton"
								type="submit"
								data-dismiss="modal"
								form="addserver-form"
								onclick="addServer();"
							>
								Save
							</button>
						</div>
					</div>
				</div>
			</div>
			<div
				class="modal fade"
				role="dialog"
				tabindex="-1"
				id="of-editservermodal"
			>
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">Edit Server</h4>
							<button
								type="button"
								class="close"
								data-dismiss="modal"
								aria-label="Close"
							>
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							<form id="editserver-form" class="needs-validation">
								<label for="editserver-descinput">Server Description</label
								><input
									class="form-control form-row w-75"
									type="text"
									id="editserver-descinput"
									placeholder="My OpenFusion Server"
									required=""
									minlength="1"
									maxlength="70"
								/><label for="addserver-ipinput">Server IP</label
								><input
									class="form-control form-row w-75"
									type="text"
									id="editserver-ipinput"
									placeholder="127.0.0.1:23000"
									required=""
									pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
								/><label for="editserver-versionselect"
									>Game Version:&nbsp;</label
								><select
									class="form-control w-50"
									id="editserver-versionselect"
									required=""
									style="margin-left: -5px"
								></select>
							</form>
						</div>
						<div class="modal-footer">
							<button
								class="btn btn-primary border rounded border-primary btn-danger border-danger"
								id="editserver-cancel"
								type="button"
								data-dismiss="modal"
							>
								Cancel</button
							><button
								class="btn btn-primary border rounded border-primary btn-success border-success"
								id="addserver-savebutton"
								type="submit"
								data-dismiss="modal"
								form="editserver-form"
								onclick="editServer();"
							>
								Save
							</button>
						</div>
					</div>
				</div>
			</div>
			<div
				class="modal fade"
				role="dialog"
				tabindex="-1"
				id="of-deleteservermodal"
			>
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">Are you sure?</h4>
							<button
								type="button"
								class="close"
								data-dismiss="modal"
								aria-label="Close"
							>
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							<p class="lead">
								Do you really want to delete<br />"<a
									id="deleteserver-servername"
									>SERVER_NAME</a
								>"?<br /><br />You could always re-add it later.
							</p>
						</div>
						<div class="modal-footer">
							<button
								class="btn btn-primary border rounded border-primary"
								type="button"
								data-dismiss="modal"
							>
								Cancel</button
							><button
								class="btn btn-primary border rounded border-primary btn-danger border-danger"
								id="deleteserver-button"
								type="button"
								data-dismiss="modal"
								onclick="deleteServer();"
							>
								Yes, Delete
							</button>
						</div>
					</div>
				</div>
			</div>
			<div
				class="modal fade"
				role="dialog"
				tabindex="-1"
				id="of-restoreserversmodal"
			>
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">Are you sure?</h4>
							<button
								type="button"
								class="close"
								data-dismiss="modal"
								aria-label="Close"
							>
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							<p class="lead">
								Do you really want to restore the default servers?
							</p>
						</div>
						<div class="modal-footer">
							<button
								class="btn btn-primary border rounded border-primary"
								type="button"
								data-dismiss="modal"
							>
								Cancel</button
							><button
								class="btn btn-primary border rounded border-primary btn-danger border-danger"
								id="deleteserver-button"
								type="button"
								data-dismiss="modal"
								onclick="restoreDefaultServers();"
							>
								Yes, Restore
							</button>
						</div>
					</div>
				</div>
			</div>
			<div id="of-versionnumber">
				<a
					class="text-monospace text-secondary"
					href="#of-aboutmodal"
					data-toggle="modal"
					data-target="#of-aboutmodal"
					>v1.4</a
				>
			</div>
		</section>
		<section>
			<div
				id="client"
				style="
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					background: #000;
					clear: both;
				"
			></div>
		</section>
		<script
			src="assets/js/jquery.min.js"
			onload="window.$ = window.jQuery = module.exports;"
		></script>
		<script src="assets/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/js/bs-init.js"></script>
		<script src="assets/js/uuidv4.min.js"></script>
		<script src="assets/js/serverselector.js"></script>
		<script src="assets/js/gameclient.js"></script>
		<script src="assets/js/snowflakes.min.js"></script>
		<script src="assets/js/eastereggs.js"></script>
	</body>
</html>