<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">New group</h1>
                <div class="row">
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" v-model="name">
                                </div>
                                <button type="submit" class="btn btn-primary" style="width: 100%"
                                        @click="tryCreateGroup">Create</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import {mapActions} from "vuex";
import BaseLayout from "@/components/BaseLayout.vue";

export default {
    name: 'GroupNew',
    components: {
        BaseLayout
    },
    data() {
        return {
            name: ""
        }
    },
    methods: {
        ...mapActions(['createGroup']),
        tryCreateGroup() {
            this.createGroup({name: this.name}).then((group) => {
                this.$router.push(`/groups/${group.id}`)
            }).catch(() => {
            })
        }
    }
}
</script>

<style scoped>
</style>
