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

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-6">
    <p class="ui-eyebrow">Step {{ current_step }} of {{ total_steps }}</p>
    <h1 class="ui-page-title">BigQuery Region</h1>
    <p class="ui-page-subtitle">
      Select the region where your BigQuery data lives. Governor queries
      <code class="text-xs font-mono bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded">INFORMATION_SCHEMA</code>
      in this region.
    </p>
  </div>

  {% if errors and errors.region %}
    <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.region }}
    </div>
  {% endif %}

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

    <div>
      <label class="ui-form-label" for="region">Region</label>
      <input
        class="ui-form-input mt-2 px-4 py-2.5 {% if errors and errors.region %}border-rose-400 dark:border-rose-500{% endif %}"
        type="text"
        name="region"
        id="region"
        list="region-list"
        placeholder="e.g. us, eu, us-central1"
        value="{{ selected_region or '' }}"
        required
        autofocus
      />
      <datalist id="region-list">
        {% set common_regions = ["us", "eu", "us-central1", "us-east1", "us-east4", "us-west1", "us-west2", "us-west3", "us-west4", "northamerica-northeast1", "northamerica-northeast2", "southamerica-east1", "europe-north1", "europe-west1", "europe-west2", "europe-west3", "europe-west4", "europe-west6", "europe-central2", "asia-east1", "asia-east2", "asia-northeast1", "asia-northeast2", "asia-northeast3", "asia-south1", "asia-south2", "asia-southeast1", "asia-southeast2", "australia-southeast1", "australia-southeast2"] %}
        {% for r in common_regions %}
          <option value="{{ r }}">{{ r }}</option>
        {% endfor %}
      </datalist>
      <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
        Common values: <code class="font-mono">us</code>, <code class="font-mono">eu</code>, <code class="font-mono">us-central1</code>.
        Type any custom region string if yours isn't listed.
      </p>
    </div>

    <button type="submit" class="w-full ui-btn-primary py-2.5 mt-2">
      <span class="btn-label">Save 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>
  </form>
</div>
{% endblock %}