{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-6">
    <p class="ui-eyebrow">Step 6 of 6 <span class="ml-2 text-xs font-normal text-slate-400">(optional)</span></p>
    <h1 class="ui-page-title">GCS Manifest Bucket</h1>
    <p class="ui-page-subtitle">
      Enter the GCS path where your dbt manifest files are stored. Skip to proceed without
      manifest integration — some detection features will be unavailable.
    </p>
  </div>

  {% if errors and errors.bucket_path %}
    <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
      {{ errors.bucket_path }}
    </div>
  {% endif %}

  <form method="post" action="/setup/6" class="space-y-5">

    <div>
      <label class="ui-form-label" for="bucket_path">GCS path</label>
      <input
        class="ui-form-input mt-2 px-4 py-2.5 font-mono {% if errors and errors.bucket_path %}border-rose-400 dark:border-rose-500{% endif %}"
        type="text"
        name="bucket_path"
        id="bucket_path"
        value="{{ bucket_path or '' }}"
        placeholder="gs://my-bucket/manifests/"
        spellcheck="false"
        autofocus
      />
      <p class="mt-1.5 text-xs text-slate-500 dark:text-slate-400">
        The service account from step 2 must have
        <code class="font-mono">roles/storage.objectViewer</code> on this bucket.
      </p>
    </div>

    <div class="flex gap-3">
      <button type="submit" name="skip" value="" class="flex-1 ui-btn-primary py-2.5">
        <span class="btn-label">Verify and continue</span>
        <svg class="btn-spinner w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
      </button>
      <button type="submit" name="skip" value="1" class="flex-1 ui-btn-secondary py-2.5">
        Skip for now
      </button>
    </div>
  </form>
</div>
{% endblock %}