<script setup>
import { Head, useForm } from '@inertiajs/vue3';
import { useAuthStore } from '@/Stores/useAuthStore';
import { useAuthTranslations } from '@/Composables/useAuthTranslations';
import IpLoginShell from '@/Components/Auth/IpLoginShell.vue';

defineProps({
    status: { type: String, default: null },
});

const authStore = useAuthStore();
const { t } = useAuthTranslations();

const form = useForm({
    email: '',
    locale: authStore.locale,
});

function submit() {
    form.locale = authStore.locale;
    form.post(route('password.email'));
}
</script>

<template>
    <Head :title="t('forgot_password')" />

    <IpLoginShell
        :title="t('forgot_password')"
        :subtitle="t('forgot_password_subtitle')"
        :back-href="route('login')"
        :back-label="t('back_to_sign_in')"
    >
        <div v-if="status" class="ip-login__status">{{ status }}</div>

        <form class="ip-login__form" @submit.prevent="submit">
            <div class="ip-form-group">
                <label class="ip-login__label" for="email">{{ t('email') }}</label>
                <div class="ip-login__input-wrap">
                    <svg class="ip-login__input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                    </svg>
                    <input
                        id="email"
                        v-model="form.email"
                        type="email"
                        class="ip-login__input"
                        :class="{ 'ip-login__input--error': form.errors.email }"
                        required
                        autofocus
                        autocomplete="username"
                    />
                </div>
                <p v-if="form.errors.email" class="ip-login__error">{{ form.errors.email }}</p>
            </div>

            <button
                type="submit"
                class="ip-btn ip-btn--primary ip-btn--full ip-login__submit"
                :disabled="form.processing"
            >
                {{ t('send_reset_link') }}
            </button>
        </form>
    </IpLoginShell>
</template>
