<script setup lang="ts">
import { reactive } from 'vue'
import { session } from '../stores/session'
import { t } from '../i18n'

const form = reactive({
  displayName: 'Product Operator',
  email: session.email,
  timezone: 'Asia/Shanghai',
  notifications: true,
})
</script>

<template>
  <section class="page">
    <header class="page-head">
      <h2>{{ t('user_settings_title') }}</h2>
      <p>{{ t('user_settings_subtitle') }}</p>
    </header>

    <form class="card settings-form" @submit.prevent>
      <label>
        {{ t('display_name') }}
        <input v-model="form.displayName" type="text" />
      </label>
      <label>
        {{ t('email') }}
        <input v-model="form.email" type="email" />
      </label>
      <label>
        {{ t('timezone') }}
        <input v-model="form.timezone" type="text" />
      </label>
      <label class="inline">
        <input v-model="form.notifications" type="checkbox" />
        {{ t('reminders') }}
      </label>
      <button class="btn primary" type="submit">{{ t('save_settings') }}</button>
    </form>
  </section>
</template>
