<template>
    
    <v-card
        tile
        flat
        :outlined="loginPage.outlined"
        :height="loginPage.height"
        :width="$breakpoint == 'xs' ? 300 : loginPage.width"
        :color="loginPage.color"
        class="mx-auto d-flex"
        :class="{
            'align-center': $breakpoint != 'xs',
            'justify-start': $breakpoint == 'xs',
        }"
    >

        <v-sheet
            width="100%"
            class="d-flex justify-center"
            :class="{
                'flex-column': $breakpoint == 'xs'
            }"
        >
            <v-sheet
                :width="$breakpoint == 'xs' ? '100%' : '50%'"
                :height="$breakpoint == 'xs' ? '240' : null"
            >
                <login-image 
                    :width="$breakpoint == 'xs' ? 240 : 300"
                    :height="$breakpoint == 'xs' ? 240 : 300"
                    :app="app"
                />
            </v-sheet>
            
            <v-sheet
                :width="$breakpoint == 'xs' ? '100%' : '50%'"
            >
                <login-form 
                    :app="app"
                />
            </v-sheet>
        </v-sheet>
    </v-card>
</template>

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

        computed: {
            loginPage() {
                return this.app.classes.Loginpage;
            }
        },

        components: {
            LoginForm: require('./Form/LoginForm').default,
            LoginImage: require('./Image/LoginImage').default,
        },

        name: 'LoginPage',
    }
</script>