{% extends "layout.html" %}

{% block content %}
  <section class="ui-shell">
    <div class="mx-auto flex min-h-[70vh] max-w-4xl flex-col items-center justify-center">
      <p class="ui-eyebrow text-center">Admin Only</p>
      <h1 class="ui-page-title mt-3 text-center">New Configuration</h1>
      <p class="ui-page-subtitle max-w-2xl text-center">
        Choose how you want to start this project. You can still adjust the manifest source and advanced settings on the next screen.
      </p>

      <div class="mt-10 grid w-full gap-5 md:grid-cols-2">
        <a
          href="/admin/configurations/new?mode=local"
          class="group rounded-none border-2 border-slate-200 bg-white p-8 transition-all hover:-translate-y-0.5 hover:border-brand-500/40 hover:bg-brand-50/60 dark:border-slate-800 dark:bg-slate-900/60 dark:hover:border-brand-500/40 dark:hover:bg-brand-900/10"
        >
          <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-500 dark:bg-brand-900/30 dark:text-brand-300">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.5a2.25 2.25 0 01-2.25 2.25h-13.5A2.25 2.25 0 013 16.5v-9A2.25 2.25 0 015.25 5.25h13.5A2.25 2.25 0 0121 7.5v9z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h3m-3-3h9m-9-3h4.5" />
            </svg>
          </div>
          <h2 class="mt-6 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">Local</h2>
          <p class="mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
            Start with local-dev defaults. Manual manifest upload is preselected, so you can use your own credentials and upload <code>manifest.json</code> yourself.
          </p>
          <div class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-brand-500 dark:text-brand-300">
            Continue with Local
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
            </svg>
          </div>
        </a>

        <a
          href="/admin/configurations/new?mode=cloud"
          class="group rounded-none border-2 border-slate-200 bg-white p-8 transition-all hover:-translate-y-0.5 hover:border-brand-500/40 hover:bg-brand-50/60 dark:border-slate-800 dark:bg-slate-900/60 dark:hover:border-brand-500/40 dark:hover:bg-brand-900/10"
        >
          <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-50 text-sky-600 dark:bg-sky-900/30 dark:text-sky-300">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 18A4.5 4.5 0 015.06 9.72 6 6 0 1118.57 8.1 4.5 4.5 0 1117.25 18H7.5z" />
            </svg>
          </div>
          <h2 class="mt-6 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">Cloud</h2>
          <p class="mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
            Start with cloud defaults. GCS-backed manifest lookup is preselected, which fits shared environments and managed infrastructure.
          </p>
          <div class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-sky-600 dark:text-sky-300">
            Continue with Cloud
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
            </svg>
          </div>
        </a>
      </div>
    </div>
  </section>
{% endblock %}