{% extends "base.jinja2" %}

{% block title %}UGC Server - DarkflameServer{% endblock %}

{% block content %}
<div id="ugcPage">
	<div class="mb-3">
		<h2 class="mb-1">UGC Server</h2>
		<p class="text-body-secondary mb-0">The UGC server makes a mesh and an icon for every model players build, and icons for their cars and rockets,
			and serves them to the game client. New and changed models are picked up by themselves; a model that fails is tried a few times, then left
			as failed until it's made again from here. See <code>docs/UgcServer.md</code>.</p>
	</div>

	<div class="row g-2 mb-3" id="counts"></div>

	<div class="card mb-3">
		<div class="card-body py-2 small" id="serverStatus">Asking the UGC server…</div>
	</div>

	<details class="card mb-3 d-none" id="cacheCard">
		<summary class="card-header py-2 small fw-semibold">Stored files: delete and purge</summary>
		<div class="card-body py-2 small">
			<p class="text-body-secondary mb-2">Deletes files the UGC server made, of the kind picked below. Afterwards they are made again when a game client
				asks for them, queued to be made now, or left deleted. A car or rocket's icon is shared by every build of the same modules.</p>
			<div class="d-flex flex-wrap gap-2 align-items-end">
				<label>State<select class="form-select form-select-sm" id="purgeState"><option value="">Any</option><option value="done">Made</option><option value="failed">Failed</option><option value="pending">Waiting</option></select></label>
				<label>Owner<input class="form-control form-control-sm" id="purgeOwner" placeholder="Name (part of it)"></label>
				<label>Made more than<div class="input-group input-group-sm"><input type="number" min="0" class="form-control" id="purgeOlder" value="0" style="width:5rem"><span class="input-group-text">days ago</span></div></label>
				<label>Not asked for in<div class="input-group input-group-sm"><input type="number" min="0" class="form-control" id="purgeUnused" value="0" style="width:5rem"><span class="input-group-text">days</span></div></label>
				<label>Then<select class="form-select form-select-sm" id="purgeAfter"><option value="on_demand">Make again when asked for</option><option value="now">Make again now</option><option value="gone">Leave deleted</option></select></label>
				<button type="button" class="btn btn-sm btn-outline-warning" id="purgeButton">Purge matching</button>
				<button type="button" class="btn btn-sm btn-outline-danger" id="purgeAllButton">Purge all…</button>
			</div>
			<div class="mt-2" id="purgeResult"></div>
		</div>
	</details>

	<div class="d-flex flex-wrap gap-2 align-items-center mb-2">
		<div class="btn-group btn-group-sm" role="group" id="kindButtons">
			<button type="button" class="btn btn-outline-primary active" data-kind="model">Models</button>
			<button type="button" class="btn btn-outline-primary" data-kind="modular">Cars and rockets</button>
		</div>
		<select class="form-select form-select-sm w-auto" id="stateFilter" aria-label="State">
			<option value="">Every state</option><option value="pending">Waiting</option><option value="done">Made</option><option value="failed">Failed</option><option value="empty">Empty (no bricks)</option>
		</select>
		<input type="search" class="form-control form-control-sm w-auto" id="search" placeholder="ID or owner" aria-label="Search by ID or owner">
		<div class="btn-group btn-group-sm" role="group" id="viewButtons">
			<button type="button" class="btn btn-outline-secondary active" data-view="gallery">Icons</button>
			<button type="button" class="btn btn-outline-secondary" data-view="list">List</button>
		</div>
		<div class="ms-auto d-none" id="manageButtons">
			<button type="button" class="btn btn-sm btn-outline-warning" id="retryFailed">Try the failed ones again</button>
			<button type="button" class="btn btn-sm btn-outline-danger" id="remakeAll">Make everything again</button>
		</div>
	</div>

	<div id="gallery" class="ugc-gallery mb-2"></div>
	<div class="card d-none" id="listCard">
		<table class="table table-sm align-middle mb-0 table-stack">
			<thead><tr><th>Icon</th><th>ID</th><th>Owner</th><th>State</th><th>Last attempt</th><th>Details</th><th></th></tr></thead>
			<tbody id="rows"></tbody>
		</table>
	</div>
	<div class="d-flex gap-2 mt-2">
		<button type="button" class="btn btn-sm btn-outline-secondary" id="prevPage">Newer</button>
		<button type="button" class="btn btn-sm btn-outline-secondary" id="nextPage">Older</button>
	</div>

	<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-fullscreen-lg-down"><div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="previewTitle">Model</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="d-flex flex-wrap gap-2 align-items-center mb-2 small" id="meshControls">
					<label class="d-flex align-items-center gap-1">Detail
						<select class="form-select form-select-sm w-auto" id="lodSelect"></select></label>
					<label class="d-flex align-items-center gap-1">Version
						<select class="form-select form-select-sm w-auto" id="versionSelect">
							<option value="current">Now</option><option value="previous">Before it was made again</option>
						</select></label>
					<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="wireframeSwitch"><label class="form-check-label" for="wireframeSwitch">Wireframe</label></div>
					<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="colorsSwitch" checked><label class="form-check-label" for="colorsSwitch">Vertex colors</label></div>
					<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="aoSwitch" checked><label class="form-check-label" for="aoSwitch">Baked lighting</label></div>
					<button type="button" class="btn btn-sm btn-outline-secondary" id="reframeButton">Reset view</button>
				</div>
				<div class="row g-3">
					<div class="col-lg-5" id="nifColumn">
						<div class="small fw-semibold mb-1">Generated mesh (.nif)</div>
						<div id="nifViewer" class="rounded border" style="height: 420px"></div>
						<div class="small text-body-secondary mt-1" id="nifStats"></div>
					</div>
					<div class="col-lg-4" id="lxfmlColumn">
						<div class="small fw-semibold mb-1">As built (LXFML)</div>
						<div id="lxfmlViewer" class="rounded border" style="height: 420px"></div>
						<div class="small text-body-secondary mt-1">Every brick, before hidden faces are removed.</div>
					</div>
					<div class="col-lg-3">
						<div class="small fw-semibold mb-1">Icon</div>
						<div class="d-flex gap-2 flex-wrap">
							<figure class="text-center mb-0"><img id="previewIcon" alt="Icon" class="border rounded bg-body-tertiary ugc-checker" width="128" height="128">
								<figcaption class="small text-body-secondary">Now</figcaption></figure>
							<figure class="text-center mb-0 d-none" id="previousIconBox"><img id="previousIcon" alt="Icon before" class="border rounded bg-body-tertiary ugc-checker" width="128" height="128">
								<figcaption class="small text-body-secondary">Before</figcaption></figure>
						</div>
						<div class="small mt-2" id="previewLinks"></div>
					</div>
				</div>
				<div class="mt-3" id="statsBox"></div>
				<div class="card mt-3 d-none" id="framingCard">
					<div class="card-header py-2 small fw-semibold d-flex align-items-center gap-2">Icon framing and light
						<span class="ms-auto text-body-secondary fw-normal" id="framingKind"></span></div>
					<div class="card-body py-2 small">
						<div class="row g-3">
							<div class="col-md-8"><div class="row g-2" id="framingControls"></div></div>
							<div class="col-md-4 text-center"><img id="framingPreview" alt="Preview" class="border rounded ugc-checker" width="128" height="128">
								<div class="text-body-secondary" id="framingState">Preview drawn by the UGC server, not stored.</div></div>
						</div>
						<div class="d-flex flex-wrap gap-2 mt-2">
							<button type="button" class="btn btn-sm btn-outline-secondary" id="framingPreviewButton">Preview</button>
							<button type="button" class="btn btn-sm btn-outline-primary" id="framingSaveType">Save as the preset for this kind</button>
							<button type="button" class="btn btn-sm btn-outline-primary" id="framingSaveCombo">Save for this item</button>
							<button type="button" class="btn btn-sm btn-outline-secondary" id="framingReset">Reset</button>
							<button type="button" class="btn btn-sm btn-outline-warning ms-auto" id="framingRegenerate">Draw all icons of this kind again</button>
						</div>
					</div>
				</div>
			</div>
		</div></div>
	</div>
</div>
<style>
	.ugc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
	.ugc-tile { cursor: pointer; text-align: center; }
	.ugc-tile:hover, .ugc-tile:focus-visible { border-color: var(--bs-primary); }
	.ugc-tile img, .ugc-tile .ugc-noicon { width: 128px; height: 128px; }
	.ugc-noicon { display: inline-flex; align-items: center; justify-content: center; }
	.ugc-checker { background-image: linear-gradient(45deg, rgba(128,128,128,.15) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.15) 75%),
		linear-gradient(45deg, rgba(128,128,128,.15) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.15) 75%);
		background-size: 16px 16px; background-position: 0 0, 8px 8px; }
	.ugc-meter { height: .4rem; }
</style>
{% endblock %}

{% block scripts %}
<script type="importmap">
{
	"imports": {
		"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js",
		"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
	},
	"integrity": {
		"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js": "sha384-IDC7sAMAIMB/TZ6dgKKPPAKZ2bXXXP8+FBMBC8cU319eBhKITx+PaalhfDkDNH28",
		"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/controls/OrbitControls.js": "sha384-aJoe4qqS/DgF2jh9njAuvA6QIveJYoCuYOfYjdFY8P3eawzmc9bEQ40jq2TvOyuP",
		"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/environments/RoomEnvironment.js": "sha384-9ItPPH2vgKbkvgrqTKq7ptGYe+WuAnqlZtlqleJW4/CJjnM5R7C+efD6iS7ADPJ9"
	}
}
</script>
<script src="/js/ldd-materials.js"></script>
<script src="/js/ugc.js"></script>
{% endblock %}