<script lang="ts">
  import LoginInfoPanel from './LoginInfoPanel.svelte';
  import LoginPanel from './LoginPanel.svelte';
  import type { PublicStatusResponse } from '../../types';

  const {
    isOAuthCallback,
    callbackBusy,
    authBusy,
    authError,
    authMessage,
    statusData,
    statusLoading,
    statusError,
    onlogin
  }: {
    isOAuthCallback: boolean;
    callbackBusy: boolean;
    authBusy: boolean;
    authError: string;
    authMessage: string;
    statusData: PublicStatusResponse | null;
    statusLoading: boolean;
    statusError: string;
    onlogin: (username: string, password: string) => void;
  } = $props();
</script>

<main class="mx-auto min-h-screen w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
  <section class="flex min-h-[calc(100vh-4rem)] flex-col gap-8">
    <LoginInfoPanel {isOAuthCallback} data={statusData} loading={statusLoading} error={statusError} />
    <div class="mt-auto">
      <LoginPanel
        {isOAuthCallback}
        {callbackBusy}
        {authBusy}
        {authError}
        {authMessage}
        {onlogin}
      />
    </div>
    <div class="mt-3 flex flex-wrap items-center justify-center gap-3 text-xs text-slate-400">
      <a
        href="/llms.txt"
        class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1.5 transition hover:border-cyan-300/40 hover:text-cyan-100"
      >
        llms.txt
      </a>
      <a
        href="/robots.txt"
        class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1.5 transition hover:border-cyan-300/40 hover:text-cyan-100"
      >
        robots.txt
      </a>
      <a
        href="/.well-known/oauth-authorization-server"
        class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1.5 transition hover:border-cyan-300/40 hover:text-cyan-100"
      >
        OAuth Discovery
      </a>
      <a
        href="/llm"
        class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1.5 transition hover:border-cyan-300/40 hover:text-cyan-100"
      >
        LLM Docs
      </a>
    </div>
  </section>
</main>
