{# Step 2 — pick the audit target. Project dropdown comes from
   gcp_projects_for_picker(); region is free text with a list of
   common BigQuery locations. POST runs the ADC probe again (now that
   we have a project to probe against) and writes ~/.governor-audit/config.json. #}
{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane">
  <h2 class="ui-section-title">Step 2 · Choose audit target</h2>
  <p class="ui-section-subtitle">
    Pick the BigQuery project you want to audit and the region its
    dataset lives in. Both are required &mdash; everything in audit
    is scoped to a single (project, region) pair.
  </p>

  {% if errors and errors.get('_general') %}
    <div class="mt-4 border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-3 text-sm text-red-600 dark:text-red-300 whitespace-pre-line">
      {{ errors['_general'] }}
    </div>
  {% endif %}

  {% if discovery_error %}
    <div class="mt-4 border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
      {{ discovery_error }}
    </div>
  {% endif %}

  <form method="post" action="/setup/target" class="ui-form-scope mt-6 space-y-5">
    <div>
      <label for="gcp_project_id" class="block text-sm font-medium text-slate-600 dark:text-slate-300">
        GCP Project
        {% if gcp_projects %}
          <span class="ml-2 text-sm font-normal text-slate-400 dark:text-slate-500">{{ gcp_projects | length }} accessible to {{ principal }}</span>
        {% endif %}
      </label>
      <input
        type="text"
        name="gcp_project_id"
        id="gcp_project_id"
        required
        autocomplete="off"
        list="gcp-project-options"
        value="{{ form_data.gcp_project_id if form_data else '' }}"
        placeholder="prod-warehouse-123"
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
      />
      {% if gcp_projects %}
        <datalist id="gcp-project-options">
          {% for project in gcp_projects %}
            <option value="{{ project.project_id }}">{% if project.display_name %}{{ project.display_name }} · {% endif %}{{ project.project_id }}</option>
          {% endfor %}
        </datalist>
      {% endif %}
      {% if errors and errors.get('gcp_project_id') %}
        <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['gcp_project_id'] }}</p>
      {% endif %}
    </div>

    <div>
      <label for="bigquery_region" class="block text-sm font-medium text-slate-600 dark:text-slate-300">BigQuery Region</label>
      <input
        type="text"
        name="bigquery_region"
        id="bigquery_region"
        required
        autocomplete="off"
        list="bq-region-options"
        value="{{ form_data.bigquery_region if form_data else 'us' }}"
        placeholder="us"
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
      />
      <datalist id="bq-region-options">
        <option value="us">us</option>
        <option value="eu">eu</option>
        <option value="us-central1">us-central1</option>
        <option value="us-east1">us-east1</option>
        <option value="us-east4">us-east4</option>
        <option value="us-west1">us-west1</option>
        <option value="us-west2">us-west2</option>
        <option value="europe-west1">europe-west1</option>
        <option value="europe-west2">europe-west2</option>
        <option value="europe-west4">europe-west4</option>
        <option value="asia-east1">asia-east1</option>
        <option value="asia-northeast1">asia-northeast1</option>
        <option value="asia-southeast1">asia-southeast1</option>
        <option value="australia-southeast1">australia-southeast1</option>
        <option value="australia-southeast2">australia-southeast2</option>
      </datalist>
      <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Single-region (<code class="font-mono">us-east1</code>) or multi-region (<code class="font-mono">us</code> / <code class="font-mono">eu</code>). Must match the dataset's location.
      </p>
      {% if errors and errors.get('bigquery_region') %}
        <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['bigquery_region'] }}</p>
      {% endif %}
    </div>

    <div class="flex flex-wrap items-start gap-2 pt-1">
      <input
        type="checkbox"
        name="dbt_only_default"
        id="dbt_only_default"
        {% if (form_data.dbt_only_default if form_data else False) %}checked{% endif %}
        class="mt-0.5"
      />
      <label for="dbt_only_default" class="text-sm text-slate-700 dark:text-slate-300">
        Default future scans to <strong>dbt-originated jobs only</strong>
        <span class="block text-sm text-slate-500 dark:text-slate-400 mt-1">
          Adds <code class="font-mono">STARTS_WITH(query, '/* {"app": "dbt"')</code> to the INFORMATION_SCHEMA filter. You can override per-scan later.
        </span>
      </label>
    </div>

    <div class="flex items-center gap-3 pt-2">
      <a href="/setup/account" class="ui-btn-secondary">Back</a>
      <button type="submit" class="ui-btn-primary transition-colors">
        <span class="btn-label">Save and continue</span>
        <svg class="btn-spinner h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </button>
    </div>
  </form>
</div>
{% endblock %}