<form action="/bd-admin/create-file" method="post" id="file-form-create">
	<div class="form-group">
		<label for="file-title">Title</label>
		<input type="text" name="file[title]" id="file-title" placeholder="Type title here" required />
	</div>

	<div class="form-group">
		<label for="file-description">Description</label>
		<input type="text" name="file[description]" id="file-description" placeholder="Describe content here" />
	</div>

	{{include("themes/admin/hook/modals/images-modal.html")}}
	<button type="button" class="bd-button-light" id="file-image">Add an Image</button>
	<input type="hidden" name="file[image]" id="file-image-hidden-input" />

	<input type="hidden" name="file[image]" id="file-image-hidden-input" />

	<!-- Dynamic markup separator-->
	{{#if href == "/bd-admin/add/new-post"}}
	<div class="form-group">
		<label for="file-publish-date">Date</label>
		<input type="date" name="file[publish_date]" id="file-publish-date" required />
	</div>

	<div class="form-group">
		<label for="file-tags">Tags</label>
		<input type="text" name="file[tags]" id="file-tags" placeholder="Tag1, Tag2, Tag3..." />
	</div>

	<input type="hidden" name="file[type]" value="posts" />
	{{#else}}
	<input type="hidden" name="file[type]" value="pages" />
	{{/if}}

	<fieldset>
		<legend>Publish or save as draft?</legend>
		<div>
			<input type="radio" name="file[published]" id="file-published-true" value="true" required />
			<label for="file-published-true">Publish</label>

			<input type="radio" name="file[published]" id="file-published-false" value="false" />
			<label for="file-published-false">Save as draft</label>
		</div>
	</fieldset>

	{{include("themes/admin/hook/sme.html")}}

	<!-- Dynamic markup separator -->
	{{#if href == "/bd-admin/add/new-page"}}
	<input class="bd-button-grey" type="submit" value="Create new page" />
	{{#else}}
	<input class="bd-button-grey" type="submit" value="Create new post" />
	{{/if}}
</form>

{{include("themes/admin/hook/modals/validation-error-modal.html")}}

<script type="module">
	import { openModal } from "../../../../static/admin/scripts/openModal.js"

	document.getElementById("file-form-create").addEventListener("submit", async function (event) {
		event.preventDefault() // Prevent the default form submission

		const form = event.target
		const formData = new FormData(form)

		// Convert FormData to a JSON object
		const data = Array.from(formData.entries()).reduce((acc, [key, value]) => {
			const keys = key.match(/[^[\]]+/g)
			keys.reduce((a, b, i) => {
				return a[b] || (a[b] = isNaN(Number(keys[i + 1])) ? (keys.length - 1 == i ? value : {}) : [])
			}, acc)
			return acc
		}, {})

		try {
			const response = await fetch(form.action, {
				method: form.method,
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify(data),
			})

			if (response.ok) {
				window.location.href = response.url // Redirect on successful submission
			} else {
				const result = await response.json()
				if (result.error) {
					//alert(result.error) // Display the error alert
					openModal("validation-error-modal") // Open the validation error modal
					return // Prevent creation operation if the file already exists.
				}
			}
		} catch (error) {
			console.error("Error submitting form:", error)
			alert("An error occurred while creating the file.")
		}
	})
</script>
