<script lang="ts">
  import AppPage from "../../app_page.svelte"
  import ConnectProviders from "../../../(fullscreen)/setup/(setup)/connect_providers/connect_providers.svelte"
  import { page } from "$app/stores"
</script>

<AppPage
  title="AI Providers"
  sub_subtitle="Read the Docs"
  sub_subtitle_link="https://docs.kiln.tech/docs/models-and-ai-providers"
  breadcrumbs={[{ label: "Settings", href: "/settings" }]}
  action_buttons={[
    {
      label: "Custom Models",
      href: "/settings/providers/add_models",
      primary: true,
    },
  ]}
>
  <ConnectProviders
    highlight_finetune={$page.url.searchParams.get("highlight") === "finetune"}
    required_providers={$page.url.searchParams
      .get("required_providers")
      ?.split(",") || []}
  />
</AppPage>
