<template>
    <div style="margin-top: 50px;">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>New Invite</h1>
                    <br><br>

                    <div v-if="inviteCreated">
                        Invite-Code: {{ invite.code }}
                    </div>
                    <div v-else>
                    <v-text-field
                            label="Username"
                            value=""
                            v-model="username"
                    ></v-text-field>
                    <v-text-field
                            label="Comment"
                            value=""
                            v-model="comment"
                    ></v-text-field>
                    <v-btn
                            color="success"
                            @click="create"
                    >
                        Create
                    </v-btn>
                    </div>

                </v-flex>
            </v-layout>
        </v-container>


    </div>

</template>

<script>

    import AdminService from '../../services/Admin'

    export default {
        data () {
            return {
                username: "",
                comment: "",
                invite: {},
                inviteCreated: false

            }
        },
        methods: {
            create: function() {
                AdminService.newInvite(this.username, this.comment).then((res) => {
                   this.inviteCreated = true;
                   this.invite = res.data.data;
                });
            }
        },
        mounted: function() {
        }
    }
</script>

