<template>
    <v-card
        tile
        flat
        :height="loginForm.height"
        :width="loginForm.width"
        :color="loginForm.color"
        :outlined="loginForm.outlined"
    >
        <v-card-title>
            {{ __(loginForm.title) }}
        </v-card-title>

        <v-card-subtitle>
            <span class="text-caption">
                {{ __(loginForm.subtitle) }}
            </span>
        </v-card-subtitle>

        <form method="post" :action="app.url + 'login'">
            
            <input type="hidden" name="_token" :value="app.csrf" />

            <v-card-text>
                <login-form-input 
                    class="mt-3"
                    :app="app"
                />
            </v-card-text>

            <v-card-actions>
                <v-sheet 
                    width="100%"
                    class="transparent text-center"
                >
                    <v-btn 
                        type="submit"
                        color="orange darken-4"
                        class="text-no-transform white--text"
                    >
                        {{ __('Login') }}
                    </v-btn>
                </v-sheet>
            </v-card-actions>
        </form>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

        computed: {
            loginForm() {
                return this.app.classes.Loginform;
            }
        },
        
        components: {
            LoginFormInput: require('./Input/LoginFormInput').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'LoginForm'
    }
</script>