<template>
    <v-card tile flat :width="width" :outlined="false">

        <v-card-title>
            {{ __('Activarea contului') }}
        </v-card-title>

        <v-card-subtitle>
            <span class="text-caption">
                {{ __('Salut :name. Completează datele solicitate pentru a vă activa contul pentru clientul :client', {name: user.full_name, client: customer.name}) }}
            </span>
        </v-card-subtitle>

        <v-card-text>
            <activate-account-input 
                class="mt-3"
                :app="app"
                :withPassword="! user.activated_at"
            />
        </v-card-text>

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

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

    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            width: {default: null},
            customer: {required: true},
            user: {user: true},
        },

        computed: {
            form() {
                return this.app.forms.Activateaccount;
            }
        },
        
        components: {
            CsOrangeBtn: require('@CsVueComp/buttons/CsOrangeBtn').default,
        },

        name: 'ActivateAccountForm'
    }
</script>