<template>
    <section class="flex flex-col gap-4 ">
        مرحله دوم
        <!-- <div class="flex gap-7 bg-gray-50/50 p-7 pt-7 border rounded-lg">
            <div class="flex flex-col gap-7">
                <div class="flex flex-col gap-1 w-96">
                    <FloatLabel>
                        <InputText v-model="form.title" class="w-full" />
                        <label>{{ $t('title') }}</label>
                    </FloatLabel>
                    <small v-if="errors.title">{{ errors.title }}</small>
                </div>
                <div class="flex flex-col gap-1">
                    <FloatLabel>
                        <InputText v-model="form.titleEN" class="w-full ltr" />
                        <label>{{ $t('titleEN') }}</label>
                    </FloatLabel>
                    <small v-if="errors.titleEN">{{ errors.titleEN }}</small>
                </div>
                <div class="flex flex-col gap-1">
                    <FloatLabel>
                        <InputText v-model="form.link" class="w-full ltr" />
                        <label>{{ $t('link') }}</label>
                    </FloatLabel>
                    <small v-if="errors.link">{{ errors.link }}</small>
                </div>
                <div class="flex flex-col gap-1">
                    <FloatLabel>
                        <InputText v-model="form.metaTitle" class="w-full" />
                        <label>{{ $t('metaTitle') }}</label>
                    </FloatLabel>
                    <small v-if="errors.metaTitle">{{ errors.metaTitle }}</small>
                </div>
                <div class="flex flex-col gap-1">
                    <FloatLabel>
                        <Textarea v-model="form.metaDescription" rows="5" class="w-full" />
                        <label>{{ $t('metaDescription') }}</label>
                    </FloatLabel>
                    <small v-if="errors.metaDescription">{{ errors.metaDescription }}</small>
                </div>
            </div>

            <div class="flex flex-col gap-1 gorw">
                <Editor v-model="form.description" :placeholder="$t('description')" class="h-full"
                    editorStyle="max-height: calc(100% -46px)" />
                <small v-if="errors.description">{{ errors.description }}</small>
            </div>
        </div>
 -->
        <div class="flex pt-4 justify-content-end">
            <Button :label="$t('back')" outlined severity="secondary" class="ml-auto" @click="$emit('close')" />
            <Button :label="$t('next')" icon="pi pi-arrow-left" iconPos="right" severity="success"
                @click="$emit('next')" />
        </div>
    </section>
</template>

<script setup>
import { inject } from 'vue';

const dialogRef = inject('dialogRef')

const { form, errors } = inject('data')


</script>

<style lang="scss" scoped></style>