@Layout = "backend-basic.php"
@Head{
	<title>Sitemap Manager</title>
	<script defer src="/uplift-assets/js/_external/ace-editor/src-min-noconflict/ace.js"></script>
	<script type="module" src="/uplift-assets/js/manage-sitemaps/SitemapManager.js"></script>
}
@Body{
	<backend-service-container>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="card rounded shadow mb-4">
						<div class="card-header">
							<div class="d-flex justify-content-between align-items-center">
								<h2 class="h6 mb-0">
									Sitemap Manager
								</h2>
								<button class="btn btn-success" id="new-sitemap-modal-trigger-button">
									<i class="bi bi-plus-circle-fill"></i>
									<span>Add New Sitemap</span>
								</button>
							</div>
						</div>
						<div class="card-body">
							<div class="mb-3">
								<p>
									By default, Uplift will have an automatically generate sitemap living on the /sitemap.xml URI route. You can override it by adding a sitemap at that URI route below.
								</p>
								<p>
									You can also add additional sitemaps to submit to Google below.
								</p>
							</div>
							<div id="sitemaps-rows-headers" class="sitemaps-columns">
								<div class="name">
									<strong>Name</strong>
								</div>
								<div class="route">
									<strong>Route</strong>
								</div>
								<div class="content-type">
									<strong>Content Type</strong>
								</div>
								<div class="management-buttons"></div>
							</div>
							<div id="sitemaps-loader" class="text-center">
								<div style="width:5rem; height:5rem;" class="spinner-border" role="status">
									<span class="visually-hidden">Loading...</span>
								</div>
							</div>
							<div id="sitemaps-rows-container"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</backend-service-container>

	<div id="new-sitemap-modal" class="modal" role="dialog">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Add a New Sitemap</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="new-sitemap-form">
					<div>
						<div class="container-fluid">
							<div class="row mb-3">
								<div class="col-xl-4">
									<label for="new-sitemap-name">Name</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-tag-fill"></i></span>
										<input type="text" class="form-control" name="sitemap-name" id="new-sitemap-name">
									</div>
									<small>The name isn't shown to the user or crawlers. It is for organization purposes on the backend only.</small>
								</div>
								<div class="col-xl-4">
									<label for="new-sitemap-route">Sitemap Route</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-signpost-fill"></i></span>
										<input type="text" class="form-control" name="sitemap-route" id="new-sitemap-route">
									</div>
								</div>
								<div class="col-xl-4">
									<label for="new-sitemap-content-type">Content Type</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-menu-app-fill"></i></span>
										<select class="form-select" name="sitemap-content-type" id="new-sitemap-content-type">
											<option value="0">XML</option>
											<option value="1">RSS</option>
											<option value="2">Text</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col">
									<label for="new-sitemap-content-editor">Sitemap Content</label>
									<div id="new-sitemap-content-editor" class="sitemap-ace-editor-container"></div>
<!--									<textarea class="sitemap-content-input form-control" id="new-sitemap-content" name="content"></textarea>-->
								</div>
							</div>
							<div id="new-sitemap-modal-error" class="row" style="display:none;">
								<div class="col">
									<div class="bg-danger text-white p-2"></div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button form="new-sitemap-form" type="submit" class="btn btn-primary">
					<i class="bi bi-plus-circle-fill"></i>
					<span>Add Sitemap</span>
				</button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<span>Cancel</span>
				</button>
			</div>
		</div>
	</div>
</div>	<div id="edit-sitemap-modal" class="modal" role="dialog">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Editing a review</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="edit-sitemap-form">
					<div>
						<div class="container-fluid">
							<div class="row mb-3">
								<div class="col-xl-4">
									<label for="edit-sitemap-name">Name</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-tag-fill"></i></span>
										<input type="text" class="form-control" name="sitemap-name" id="edit-sitemap-name">
									</div>
									<small>The name isn't shown to the user or crawlers. It is for organization purposes on the backend only.</small>
								</div>
								<div class="col-xl-4">
									<label for="edit-sitemap-route">Route (Make sure routes begin with a backslash)</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-signpost-fill"></i></span>
										<input type="text" class="form-control" name="sitemap-route" id="edit-sitemap-route">
									</div>
								</div>
								<div class="col-xl-4">
									<label for="new-sitemap-content-type">Content Type</label>
									<div class="input-group">
										<span class="input-group-text"><i class="bi bi-menu-app-fill"></i></span>
										<select class="form-select" name="sitemap-content-type" id="new-sitemap-content-type">
											<option value="0">XML</option>
											<option value="1">RSS</option>
											<option value="2">Text</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col">
									<label for="edit-sitemap-content-editor">Sitemap Content</label>
									<div id="edit-sitemap-content-editor" class="sitemap-ace-editor-container"></div>
<!--									<textarea class="sitemap-content-input form-control" id="edit-sitemap-content" name="content"></textarea>-->
								</div>
							</div>
							<div id="edit-sitemap-modal-error" class="row" style="display:none;">
								<div class="col">
									<div class="bg-danger text-white p-2"></div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button form="edit-sitemap-form" type="submit" class="btn btn-primary">
					<span>Edit Sitemap</span>
				</button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<span>Cancel</span>
				</button>
			</div>
		</div>
	</div>
</div>}