<template>
    <div class="memo-edit p-2">
        <div class="flex-between mb-1">
            <a href="#" @click="$router.back()" class="link">
                < Back
            </a>
        </div>
        <form @submit.prevent="submitForm">
            <InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />

            <div class="flex-end">
                <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
                <button class="btn-primary">Add New Memo</button>
            </div>
        </form>
    </div>
</template>

<script>
    import InputField from "../../components/InputField";
    import TextAreaField from "../../components/TextAreaField";

    export default {
        name: "MemoCreate",
        components: {
            InputField, TextAreaField
        },
        data: function () {
            return {
                form: {
                    'name': '',
                    'memo': '',
                },
                errors: null,
            }
        },
        methods: {
            submitForm: function () {
                axios.post('/api/memos', this.form)
                    .then(response => {
                        this.$router.push(response.data.links.self)
                    })
                    .catch(errors => {
                        this.errors = errors.response.data.errors
                    })
            }
        }
    }
</script>

<style scoped>

</style>
