<script setup>
const emit = defineEmits(['submit']);
defineProps({
    icon: { type: String, required: false, default: 'phonelink_lock' },
    title: { type: String, required: true },
});
</script>
<template>
    <QForm @submit="emit('submit')" class="q-gutter-y-md q-pa-lg formCard">
        <div class="column items-center">
            <QIcon v-if="icon != false" :name="icon" size="xl" color="primary" />
            <h5 class="text-center q-my-md">
                {{ title }}
            </h5>
        </div>
        <slot></slot>
        <div class="q-mt-lg">
            <slot name="buttons"></slot>
        </div>
    </QForm>
</template>
<style lang="scss" scoped>
.formCard {
    max-width: 350px;
    min-width: 300px;
}
@media (max-width: $breakpoint-xs-max) {
    .formCard {
        min-width: 100%;
    }
}
</style>
