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

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

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

        <v-card-actions>
            <v-sheet 
                width="100%"
                class="transparent text-center"
            >
                <cs-orange-btn 
                    caption="Setează"
                    :small="false"
                    :loading="app.forms.Newpassword.processing"
                    :disabled="app.forms.Newpassword.actionButtonDisabled"
                    :click="() => app.forms.Newpassword.formprovider.Trigger()"
                />

            </v-sheet>
        </v-card-actions>

        <v-card-text>
            <v-sheet 
                width="100%"
                class="d-flex justify-center align-center"
            >
                <v-btn
                    plain
                    text
                    :href="$url + 'forgot-password'"
                    class="text-dark-blue text-no-transform"
                >
                    {{ __('Retrimite email') }}
                </v-btn>

                <v-btn
                    plain
                    text
                    :href="$url + 'login'"
                    class="text-dark-blue text-no-transform"
                >
                    {{ __('Conectare') }}
                </v-btn>

                <v-btn
                    v-if="app.appConfig.canCreateAccount"
                    plain
                    text
                    :href="$url + 'register'"
                    class="text-dark-blue text-no-transform"
                >
                    {{ __('Creare cont') }}
                </v-btn>
            </v-sheet>
        </v-card-text>
    </v-card>
</template>

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

        computed: {
            newPasswordForm() {
                return this.app.classes.Newpasswordform;
            }
        },
        
        components: {
            NewPasswordFormInput: require('./Input/NewPasswordFormInput').default,
            CsOrangeBtn: require('@CsVueComp/buttons/CsOrangeBtn').default,
        },

        name: 'NewPasswordForm'
    }
</script>