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

const team = reactive({
  teamName: 'Core Product Team',
  workspace: 'supertodo',
  defaultAssignee: 'Product Operator',
  doneRule: 'At least 1 review before done',
})
</script>

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

    <form class="card settings-form" @submit.prevent>
      <label>
        {{ t('team_name') }}
        <input v-model="team.teamName" type="text" />
      </label>
      <label>
        {{ t('workspace_slug') }}
        <input v-model="team.workspace" type="text" />
      </label>
      <label>
        {{ t('default_assignee') }}
        <input v-model="team.defaultAssignee" type="text" />
      </label>
      <label>
        {{ t('completion_rule') }}
        <textarea v-model="team.doneRule" rows="4"></textarea>
      </label>
      <button class="btn primary" type="submit">{{ t('save_team_settings') }}</button>
    </form>
  </section>
</template>
