<template>
	<Dialog
		title="Add stash"
		@close="$emit('close', false)"
	>
		<form
			class="dialog-body"
			@submit.prevent="addStash"
		>
			<input
				ref="name"
				v-model="name"
				type="input"
				placeholder="Name"
				class="input"
			>

			<div class="dialog-actions right">
				<button
					type="submit"
					class="button button-primary"
				>Add</button>
			</div>
		</form>
	</Dialog>
</template>

<script>
async function addStash() {
	await this.$store.dispatch('createStash', {
		name: this.name,
	});

	this.$emit('close', true);
}

function mounted() {
	this.$refs.name.focus();
}

export default {
	data() {
		return {
			name: null,
		};
	},
	emits: ['close'],
	mounted,
	methods: {
		addStash,
	},
};
</script>