<script
    setup
    lang="ts"
>
    import { useEmployeeStore } from 'src/stores/employee-store';

    const employee_store = useEmployeeStore();
</script>

<template>
    <div>
        <q-form>
            <div
                class="q-ma-xs"
                :class="$q.screen.lt.md ? 'column' : 'row'"
            >
                <q-input
                    v-model="employee_store.employee.first_name"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.personal.first_name') }}
                        </span>
                    </template>
                </q-input>

                <q-input
                    v-model="employee_store.employee.last_name"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.personal.last_name') }}
                        </span>
                    </template>
                </q-input>
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.md ? 'column' : 'row'"
            >
                <q-input
                    v-model="employee_store.employee.email"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.employee.email') }}
                        </span>
                    </template>
                </q-input>

                <q-input
                    v-model="employee_store.employee.phone_number"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.personal.phone_number') }}
                        </span>
                    </template>
                </q-input>
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.md ? 'column' : 'row'"
            >
                <q-input
                    v-model="employee_store.employee.job_title"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.employee.job_title') }}
                        </span>
                    </template>
                </q-input>

                <q-input
                    v-model="employee_store.employee.company_name"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.employee.company') }}
                        </span>
                    </template>
                </q-input>
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.md ? 'column' : 'row'"
            >
                <q-input
                    v-model="employee_store.employee.supervisor_full_name"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.employee.supervisor') }}
                        </span>
                    </template>
                </q-input>

                <q-input
                    v-model="employee_store.employee.phone_number"
                    color="accent"
                    stack-label
                    label-slot
                    class="col q-mx-md"
                >
                    <template #label>
                        <span
                            class="text-weight-bolder text-uppercase"
                            style="font-size: 0.85em;"
                        >
                            {{ $t('profile.employee.bankroll_id') }}
                        </span>
                    </template>
                </q-input>
            </div>
        </q-form>
    </div>
</template>