<template>
	<Modal
		:visible="visible"
		@update:visible="$emit('update:visible', $event)"
		@close="$emit('update:visible', false)"
		:options="{ showActions: false }"
	>
		<template #title>Save As Template</template>
		<div class="modal-content">
			<div class="field-group">
				<label for="templateName" class="field-label">Template Name</label>
				<InputText id="templateName" v-model="templateData.templateName" fluid />
			</div>
			<div class="field-group">
				<label for="templateDescription" class="field-label">Description</label>
				<InputText id="templateDescription" v-model="templateData.description" fluid />
			</div>
			<div class="confirmation-buttons">
				<Button label="Cancel" @click="$emit('update:visible', false)" severity="secondary" />
				<Button label="Submit" @click="submit" :disabled="!templateData.templateName" />
			</div>
		</div>
	</Modal>
</template>

<script setup>
import { reactive, watch } from "vue";
import Modal from "../common/Modal.vue";
import InputText from "primevue/inputtext";
import Button from "primevue/button";

const props = defineProps({
	visible: {
		type: Boolean,
		required: true,
	},
});

const emit = defineEmits(["update:visible", "save"]);

const templateData = reactive({
	templateName: "",
	description: "",
});

watch(
	() => props.visible,
	(newVal) => {
		if (newVal) {
			templateData.templateName = "";
			templateData.description = "";
		}
	},
);

const submit = () => {
	emit("save", { ...templateData });
};
</script>

<style scoped>
.field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.field-group {
	margin-bottom: 1rem;
}

.confirmation-buttons {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	margin-top: 1rem;
}

.modal-content {
	padding: 1rem;
}
</style>
