<script lang="ts">
	import { onMount } from 'svelte';

	import { api } from '$lib/api/api';
	import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import type { key_val } from '$lib/stores/ae_stores';

	export let expire_minutes: number = 10;
	export let mount_reload_sec: number = 0;

	export let ds_code: string;
	export let ds_name: null | string = null;
	export let ds_type: string = 'text';
	export let for_type: null | string = null;
	export let for_id: null | string = null;
	console.log(
		`ae_e_data_store ${ds_code} for_type=${for_type} for_id=${for_id} account_id=${$ae_loc.account_id}`
	);

	// export let store: string = 'local';
	export let display: string = 'block'; // Avoid; Use class list instead
	export let class_li: string = ''; // : string[] = [];
	export let try_cache: boolean = true;

	export let hide: boolean = false; // Hide the entire element
	export let show_edit: boolean = false;
	export let show_edit_btn: boolean = true;
	export let show_view: boolean = true;
	// export let show_delete_btn: boolean = false;

	export let ds_loaded: boolean = false;

	export let debug: boolean = false;

	let ae_promises: key_val = {}; // Promise<any>;
	let ds_get_results: Promise<any> | key_val;
	let ds_loading_status: string = 'starting...';
	let ds_submit_results: Promise<any> | key_val;

	let val_json: key_val;
	let val_html: key_val;
	let val_md: key_val;
	export let val_sql: null | key_val = null;
	let val_text: string;

	let ds_code_obj = {
		id: null,
		account_id: null,
		code: ds_code,
		name: ds_name,
		type: ds_type,
		for_type: null, // for_type
		for_id: null, // for_id
		access_read: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
		access_write: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
		access_delete: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
		html: null,
		json: null,
		md: null,
		text: null,
		updated_on: null,
		chk_account_id: null
	};

	let ae_ds_tmp: key_val;
	if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
		ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
	} else {
		ae_ds_tmp = ds_code_obj;
	}

	//  Writable<key_val> = persisted(`ae_ds__${ds_code}`, ds_code_obj);
	// console.log(`ae_e_data_store cached: ${ds_code} = `, ae_ds_tmp);
	console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`);

	if (!ae_ds_tmp || !ae_ds_tmp.id) {
		ds_loading_status = '-- loading --';
	} else {
		// ae_ds_loc.set(ae_ds_tmp);
	}

	$ae_sess.ds.submit_status = null;
	$ae_sess.ds.create_status = null;
	$ae_sess.ds.update_status = null;

	let trigger: null | string = null;

	// $: if (ae_ds_tmp) {
	//     console.log(`ae_e_data_store ae_ds_loc = `, ae_ds_tmp);
	// }

	import { browser } from '$app/environment';

	let ae_ds_loc_test: any;
	if (browser) {
		console.log('ae_e_data_store Browser detected.');
		ae_ds_loc_test = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
		console.log(`ae_e_data_store ae_ds_loc_test = `, ae_ds_loc_test);
		// ae_ds_tmp = {id: null};
		// ae_ds_tmp = ae_ds_loc_test;
	} else {
		console.log('ae_e_data_store Browser not detected.');
	}

	// This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
	if (
		browser &&
		ae_ds_tmp &&
		ae_ds_tmp.loaded_on &&
		ae_ds_tmp.chk_account_id == $ae_loc.account_id
	) {
		console.log(`ae_e_data_store ${ds_code} loaded_on: ${ae_ds_tmp.loaded_on}`);
		let loaded_on = new Date(ae_ds_tmp.loaded_on);
		let now = new Date();
		let diff = now.getTime() - loaded_on.getTime();
		let diff_minutes = diff / (1000 * 60);
		if (diff_minutes > expire_minutes) {
			console.log(
				`ae_e_data_store: Data Store ${ds_code} stale. Last loaded on: ${loaded_on.toISOString()}`
			);
			// Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
			let random_ms = Math.floor(Math.random() * 500);
			console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
			setTimeout(() => {
				trigger = 'load__ds__code';
			}, random_ms);
		}
	} else if (browser) {
		console.log(
			'ae_e_data_store: No loaded_on date found and or the account_id check failed. Need to trigger reload.'
		);
		trigger = 'load__ds__code';
	}

	// This is a secondary check... The account_id should either be null or match the current account_id.
	if (!ae_ds_tmp || !ae_ds_tmp.account_id === null || $ae_loc.account_id == $ae_loc.account_id) {
		trigger = 'load__ds__code';
	}

	onMount(() => {
		console.log('Element: Data Store element_data_store.svelte');
		// console.log('ae_ MOUNTED Browser detected.');

		if (mount_reload_sec) {
			// Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
			let random_ms = Math.floor(Math.random() * mount_reload_sec * 1000);
			console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
			setTimeout(() => {
				trigger = 'load__ds__code';
			}, random_ms);
		}
	});

	// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
	// console.log(`ae_ ds_code_li = `, ds_code_li);

	$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
		console.log(
			`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
		);

		trigger = null;

		load_data_store({
			code: ds_code,
			type: ds_type,
			for_type: for_type,
			for_id: for_id,
			try_cache: try_cache
		});
	}

	async function load_data_store({
		code,
		type = 'text',
		for_type = null,
		for_id = null,
		try_cache = true
	}: {
		code: string;
		type: string;
		for_type: string | null;
		for_id: string | null;
		try_cache: boolean;
	}) {
		// let ds_code_val = await api.get_data_store_obj_w_code({
		ds_get_results = api
			.get_data_store_obj_w_code({
				api_cfg: $ae_api,
				data_store_code: code,
				data_type: type,
				log_lvl: 0
			})
			.then(function (ds_results) {
				// console.log(`ae_ Data Store ${code} = `, ds_results);
				if (ds_results) {
					console.log(`ae_e_data_store: Got a result for code ${code}`);
					if (!ds_results.data_store_id_random) {
						console.log('Something went wrong? No data store ID found.');
						return false;
					}

					ds_loaded = true;

					// Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale.
					ae_ds_tmp.loaded_on = new Date().toISOString();
					// Set the chk_account_id as a backup check to make sure the data store belongs to the account for the current site. This should not be needed, but here we are...
					ae_ds_tmp.chk_account_id = $ae_loc.account_id;

					ae_ds_tmp.id = ds_results.data_store_id_random;
					ae_ds_tmp.account_id = ds_results.account_id_random;
					ae_ds_tmp.code = ds_results.code; // This will overwrite whatever was passed in.
					ae_ds_tmp.name = ds_results.name;
					ae_ds_tmp.type = ds_results.type; // This will overwrite whatever was passed in.
					if (type == 'html') {
						ae_ds_tmp.html = ds_results.text;
						val_html = ds_results.text;
						return ds_results.html;
					} else if (type == 'json') {
						ae_ds_tmp.json = ds_results.json;
						val_json = ds_results.json;
						return ds_results.json;
					} else if (type == 'md') {
						ae_ds_tmp.text = ds_results.text;
						val_md = ds_results.text;
						return ds_results.text;
					} else if (type == 'sql') {
						ae_ds_tmp.text = ds_results.text;
						val_sql = ds_results.text;
						return ds_results.text;
					} else {
						ae_ds_tmp.text = ds_results.text;
						val_text = ds_results.text;
						return ds_results.text;
					}
				} else {
					ds_loaded = false;
					ds_loading_status = '-- not found --';
				}
			})
			.catch(function (error: any) {
				console.log(`Something went wrong. for code ${code}`);
				console.log(error);
				ds_loading_status = '-- error --';
				return false;
			});
		// .finally(function (ds_val_result) {
		//     // console.log(`ae_ ds_code_val = `, ds_val_result);

		//     // ae_ds_loc.set(ds_val_result);
		//     // localStorage.setItem(ds_code, ds_val_result);
		//     // sessionStorage.setItem(ds_code, ds_val_result);

		//     // return ds_val_result;
		// });
		// console.log(`ae_ ds_code_val = `, ds_code_val);
	}

	async function handle_submit_form(event: any) {
		// console.log('*** handle_submit_form() ***');

		$ae_sess.ds.submit_status = 'processing';

		// Data in
		let form_data = new FormData(event.target);
		// console.log(form_data);

		let data_store_di: key_val = ae_util.extract_prefixed_form_data({
			prefix: null,
			form_data: form_data,
			trim_values: true,
			bool_tf_str: true,
			log_lvl: 0
		});
		// console.log(data_store_di);

		// Data out
		let data_store_do: key_val = {};

		if (typeof data_store_di.ds_id_random !== 'undefined') {
			data_store_do['data_store_id_random'] = data_store_di.ds_id_random;
		}

		// if (!$slct.data_store_id) {
		if (!ae_ds_tmp.id) {
			data_store_do['account_id_random'] = $ae_loc.account_id;
		}

		if (
			typeof data_store_di.ds_account_id !== 'undefined' &&
			data_store_di.ds_account_id &&
			data_store_di.ds_use_account_id
		) {
			data_store_do['account_id_random'] = data_store_di.ds_account_id;
		} else if (data_store_di.ds_use_account_id && $ae_loc.account_id) {
			data_store_do['account_id_random'] = $ae_loc.account_id;
		} else {
			data_store_do['account_id_random'] = null;
		}

		if (typeof data_store_di.ds_code !== 'undefined') {
			data_store_do['code'] = data_store_di.ds_code;
		} else {
			data_store_do['code'] = ds_code;
		}

		if (typeof data_store_di.ds_name !== 'undefined') {
			data_store_do['name'] = data_store_di.ds_name;
		} else {
			data_store_do['name'] = ds_name;
		}

		if (typeof data_store_di.ds_type !== 'undefined') {
			data_store_do['type'] = data_store_di.ds_type;
		} else {
			data_store_do['type'] = ds_type;
		}

		if (typeof data_store_di.ds_for_type !== 'undefined' && data_store_di.ds_for_type) {
			data_store_do['for_type'] = data_store_di.ds_for_type;
		} else {
			data_store_do['for_type'] = null;
		}

		if (typeof data_store_di.ds_for_id !== 'undefined' && data_store_di.ds_for_id) {
			data_store_do['for_id_random'] = data_store_di.ds_for_id;
		} else {
			data_store_do['for_id_random'] = null;
		}

		if (typeof data_store_di.ds_access_read !== 'undefined') {
			data_store_do['access_read'] = data_store_di.ds_access_read;
		}

		if (typeof data_store_di.ds_access_write !== 'undefined') {
			data_store_do['access_write'] = data_store_di.ds_access_write;
		}

		if (typeof data_store_di.ds_access_delete !== 'undefined') {
			data_store_do['access_delete'] = data_store_di.ds_access_delete;
		}

		if (typeof data_store_di.ds_value !== 'undefined') {
			if (data_store_di.ds_type == 'html') {
				data_store_do['text'] = data_store_di.ds_value;
			} else if (data_store_di.ds_type == 'json') {
				data_store_do['json'] = data_store_di.ds_value;
			} else if (data_store_di.ds_type == 'md') {
				data_store_do['text'] = data_store_di.ds_value;
			} else if (data_store_di.ds_type == 'sql') {
				data_store_do['text'] = data_store_di.ds_value;
			} else {
				data_store_do['text'] = data_store_di.ds_value;
			}
		}

		if (typeof data_store_di.ds_enable !== 'undefined') {
			data_store_do['enable'] = data_store_di.ds_enable;
		} else {
			data_store_do['enable'] = true;
		}

		console.log(data_store_do);

		if (!ae_ds_tmp.id) {
			// Create
			console.log(`ae_ Data Store Create:`, data_store_do);
			ds_submit_results = handle_create__data_store({
				obj_type: 'data_store',
				data: data_store_do
			})
				.then(function (ds_results) {
					console.log(`ae_ Data Store Create Results:`, ds_results);
					if (ds_results) {
						ae_ds_tmp.id = ds_results.data_store_id_random;
						ae_ds_tmp.updated_on = ds_results.updated_on;
					}
					return ds_results;
				})
				.finally(function (ds_val_result) {
					console.log(`ae_ ds_val_result = `, ds_val_result);
					trigger = 'load__ds__code';
					$ae_sess.ds.submit_status = 'created';
				});
		} else {
			// Update
			console.log(`ae_ Data Store Update:`, data_store_do);
			ds_submit_results = handle_update__data_store({
				obj_type: 'data_store',
				obj_id: ae_ds_tmp.id,
				data: data_store_do
			})
				.then(function (ds_results) {
					console.log(`ae_ Data Store Update Results:`, ds_results);
					if (ds_results) {
						ae_ds_tmp.updated_on = ds_results.updated_on;
					}
					return ds_results;
					// })
					// .finally(function (ds_val_result) {
					//     // console.log(`ae_ ds_code_val = `, ds_val_result);
				})
				.finally(function () {
					// console.log(`ae_ ds_val_result = `, ds_val_result);
					console.log(
						`ae_ load__ds__code: ${ds_code} ${ds_type} ${for_type} ${for_id} ${try_cache}`
					);
					trigger = 'load__ds__code';
					$ae_sess.ds.submit_status = 'updated';
				});
		}
	}

	async function handle_create__data_store({ obj_type, data }) {
		console.log('*** handle_create__data_store() ***');

		$ae_sess.ds.create_status = 'starting';
		ae_promises.api_create__data_store_obj = api
			.create_ae_obj_crud({
				api_cfg: $ae_api,
				obj_type: obj_type,
				fields: data,
				key: $ae_api.api_crud_super_key,
				log_lvl: 1
			})
			.then(async function (create__obj_result) {
				if (!create__obj_result) {
					console.log('The result was null or false.');
					return false;
				}
				return create__obj_result;
			})
			.catch(function (error: any) {
				console.log('Something went wrong.');
				console.log(error);
				return false;
			})
			.finally(function (create__obj_result) {
				$ae_sess.ds.create_status = 'finished';
				return create__obj_result;
			});

		return ae_promises.api_create__data_store_obj;
	}

	async function handle_update__data_store({ obj_type, obj_id, data }) {
		console.log('*** handle_update__data_store() ***');

		$ae_sess.ds.update_status = 'starting';
		ae_promises.update__data_store_obj = api
			.update_ae_obj_id_crud({
				api_cfg: $ae_api,
				obj_type: obj_type,
				obj_id: obj_id,
				fields: data,
				key: $ae_api.api_crud_super_key,
				log_lvl: 1
			})
			.then(async function (update__obj_result) {
				if (!update__obj_result) {
					console.log('The result was null or false.');
					return false;
				}
				return update__obj_result;
			})
			.catch(function (error: any) {
				console.log('Something went wrong.');
				console.log(error);
				return false;
			})
			.finally(function (update__obj_result) {
				$ae_sess.ds.update_status = 'finished';
				return update__obj_result;
			});

		return ae_promises.update__data_store_obj;
	}
</script>

<div class="ae__elem__data_store relative {class_li}" class:hide>
	{#if ae_ds_tmp}
		{#if debug || $ae_loc.debug == 'debug'}
			<pre>
    id: {ae_ds_tmp.id},
    code: {ae_ds_tmp.code},
    type: {ae_ds_tmp.type},
    for_type: {ae_ds_tmp.for_type},
    for_id: {ae_ds_tmp.for_id},
    access_read: {ae_ds_tmp.access_read},
    access_write: {ae_ds_tmp.access_write},
    access_delete: {ae_ds_tmp.access_delete},
    name: {ae_ds_tmp.name},
    html: {ae_ds_tmp.html},
    json: {ae_ds_tmp.json},
    md: {ae_ds_tmp.md},
    text: {ae_ds_tmp.text},
    updated_on: {ae_ds_tmp.updated_on},
    </pre>
		{/if}

		{#if show_edit}
			<section class="edit z-50">
				<form class="ae__elem__data_store__form" on:submit|preventDefault={handle_submit_form}>
					<input type="hidden" name="ds_id_random" value={ae_ds_tmp.id} />

					{#if $ae_loc.trusted_access}
						<label for="ds_use_account_id" class="label text-xs inline"
							>Use Account ID
							<input
								type="checkbox"
								name="ds_use_account_id"
								class="checkbox"
								value="true"
								checked={ae_ds_tmp.account_id ? true : false}
							/>
						</label>
					{/if}
					{#if $ae_loc.manager_access}
						<input
							type="text"
							name="ds_account_id"
							class="input max-w-48 text-xs"
							placeholder="Account ID"
							value={ae_ds_tmp.account_id}
						/>

						<input
							type="text"
							name="ds_code"
							class="input text-xs"
							placeholder="Data store code"
							value={ae_ds_tmp.code}
							required
						/>
					{/if}
					{#if $ae_loc.trusted_access}
						<input
							type="text"
							name="ds_name"
							class="input text-xs"
							placeholder="Data store name"
							value={ae_ds_tmp.name}
							required
						/>
					{/if}
					{#if $ae_loc.manager_access}
						<input
							type="text"
							name="ds_type"
							class="input max-w-48 text-xs"
							placeholder="Data store type (html, json, md, sql, text)"
							value={ae_ds_tmp.type}
							required
						/>
						<input
							type="text"
							name="ds_for_type"
							class="input max-w-48 text-xs"
							placeholder="Data store For Type"
							value={ae_ds_tmp.for_type}
						/>
						<input
							type="text"
							name="ds_for_id"
							class="input max-w-48 text-xs"
							placeholder="Data store For ID"
							value={ae_ds_tmp.for_id}
						/>
						<input
							type="text"
							name="ds_access_read"
							class="input max-w-48 text-xs"
							placeholder="Access read"
							value={ae_ds_tmp.access_read}
						/>
						<input
							type="text"
							name="ds_access_write"
							class="input max-w-48 text-xs"
							placeholder="Access write"
							value={ae_ds_tmp.access_write}
						/>
						<input
							type="text"
							name="ds_access_delete"
							class="input max-w-48 text-xs"
							placeholder="Access delete"
							value={ae_ds_tmp.access_delete}
						/>
					{:else}
						Code: {ae_ds_tmp.code}
						<!-- Name: {ae_ds_tmp.name} -->
						Type: {ae_ds_tmp.type}
					{/if}

					<!-- Handle HTML type -->
					{#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
						<textarea
							name="ds_value"
							class="textarea type_html font-mono text-sm"
							cols="75"
							rows="25"
							placeholder="Enter the HTML here"
							>{ae_ds_tmp.type == 'html' && ae_ds_tmp.html ? ae_ds_tmp.html : ''}</textarea
						>
						<!-- Handle SQL type -->
					{:else if ae_ds_tmp.type == 'sql'}
						<textarea
							name="ds_value"
							class="textarea type_sql font-mono text-sm"
							cols="75"
							rows="25"
							placeholder="Enter the SQL here"
							>{ae_ds_tmp.type == 'sql' && ae_ds_tmp.text ? ae_ds_tmp.text : ''}</textarea
						>

						<!-- Handle text type -->
					{:else if ae_ds_tmp.type == 'text'}
						<textarea
							name="ds_value"
							class="textarea type_text"
							cols="70"
							rows="10"
							placeholder="Enter the text here"
							>{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea
						>
					{/if}
					<div class="flex gap-1 justify-center justify-evenly items-center p-1">
						<button
							type="button"
							class="btn preset-tonal-warning"
							on:click={() => {
								if (confirm('Are you sure you want to delete this data store?')) {
									trigger = 'delete__ds__code';
									// $slct_trigger = 'delete__ds__code';
								}
								show_edit = false;
								show_view = true;
							}}
						>
							<span class="fas fa-trash mx-1"></span>
							Delete
						</button>

						<button
							type="button"
							class="btn preset-tonal-primary"
							on:click={() => {
								show_edit = false;
								show_view = true;
							}}
						>
							<span class="fas fa-times mx-1"></span>
							Close
						</button>

						<button
							type="submit"
							class="btn preset-tonal-primary"
							disabled={ds_submit_results instanceof Promise && !ds_submit_results}
							on:click={() => {
								trigger = 'save__ds__code';
								// $slct_trigger = 'save__ds__code';
							}}
						>
							<span class="fas fa-save mx-1"></span>
							Save
						</button>

						{#await ds_submit_results}
							<div class="modal-loading">
								<span class="fas fa-spinner fa-spin"></span>
								<span class="loading-text"> Saving... </span>
							</div>
						{:then ds_submit_results}
							{#if ds_submit_results}
								<div>
									<span class="fas fa-check text-green-500"></span>
									<span class="saved-text"> Saved </span>
								</div>
							{/if}
						{/await}

						<div class="ae_debug" class:hidden={!debug && $ae_loc.debug != 'debug'}>
							submit: {$ae_sess.ds.submit_status}
							create: {$ae_sess.ds.create_status}
							update: {$ae_sess.ds.update_status}
						</div>
					</div>
				</form>
			</section>
		{/if}

		<!-- {#if mode == 'view'} -->

		{#if !ae_ds_tmp.type && !ae_ds_tmp.html && !ae_ds_tmp.json && !ae_ds_tmp.md && !ae_ds_tmp.text}
			{#if $ae_loc.manager_access}
				<span class="preset-tonal-warning">No data found! Is the data store correct or new?</span>
			{:else}
				<!-- <span class="variant-soft">loading</span> -->
			{/if}
		{/if}

		{#if ae_ds_tmp.type == 'html' && ae_ds_tmp.html}
			{@html ae_ds_tmp.html}
		{:else if ae_ds_tmp.type == 'html'}
			{#if $ae_loc.manager_access}
				<span class="preset-tonal-warning">No HTML found! Is the data store type correct?</span>
			{:else}
				<!-- <span class="variant-soft">loading</span> -->
			{/if}
		{/if}

		{#if ae_ds_tmp.type == 'text' && ae_ds_tmp.text}
			{ae_ds_tmp.text}
		{:else if ae_ds_tmp.type == 'text'}
			{#if $ae_loc.manager_access}
				<span class="preset-tonal-warning">No text found! Is the data store type correct?</span>
			{:else}
				<!-- <span class="variant-soft">loading</span> -->
			{/if}
		{/if}

		<button
			type="button"
			class="ae_btn_edit__ds btn hover:preset-tonal-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
			class:opacity-5={!$ae_loc.manager_access}
			class:hidden={!show_edit_btn || !$ae_loc.trusted_access}
			on:dblclick={() => {
				trigger = 'load__ds__code';
				show_edit = true;
				show_view = false;
			}}
			title="Double click to edit data store: {ds_code} with {ae_ds_tmp.account_id
				? `account ID=${ae_ds_tmp.account_id}`
				: 'no account ID'}"
		>
			<span class="fas fa-edit mx-1"></span>
			Edit
		</button>

		<!-- {/if} -->
	{:else}
		<!-- Nothing to see yet -->
	{/if}

	<!-- Text:
<pre>
{val_text}
</pre> -->

	<!-- JSON:
<pre>
{val_json}
</pre> -->

	{#await ds_get_results}
		<div
			class="modal-loading text-xs absolute bottom-0 left-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200"
		>
			<span class="fas fa-spinner fa-spin"></span>
			<span class="loading-text"> Loading... </span>
		</div>
	{/await}

	<!-- {ds_loading_status} -->
</div>

<style lang="postcss">
	/* .ae_btn_edit__ds {
    opacity: .5;
} */

	/* The section.edit should be above the rest of the content and centered on the page */
	section.edit {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: hsla(0, 0%, 100%, 0.95);
		padding: 1rem;
		border-radius: 0.5rem;
		box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);

		min-width: 80%;
	}

	.hide {
		display: none;
	}
</style>
