<script setup>
import { ref } from "vue";
import ScenarioForm from "./ScenarioForm.vue";
import { scenarios } from "./model.js";
const selected = ref("profile");
const backend = new URLSearchParams(location.search).get("backend") === "php";
</script>
<template>
  <main class="workshop container-fluid">
    <header class="hero">
      <span class="eyebrow">VUE 3 · TANSTACK FORM 1.33.5</span>
      <h1>Форма, которая помогает</h1>
      <p>
        Восемь интерфейсов: от карточки клиента до заказа по шагам. Меняйте
        данные, проверяйте ошибки и забирайте исходники.
      </p>
      <div class="hero-links">
        <a href="../tanstack-form-project.zip" download>Скачать проект ZIP</a
        ><a href="./source/ScenarioForm.vue.txt" target="_blank" rel="noopener"
          >Открыть исходник Vue</a
        >
      </div>
    </header>
    <div class="mode-note">
      <strong>{{
        backend
          ? "Реальный PHP HTTP endpoint"
          : "Настоящий TanStack Form · локальный учебный API"
      }}</strong>
      <p>
        {{
          backend
            ? "Запросы идут в PHP-обработчик из архива. Данные демонстрационные и не сохраняются в базе."
            : "Поля, проверки и состояния выполняет библиотека. Ответы 200/422/409/500 и задержку создаёт локальная фикстура: введённые данные не отправляются на сервер."
        }}
      </p>
    </div>
    <nav aria-label="Опыты мастерской" class="scenario-nav">
      <button
        v-for="s in scenarios"
        :key="s.id"
        :class="{ active: selected === s.id }"
        :aria-pressed="selected === s.id"
        @click="selected = s.id"
      >
        {{ s.title }}
      </button>
    </nav>
    <ScenarioForm
      :key="selected"
      :scenario="scenarios.find((s) => s.id === selected)"
      :backend="backend"
    />
    <footer>
      Демо без авторизации и хранения. Для проекта проверяйте данные и права на
      сервере.
      <a href="./THIRD-PARTY-LICENSES.txt" target="_blank" rel="noopener"
        >Лицензии</a
      >
    </footer>
  </main>
</template>
