@Layout = "backend-basic.php"
@Head{
<title>Senzu Importer</title>
<script type="module" src="/uplift-assets/js/senzu-importer/SenzuImporter.js"></script>
<script defer src="/uplift-assets/js/_external/popper.min.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="mb-0">
								Senzu Content Importer
							</h2>
						</div>
					</div>
					<div class="card-body">
						<form id="senzu-content-fetch-form">
							<p>
								First, enter the numerical ID of the Senzu site to fetch the written content for that site. Then, you'll be able to customize the data or add extra pages as necessary.
							</p>
							<div class="mb-3">
								<div class="input-group">
									<label for="site-id-input" class="input-group-text">
										<i class="me-2 bi bi-cloud-download-fill"></i>
										<span>Site ID</span>
									</label>
									<input id="site-id-input" placeholder="E.g. 301" type="number" class="form-control" name="site-id">
									<button id="site-fetch-button" type="submit" class="btn btn-success">
										<i id="site-fetch-button-icons" class="bi bi-cloud-download-fill"></i>
										<span id="site-fetch-button-spinner" style="display:none;width:1rem;height:1rem;" class="spinner-border text-white"></span>
										<span>Fetch Content</span>
									</button>
								</div>
							</div>
						</form>
						<form id="content-build-form" style="display:none;">

							<section class="page-type-section">
								<div class="d-flex align-items-center my-3">
									<hr style="width:50px;">
									<h2 class="text-nowrap mx-3">General Pages</h2>
									<hr class="w-100">
									<button style="display:none;" type="button" id="new-general-page-button" class="ms-3 btn btn-sm btn-primary text-nowrap">
										<i class="bi bi-file-plus-fill"></i>
										<span>New Page</span>
									</button>
								</div>
								<div id="no-general-pages-message" class="no-pages-message" style="display:none;">
									<em>No pages in this category.</em>
								</div>
								<div id="general-pages-container" class="page-type-container"></div>
							</section>

							<section class="page-type-section">
								<div class="d-flex align-items-center my-3">
									<hr style="width:50px;">
									<h2 class="text-nowrap mx-3">Service Pages</h2>
									<hr class="w-100">
									<button style="display:none;" type="button" id="new-service-page-button" class="ms-3 btn btn-sm btn-primary text-nowrap">
										<i class="bi bi-file-plus-fill"></i>
										<span>New Page</span>
									</button>
								</div>
								<div id="no-service-pages-message" class="no-pages-message" style="display:none;">
									<em>No pages in this category.</em>
								</div>
								<div id="service-pages-container" class="page-type-container"></div>
							</section>

							<section class="page-type-section">
								<div class="d-flex align-items-center my-3">
									<hr style="width:50px;">
									<h2 class="text-nowrap mx-3">City Pages</h2>
									<hr class="w-100">
									<button style="display:none;" type="button" id="new-city-page-button" class="ms-3 btn btn-sm btn-primary text-nowrap">
										<i class="bi bi-file-plus-fill"></i>
										<span>New Page</span>
									</button>
								</div>
								<div id="no-city-pages-message" class="no-pages-message" style="display:none;">
									<em>No pages in this category.</em>
								</div>
								<div id="city-pages-container" class="page-type-container"></div>
							</section>

							<section class="page-type-section">
								<div class="d-flex align-items-center my-3">
									<hr style="width:50px;">
									<h2 class="text-nowrap mx-3">Blog Pages</h2>
									<hr class="w-100">
									<button style="display:none;" type="button" id="new-blog-page-button" class="ms-3 btn btn-sm btn-primary text-nowrap">
										<i class="bi bi-file-plus-fill"></i>
										<span>New Page</span>
									</button>
								</div>
								<div id="no-blog-pages-message" class="no-pages-message" style="display:none;">
									<em>No pages in this category.</em>
								</div>
								<div id="blog-pages-container" class="page-type-container"></div>
							</section>

							<section class="page-type-section">
								<div class="d-flex align-items-center my-3">
									<hr style="width:50px;">
									<h2 class="text-nowrap mx-3">Project Pages</h2>
									<hr class="w-100">
									<button style="display:none;" type="button" id="new-project-page-button" class="ms-3 btn btn-sm btn-primary text-nowrap">
										<i class="bi bi-file-plus-fill"></i>
										<span>New Page</span>
									</button>
								</div>
								<div id="no-project-pages-message" class="no-pages-message" style="display:none;">
									<em>No pages in this category.</em>
								</div>
								<div id="project-pages-container" class="page-type-container"></div>
							</section>

							<div class="fixed-footer-button d-flex flex-column">
								<button type="submit" class="btn btn-success mb-3">
									<i class="bi bi-file-earmark-arrow-down-fill"></i>
									<span>Build Pages from Content</span>
								</button>
								<button data-bs-toggle="modal" data-bs-target="#manage-parents-modal" type="button" class="btn btn-info">
									<i class="bi bi-file-earmark-arrow-down-fill"></i>
									<span>Define Virtual Parents</span>
								</button>
							</div>

						</form>
						<div id="content-build-loader" class="text-center" style="display:none;">
							<div class="spinner-border text-primary" style="width:8rem; height:8rem;"></div>
						</div>
						<div id="content-build-success" class="text-center" style="display:none;">
							<div class="alert alert-success">
								<h4>Import Successful</h4>
								<p>
									The pages have been imported and constructed. Any pages with the same name have been overwritten.
								</p>
								<a href="/uplift/page-editor" class="btn btn-success">
									<i class="bi bi-pen-fill"></i>
									<span>Go to Page Editor</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</backend-service-container>

<div id="manage-parents-modal" class="modal" tabindex="-1">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Manage Virtual Page Parents</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p>
					This modal is for defining virtual page parents. Each virtual parent can have another virtual parent as its parent page. You can then set a virtual parent on the pages outside this modal. This allows for proper breadcrumbs to be generated and URIs to have multiple components other than the page slug.
				</p>

				<div>
					<form id="manage-parents-add-virtual-parent-form">
						<div class="input-group">
							<label for="new-virtual-parent-name-input" class="input-group-text">New Parent Name</label>
							<input id="new-virtual-parent-name-input" type="text" class="form-control" name="virtual-parent-name">
							<label for="new-virtual-parent-parent" class="input-group-text">Parent's Parent</label>
							<select id="new-virtual-parent-parent" class="form-control" name="virtual-parent-parent">
								<option value="-1">- None -</option>
							</select>
							<button type="submit" class="btn btn-sm btn-primary">
								<i class="bi bi-node-plus-fill"></i>
								<span>New Virtual Parent</span>
							</button>
						</div>
					</form>
					<div>
						<div class="virtual-parent-column-headers virtual-parent-column-widths">
							<div class="id-column">
								<strong>ID</strong>
							</div>
							<div class="name-column">
								<strong>Name</strong>
							</div>
							<div class="uri-column">
								<strong>URI Stub</strong>
							</div>
							<div class="parent-name-column">
								<strong>Parent</strong>
							</div>
							<div class="delete-button-column"></div>
						</div>
					</div>
					<div id="virtual-parents-container"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<i class="bi bi-x-square-fill"></i>
					<span>Close</span>
				</button>
			</div>
		</div>
	</div>
</div><div id="manage-page-data-modal" class="modal" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Manage Page Data</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="new-page-data-form">
					<div class="input-group">
						<label for="page-data-type-input" class="input-group-text">Data Type</label>
						<select name="page-data-type" id="page-data-type-input" class="form-control">
							<option value="-1">- Select Data Type</option>
							<br />
<b>Fatal error</b>:  Uncaught Error: Class &quot;Page\PageDatas&quot; not found in /home/mountain/public_html/uplift-core/resources/views/senzu-importer/modals/manage-page-data.php:18
Stack trace:
#0 /home/mountain/public_html/uplift-core/resources/views/senzu-importer/main.php(157): include()
#1 {main}
  thrown in <b>/home/mountain/public_html/uplift-core/resources/views/senzu-importer/modals/manage-page-data.php</b> on line <b>18</b><br />