<template>
    <section class="flex flex-col gap-4 ">
<Panel :header="$t('اطلاعات دوره')">
    <div class="grid grid-cols-3 gap-7">
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText 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 class="w-full" />
                <label>{{ $t('مدت زمان دوره') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('دسته بندی') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('قیمت') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('مدرس') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('درصد تکمیل شده') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('سطح') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('زبان') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('تعداد ویدیو') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>
        <div class="flex flex-col gap-1">
            <FloatLabel>
                <InputText class="w-full" />
                <label>{{ $t('حجم کل دوره') }}</label>
            </FloatLabel>
            <small v-if="errors.title">{{ errors.title }}</small>
        </div>

    </div>
    <div class="flex flex-col gap-1 mt-8">
        <Editor :placeholder="$t('description')" class="h-full"
            editorStyle="min-height: 200px" />
        <small v-if="errors.description">{{ errors.description }}</small>
    </div>
</Panel>
        <div class="flex pt-4 justify-content-end">
            <Button :label="$t('prev')" outlined severity="secondary" icon="pi pi-arrow-right" class="ml-auto"
                @click="$emit('prev')" />
            <Button :label="$t('save')" icon="pi pi-save" severity="success" :loading="saving" @click="$emit('save')" />
        </div> 
    </section>
</template>

<script setup>
import { formatSize } from '@/utils/formatSize'
import { inject } from 'vue';

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

const chooseImages = ({ files }) => {
    if (!form.coverImage) form.coverImage = files?.[0] || null
    changeCoverImage(files)
}

const changeCoverImage = (files) => {
    form.images = files.filter((img) => img != form.coverImage)
}
 
</script>

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