{% extends "layout.html" %}

{% block content %}
  <section class="ui-shell">
    <p class="ui-eyebrow">Admin Only</p>
    <div class="mt-3 flex items-center justify-between">
      <h1 class="ui-page-title mt-0">{{ config.name }}</h1>
      {% with status=config.status %}
        {% include "components/config_status_badge.html" %}
      {% endwith %}
    </div>

    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">GCP Project: <span class="text-slate-700 dark:text-slate-200">{{ display_gcp_project_id or "Unavailable from run_results" }}</span>
      {% if config.gcp_project_name %}
        <span class="text-slate-400 dark:text-slate-500">({{ config.gcp_project_name }})</span>
      {% endif %}
    </p>
    {% if not local_runtime_mode %}
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Manifest Source: <span class="text-slate-700 dark:text-slate-200">{{ config.manifest_source | replace('_', ' ') | title }}</span></p>
    {% endif %}

    <!-- Project-level sync timestamps -->
    <div class="mt-4 flex flex-wrap gap-6 text-sm">
      <div>
        <span class="text-slate-400 dark:text-slate-500">Last BigQuery Jobs Sync:</span>
        <span class="ml-1 text-slate-600 dark:text-slate-300">{{ last_jobs_sync_at | timeago }}</span>
      </div>
      <div>
        <span class="text-slate-400 dark:text-slate-500">Last Manifest Change:</span>
        <span class="ml-1 text-slate-600 dark:text-slate-300">{{ last_manifest_change_at | timeago }}</span>
      </div>
    </div>

    {% if flash %}
      <div class="mt-4 border px-4 py-3 text-sm
        {% if flash.level == 'success' %}
          border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 text-brand-500 dark:text-brand-200
        {% elif flash.level == 'error' %}
          border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-300
        {% else %}
          border-blue-300 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-300
        {% endif %}
      ">
        {{ flash.message }}
      </div>
    {% endif %}

    {% if errors and errors.get('_concurrency') %}
      <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-600 dark:text-amber-300">
        {{ errors['_concurrency'][0] }}
      </div>
    {% endif %}

    {% 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">
        {{ errors['_general'][0] }}
      </div>
    {% endif %}

    {% if config.status == 'active' %}
    {% set sync_is_active = active_sync and active_sync.status in ['queued', 'in_progress'] %}
    <div class="mt-4 flex flex-wrap items-center gap-4">
      <a href="/admin/configurations/{{ config.id }}/jobs" class="ui-btn-secondary transition-colors">
        View Jobs
      </a>
      <div class="flex flex-wrap items-center gap-4">
        <button
          id="sync-now-btn"
          data-on:click="@post('/api/sync/{{ config.id }}')"
          {% if sync_is_active %}disabled{% endif %}
          class="ui-btn-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <svg class="sync-spinner animate-spin h-4 w-4 text-white {% if not sync_is_active %}hidden{% endif %}" 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"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span class="sync-label">{{ 'Syncing…' if sync_is_active else 'Sync Now' }}</span>
        </button>
        <span class="text-sm text-slate-400 dark:text-slate-500">
          {% if local_runtime_mode %}
            Fetch BigQuery job history from INFORMATION_SCHEMA and refresh local detection for this project
          {% else %}
            Trigger a data sync operation for this configuration
          {% endif %}
        </span>
        {% if active_sync %}
          <span id="sync-status-tag" class="ui-pill
            {% if active_sync.status == 'completed' %}ui-pill-success
            {% elif active_sync.status == 'failed' %}ui-pill-danger
            {% elif active_sync.status in ['queued', 'in_progress'] %}ui-pill-blue
            {% else %}ui-pill-neutral{% endif %}
          ">{{ active_sync.status | replace('_', ' ') | title }}</span>
        {% endif %}
      </div>
    </div>
    <div
      id="sync-failure-log"
      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-700 dark:text-red-300 {% if not active_sync or active_sync.status != 'failed' %}hidden{% endif %}"
    >
      <p class="font-semibold text-red-700 dark:text-red-300">Sync failed</p>
      <p id="sync-failure-message" class="mt-1 text-red-600 dark:text-red-300/90">
        {% if active_sync and active_sync.status == 'failed' %}
          {{ active_sync.last_error or (active_sync.errors[0].error_message if active_sync.errors else 'Governor could not complete the sync.') }}
        {% endif %}
      </p>
      <div id="sync-failure-errors" class="mt-3 space-y-2">
        {% if active_sync and active_sync.status == 'failed' %}
          {% for error in active_sync.errors %}
            <div class="border border-red-300/80 dark:border-red-500/30 bg-white/50 dark:bg-red-950/30 px-3 py-2">
              <p class="font-medium">{{ error.error_type }}{% if error.step_context %} at {{ error.step_context }}{% endif %}</p>
              <p class="mt-1 text-red-600 dark:text-red-300/90">{{ error.error_message }}</p>
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>
    {% endif %}

    {% if not local_runtime_mode %}
    <!-- Sync Schedule Display -->
    <div class="mt-6 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
      <h3 class="text-sm font-semibold text-slate-600 dark:text-slate-300">Sync Schedule</h3>
      <div class="mt-3 flex flex-wrap gap-6 text-sm">
        <div>
          <span class="text-slate-400 dark:text-slate-500">Type:</span>
          <span class="ml-1 ui-pill
            {% if config.schedule_type == 'cron' %}
              ui-pill-blue
            {% else %}
              ui-pill-blue
            {% endif %}
          ">{{ config.schedule_type }}</span>
        </div>
        <div>
          <span class="text-slate-400 dark:text-slate-500">Schedule:</span>
          <span class="ml-1 text-slate-700 dark:text-slate-200">{{ schedule_description or 'Not set' }}</span>
        </div>
        <div>
          <span class="text-slate-400 dark:text-slate-500">Status:</span>
          {% if config.schedule_enabled %}
            <span class="ml-1 ui-pill ui-pill-blue">Enabled</span>
          {% else %}
            <span class="ml-1 ui-pill ui-pill-neutral">Disabled</span>
          {% endif %}
        </div>
        <div>
          <span class="text-slate-400 dark:text-slate-500">Last Run:</span>
          <span class="ml-1 text-slate-600 dark:text-slate-300">{{ config.schedule_last_run_at | timeago if config.schedule_last_run_at else 'Never' }}</span>
        </div>
        {% if next_run_time %}
        <div>
          <span class="text-slate-400 dark:text-slate-500">Next Run:</span>
          <span class="ml-1 text-slate-600 dark:text-slate-300">{{ next_run_time.strftime('%Y-%m-%d %H:%M UTC') }}</span>
        </div>
        {% elif config.schedule_enabled %}
        <div>
          <span class="text-slate-400 dark:text-slate-500">Next Run:</span>
          <span class="ml-1 text-slate-500 dark:text-slate-400">Pending</span>
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    <!-- Sync Controls -->
    {% if config.status == 'active' %}
    {# Hidden container for sync polling to detect active/completed state #}
    {% with sync=active_sync, config_id=config.id %}
      <div class="hidden">{% include "sync/_sync_status_container.html" %}</div>
    {% endwith %}

    {% if not local_runtime_mode %}
    <div class="mt-6 space-y-4">
      <!-- Sync History -->
      {% with sync_history=sync_history, config_id=config.id, page=sync_history_page, total_pages=sync_history_total_pages, total_count=sync_history_total_count|default(0), last_completed_sync=last_completed_sync, sort=sync_history_sort|default('queued_at'), direction=sync_history_direction|default('desc') %}
        {% include "sync/_sync_history.html" %}
      {% endwith %}
    </div>
    {% endif %}
    {% endif %}

    {% if config.manifest_source == 'manual_upload' and not local_runtime_mode %}
    <div class="mt-6 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
      <h3 class="text-sm font-semibold text-slate-600 dark:text-slate-300">Manifest</h3>
      {% if errors and errors.get('manifest_upload') %}
        <p class="mt-3 text-sm text-red-500 dark:text-red-400">{{ errors['manifest_upload'][0] }}</p>
      {% endif %}

      {% if last_manifest_change_at %}
      <!-- Current manifest indicator -->
      <div id="detail_manifest_current" class="mt-3 rounded-lg border border-emerald-300 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-5 py-4">
        <div class="flex items-center gap-3">
          <svg class="h-8 w-8 shrink-0 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div class="min-w-0 flex-1">
            <p class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">Manifest uploaded</p>
            <p class="mt-0.5 text-sm text-emerald-600/80 dark:text-emerald-400/80">Last updated {{ last_manifest_change_at | timeago }}</p>
          </div>
          <button
            type="button"
            id="detail_manifest_replace_btn"
            onclick="
              document.getElementById('detail_manifest_current').classList.add('hidden');
              document.getElementById('detail_manifest_upload_form').classList.remove('hidden');
            "
            class="shrink-0 rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-1.5 text-sm font-medium text-slate-600 dark:text-slate-300 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800"
          >
            Replace manifest
          </button>
        </div>
      </div>
      {% endif %}

      <!-- Upload form (hidden when manifest exists, visible when none or user clicks Replace) -->
      <form
        method="post"
        action="/admin/configurations/{{ config.id }}/manifest-upload"
        enctype="multipart/form-data"
        id="detail_manifest_upload_form"
        class="mt-3 {{ 'hidden' if last_manifest_change_at else '' }}"
      >
        {% if not last_manifest_change_at %}
        <p class="mb-3 text-sm text-amber-600 dark:text-amber-400">No manifest uploaded yet. Upload a manifest.json to enable sync and detection.</p>
        {% else %}
        <p class="mb-3 text-sm text-slate-500 dark:text-slate-400">Upload a new manifest.json to replace the current version.</p>
        {% endif %}
        <!-- Drop zone -->
        <label
          for="detail_manifest_file"
          id="detail_manifest_drop_zone"
          class="flex items-center justify-center gap-3 rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/40 px-5 py-5 cursor-pointer transition-colors hover:border-brand-400 hover:bg-brand-50/50 dark:hover:border-brand-500 dark:hover:bg-brand-900/20"
        >
          <svg class="h-7 w-7 shrink-0 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
          </svg>
          <div>
            <span class="text-sm font-semibold text-brand-600 dark:text-brand-400">Click to upload</span>
            <span class="text-sm text-slate-500 dark:text-slate-400"> or drag and drop</span>
            <p class="text-sm text-slate-400 dark:text-slate-500 mt-0.5">manifest.json (JSON, max 50 MB)</p>
          </div>
        </label>
        <!-- File-selected state -->
        <div
          id="detail_manifest_success_zone"
          class="hidden rounded-lg border-2 border-solid border-emerald-400 dark:border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20 px-5 py-4"
        >
          <div class="flex items-center gap-3">
            <svg class="h-7 w-7 shrink-0 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">File ready</p>
              <p id="detail_manifest_file_name" class="mt-0.5 text-sm text-emerald-600 dark:text-emerald-400 truncate"></p>
            </div>
            <label
              for="detail_manifest_file"
              class="shrink-0 cursor-pointer rounded-md border border-emerald-300 dark:border-emerald-600 bg-white dark:bg-slate-900 px-3 py-1.5 text-sm font-medium text-emerald-700 dark:text-emerald-300 transition-colors hover:bg-emerald-50 dark:hover:bg-emerald-900/40"
            >
              Change
            </label>
          </div>
        </div>
        <input
          type="file"
          name="manifest_file"
          id="detail_manifest_file"
          accept=".json,application/json"
          class="sr-only"
          onchange="
            var dropZone = document.getElementById('detail_manifest_drop_zone');
            var successZone = document.getElementById('detail_manifest_success_zone');
            var nameEl = document.getElementById('detail_manifest_file_name');
            var btn = document.getElementById('detail_manifest_submit');
            if (this.files && this.files.length) {
              nameEl.textContent = this.files[0].name;
              dropZone.classList.add('hidden');
              successZone.classList.remove('hidden');
              if (btn) btn.classList.remove('hidden');
            } else {
              dropZone.classList.remove('hidden');
              successZone.classList.add('hidden');
              if (btn) btn.classList.add('hidden');
            }
          "
        />
        <div class="mt-3 flex items-center gap-3">
          <button id="detail_manifest_submit" type="submit" class="hidden ui-btn-secondary transition-colors">Upload Manifest</button>
          {% if last_manifest_change_at %}
          <button
            type="button"
            class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
            onclick="
              document.getElementById('detail_manifest_upload_form').classList.add('hidden');
              document.getElementById('detail_manifest_current').classList.remove('hidden');
            "
          >Cancel</button>
          {% endif %}
        </div>
      </form>
    </div>
    {% endif %}

    {% set selected_manifest_source = form_data.get('manifest_source', config.manifest_source) if form_data else config.manifest_source %}
    <form method="post" action="/admin/configurations/{{ config.id }}" class="ui-form-scope mt-6 space-y-6"
      data-signals="{schType: '{{ form_data.get('schedule_type', config.schedule_type) if form_data else config.schedule_type }}', schValue: '{{ form_data.get('schedule_value', config.schedule_value) if form_data else config.schedule_value }}', schInterval: '{{ (form_data.get('schedule_value', config.schedule_value) if form_data else config.schedule_value) if (form_data.get('schedule_type', config.schedule_type) if form_data else config.schedule_type) == 'interval' else '24' }}', schCron: '{{ (form_data.get('schedule_value', config.schedule_value) if form_data else config.schedule_value) if (form_data.get('schedule_type', config.schedule_type) if form_data else config.schedule_type) == 'cron' else '' }}', schEnabled: {{ 'true' if (form_data.get('schedule_enabled', config.schedule_enabled) if form_data else config.schedule_enabled) in (True, 'true', 'True', 'on') else 'false' }}}"
      onsubmit="var btn=(event && event.submitter) || document.getElementById('config-submit-btn'); if(btn){btn.disabled=true; var spinner=btn.querySelector('[data-submit-spinner]'); if(spinner){spinner.classList.remove('hidden');} var label=btn.querySelector('[data-submit-label]'); if(label){label.textContent=btn.dataset.submittingLabel || 'Saving\u2026';}}"
    >
      <input type="hidden" name="version" value="{{ config.version }}" />

      {% if local_runtime_mode %}
      <input
        type="hidden"
        name="manifest_source"
        value="{{ form_data.get('manifest_source', config.manifest_source) if form_data else config.manifest_source }}"
      />
      {% endif %}

      {% if not local_runtime_mode %}
      <div>
        <label for="name" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Configuration Name</label>
        <input
          type="text"
          name="name"
          id="name"
          value="{{ form_data.get('name', config.name) if form_data else config.name }}"
          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 text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
        />
      </div>
      {% endif %}

      {% if not local_runtime_mode %}
      <div>
        <label for="manifest_source" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Manifest Source</label>
        <select
          name="manifest_source"
          id="manifest_source"
          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 text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
        >
          <option value="gcs" {% if selected_manifest_source == 'gcs' %}selected{% endif %}>GCS bucket</option>
          <option value="manual_upload" {% if selected_manifest_source == 'manual_upload' %}selected{% endif %}>Manual upload</option>
          {% if selected_manifest_source == 'local' %}
          <option value="local" selected>Local workspace</option>
          {% endif %}
        </select>
        <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Switch to manual upload when the manifest will be uploaded by hand instead of fetched from GCS.</p>
        {% if errors and errors.get('manifest_source') %}
          <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['manifest_source'][0] }}</p>
        {% endif %}
      </div>
      {% endif %}

      {% if local_runtime_mode %}
      <div>
        <label for="local_project_path" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Local dbt Project Folder</label>
        <div class="mt-1 flex items-stretch gap-2">
          <input
            type="text"
            name="local_project_path"
            id="local_project_path"
            value="{{ form_data.get('local_project_path', config.local_project_path or '') if form_data else (config.local_project_path or '') }}"
            placeholder="/Users/you/src/my-dbt-project"
            class="min-w-0 flex-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
          />
          <button
            type="button"
            id="pick-local-folder-btn"
            class="inline-flex shrink-0 items-center gap-2 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-medium text-slate-600 dark:text-slate-200 transition-colors hover:border-slate-400 hover:text-slate-900 dark:hover:border-slate-600 dark:hover:text-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
            aria-label="Choose local dbt project folder"
          >
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5A1.5 1.5 0 014.5 6h4.379a1.5 1.5 0 011.06.44l1.12 1.12a1.5 1.5 0 001.06.44H19.5A1.5 1.5 0 0121 9.5v8A1.5 1.5 0 0119.5 19h-15A1.5 1.5 0 013 17.5v-10z" />
            </svg>
            <span id="pick-local-folder-btn-label">Browse</span>
          </button>
        </div>
        <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Governor discovers <code class="font-mono">dbt_project.yml</code>, <code class="font-mono">target/manifest.json</code>, and <code class="font-mono">target/run_results.json</code> from this folder. The GCP project is sourced only from run results.</p>
        {% if errors and errors.get('local_project_path') %}
          <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['local_project_path'][0] }}</p>
        {% endif %}
        <p id="local_project_path_picker_error" class="mt-1 hidden text-sm text-red-500 dark:text-red-400"></p>
      </div>
      {% endif %}

      {% if local_runtime_mode and selected_manifest_source in ['manual_upload', 'local'] %}
      <input
        type="hidden"
        name="github_repo"
        value="{{ form_data.get('github_repo', config.github_repo or '') if form_data else (config.github_repo or '') }}"
      />
      {% else %}
      <div
        data-signals="{repoSearch: '{{ form_data.get('github_repo', config.github_repo or '') if form_data else (config.github_repo or '') }}', repoValue: '{{ form_data.get('github_repo', config.github_repo or '') if form_data else (config.github_repo or '') }}', repoCurrentValue: '{{ config.github_repo or '' }}', repoOpen: false}"
        data-on:click__outside="$repoOpen = false"
        class="relative"
      >
        <label for="repo_search" class="block text-sm font-medium text-slate-600 dark:text-slate-300">GitHub Repository</label>
        <div class="relative mt-1">
          <input
            type="text"
            id="repo_search"
            data-bind:repo-search
            data-on:focus="$repoOpen = true; @get('/admin/configurations/search-repos')"
            data-on:input__debounce.200ms="@get('/admin/configurations/search-repos')"
            placeholder="Search repositories..."
            autocomplete="off"
            class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
          />
          <input type="hidden" name="github_repo" data-bind:repo-value />
          <div data-show="$repoLoading" class="absolute right-3 top-2.5">
            <svg class="animate-spin h-4 w-4 text-brand-500" 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"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
          </div>
        </div>
        <div data-show="$repoOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
          <div id="repo-results">
            <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
              Loading...
            </div>
          </div>
        </div>
        {% if errors and errors.get('github_repo') %}
          <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['github_repo'][0] }}</p>
        {% endif %}
      </div>
      {% endif %}

      {% if not (local_runtime_mode and selected_manifest_source in ['manual_upload', 'local']) %}
      <div>
        <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">Manifest Location</h2>
        <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">For `manual_upload`, these fields are ignored and the latest uploaded manifest is reused.</p>
        {% if errors and errors.get('manifest_location') %}
          <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['manifest_location'][0] }}</p>
        {% endif %}

        <div
          data-signals="{bucketSearch: '{{ form_data.get('bucket_name', config.bucket_name or '') if form_data else (config.bucket_name or '') }}', bucketValue: '{{ form_data.get('bucket_name', config.bucket_name or '') if form_data else (config.bucket_name or '') }}', bucketCurrentValue: '{{ config.bucket_name or '' }}', bucketOpen: false, pathSearch: '{{ form_data.get('path_prefix', config.path_prefix or '') if form_data else (config.path_prefix or '') }}', pathValue: '{{ form_data.get('path_prefix', config.path_prefix or '') if form_data else (config.path_prefix or '') }}', pathOpen: false}"
          class="mt-3 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4"
        >
          <div class="grid gap-3 md:grid-cols-3">
            <div
              data-on:click__outside="$bucketOpen = false"
              class="relative"
            >
              <label for="bucket_search" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Bucket Name</label>
              <div class="relative">
                <input
                  type="text"
                  id="bucket_search"
                  data-bind:bucket-search
                  data-on:focus="$bucketOpen = true; @get('/admin/configurations/search-buckets')"
                  data-on:input__debounce.200ms="@get('/admin/configurations/search-buckets')"
                  placeholder="Search buckets..."
                  autocomplete="off"
                  class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
                />
                <input type="hidden" name="bucket_name" id="bucket_name" data-bind:bucket-value />
                <div data-show="$bucketLoading" class="absolute right-3 top-2.5">
                  <svg class="animate-spin h-4 w-4 text-brand-500" 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"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                  </svg>
                </div>
              </div>
              <div data-show="$bucketOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
                <div id="bucket-results">
                  <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                    Loading...
                  </div>
                </div>
              </div>
            </div>
            <div
              data-on:click__outside="$pathOpen = false"
              class="relative"
            >
              <label for="path_search" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Path Prefix</label>
              <div class="relative">
                <input
                  type="text"
                  id="path_search"
                  data-bind:path-search
                  data-on:focus="$pathOpen = true; @get('/admin/configurations/search-gcs-paths')"
                  data-on:input__debounce.200ms="$pathValue = $pathSearch; @get('/admin/configurations/search-gcs-paths')"
                  placeholder="Browse directories..."
                  autocomplete="off"
                  class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
                />
                <input type="hidden" name="path_prefix" data-bind:path-value />
              </div>
              <div data-show="$pathOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
                <div id="path-results">
                  <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                    Select a bucket first
                  </div>
                </div>
              </div>
            </div>
            <div>
              <label for="object_name" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Object Name</label>
              <input
                type="text"
                name="object_name"
                id="object_name"
                value="{{ form_data.get('object_name', config.object_name or 'manifest.json') if form_data else (config.object_name or 'manifest.json') }}"
                placeholder="manifest.json"
                class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
              />
            </div>
          </div>
          <div class="mt-3 flex items-center gap-3">
            <button
              id="validate-btn"
              type="button"
              data-on:click="
                var btn = document.getElementById('validate-btn');
                var spinner = document.getElementById('validate-btn-spinner');
                var label = document.getElementById('validate-btn-label');
                if (btn) { btn.disabled = true; }
                if (spinner) { spinner.classList.remove('hidden'); }
                if (label) { label.textContent = 'Validating…'; }
                document.getElementById('validation-result').innerHTML = '';
                @post('/admin/configurations/validate-manifest', {contentType: 'form', body: {bucket_name: document.getElementById('bucket_name').value, path_prefix: $pathValue, object_name: document.getElementById('object_name').value}})
              "
              class="inline-flex items-center gap-1.5 border border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 px-3 py-1.5 text-sm font-medium text-brand-500 dark:text-brand-300 hover:bg-brand-50 dark:hover:bg-brand-700/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
            >
              <svg id="validate-btn-spinner" class="hidden h-3.5 w-3.5 animate-spin" 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"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
              </svg>
              <span id="validate-btn-label" data-validate-label>Validate</span>
            </button>
            <div id="validation-result" class="text-sm text-slate-400 dark:text-slate-500"></div>
          </div>
        </div>
      </div>
      {% endif %}

      {% if local_runtime_mode %}
      <input
        type="hidden"
        name="schedule_type"
        value="{{ form_data.get('schedule_type', config.schedule_type) if form_data else config.schedule_type }}"
      />
      <input
        type="hidden"
        name="schedule_value"
        value="{{ form_data.get('schedule_value', config.schedule_value) if form_data else config.schedule_value }}"
      />
      <input
        type="hidden"
        name="schedule_enabled"
        value="{{ form_data.get('schedule_enabled', 'true' if config.schedule_enabled else 'false') if form_data else ('true' if config.schedule_enabled else 'false') }}"
      />
      {% else %}
      {% include "configurations/_schedule_fields.html" %}
      {% endif %}

      <!-- Advanced Detection Settings -->
      <style>
        .adv-accordion-content {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 200ms ease-out;
        }
        details[open] .adv-accordion-content {
          grid-template-rows: 1fr;
        }
        .adv-accordion-inner {
          overflow: hidden;
        }
        .adv-accordion-chevron {
          transition: transform 200ms ease-out;
        }
        details[open] .adv-accordion-chevron {
          transform: rotate(180deg);
        }
      </style>

      <details id="advanced-settings" class="mt-6 border-t border-slate-200 dark:border-slate-800 pt-4"{% if local_runtime_mode %} open{% endif %}>
        <summary class="cursor-pointer list-none">
          <div class="flex items-center justify-between">
            <div>
              <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">Advanced Settings</h2>
              <p class="mt-0.5 text-sm text-slate-400 dark:text-slate-500">
                {% if local_runtime_mode and selected_manifest_source in ['manual_upload', 'local'] %}
                  Configure detection and generated solution settings for this local project.
                {% else %}
                  Configure detection and PR submission settings for this project.
                {% endif %}
              </p>
            </div>
            <svg class="adv-accordion-chevron h-5 w-5 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </div>
        </summary>

        <div class="adv-accordion-content">
          <div class="adv-accordion-inner">
            <div class="mt-4 space-y-6">
              <!-- Detection group (cloud/web only — historical detection-frequency settings + project-level rule selection) -->
              {% if not local_runtime_mode %}
              <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Detection</h3>
                <div>
                  <label for="lookback_window_days" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Lookback Window (days)</label>
                  <input
                    type="number"
                    name="lookback_window_days"
                    id="lookback_window_days"
                    value="{{ form_data.get('lookback_window_days', config.lookback_window_days or 30) if form_data else (config.lookback_window_days or 30) }}"
                    min="1"
                    class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                  />
                  <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Number of days to track detection frequency. Opportunities are reported as "detected in X of the last Y days".</p>
                  {% if errors and errors.get('lookback_window_days') %}
                    <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['lookback_window_days'][0] }}</p>
                  {% endif %}
                </div>

                <div>
                  <label for="resolution_period_days" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Resolution Period (days)</label>
                  <input
                    type="number"
                    name="resolution_period_days"
                    id="resolution_period_days"
                    value="{{ form_data.get('resolution_period_days', config.resolution_period_days or 14) if form_data else (config.resolution_period_days or 14) }}"
                    min="1"
                    class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                  />
                  <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Number of consecutive days without detection before an opportunity is marked as resolved.</p>
                  {% if errors and errors.get('resolution_period_days') %}
                    <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['resolution_period_days'][0] }}</p>
                  {% endif %}
                </div>

                <div class="border-t border-slate-200 dark:border-slate-800 pt-4 space-y-4">
                <div>
                  <p class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Watched Rules</p>
                  <p class="text-sm text-slate-400 dark:text-slate-500">Choose which optimization rules Governor watches for this project.</p>
                </div>

                {% if detection_analysis_surfaces %}
                  <div class="grid gap-2 md:grid-cols-3">
                    {% for surface in detection_analysis_surfaces %}
                      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 px-3 py-2">
                        <p class="text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300">{{ surface.title }}</p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ surface.description }}</p>
                      </div>
                    {% endfor %}
                  </div>
                {% endif %}

                  {% if unknown_watched_rule_types %}
                    <div class="border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300">
                      Some stored rule ids are no longer available: {{ unknown_watched_rule_types | join(', ') }}.
                    </div>
                  {% endif %}

                  <div class="space-y-2">
                    <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                      <input
                        type="radio"
                        name="watched_rules_mode"
                        value="all"
                        {% if watched_rules_mode == 'all' %}checked{% endif %}
                        class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                      />
                      <span>
                        <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Use all enabled rules</span>
                        <span class="block text-sm text-slate-400 dark:text-slate-500">Inherit the full set of globally enabled detection rules, including future additions.</span>
                      </span>
                    </label>

                    <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                      <input
                        type="radio"
                        name="watched_rules_mode"
                        value="custom"
                        {% if watched_rules_mode == 'custom' %}checked{% endif %}
                        class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                      />
                      <span>
                        <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Custom selection</span>
                        <span class="block text-sm text-slate-400 dark:text-slate-500">Only run the checked rules for this project.</span>
                      </span>
                    </label>
                  </div>

                  <div
                    id="watched-rules-custom"
                    class="{% if watched_rules_mode != 'custom' %}hidden {% endif %}space-y-3 border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3"
                  >
                    {% if detection_rule_groups %}
                      {% for group in detection_rule_groups %}
                        <section class="border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/60 p-4" data-rule-group-panel="{{ group.key }}">
                          <label class="flex items-start gap-3">
                            <input
                              type="checkbox"
                              data-rule-group-master="{{ group.key }}"
                              class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                            />
                            <span class="min-w-0 flex-1">
                              <span class="flex flex-wrap items-center gap-2">
                                <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ group.title }}</span>
                                <span class="ui-pill ui-pill-neutral">{{ group.rules | length }} rules</span>
                                {% for surface_summary in group.analysis_surface_summaries %}
                                  <span class="ui-pill ui-pill-neutral">{{ surface_summary.title }} · {{ surface_summary.count }}</span>
                                {% endfor %}
                              </span>
                              <span class="mt-1 block text-sm text-slate-500 dark:text-slate-400">{{ group.description }}</span>
                            </span>
                          </label>
                          <div class="mt-3 space-y-1 border-t border-slate-200 dark:border-slate-800 pt-3 pl-7">
                            {% for rule in group.rules %}
                              <label class="flex items-start gap-3 rounded-md px-2 py-2 hover:bg-slate-50 dark:hover:bg-slate-900/70">
                                <input
                                  type="checkbox"
                                  name="watched_rule_types"
                                  value="{{ rule.rule_type }}"
                                  data-rule-group-child="{{ group.key }}"
                                  {% if rule.rule_type in selected_watched_rule_types %}checked{% endif %}
                                  class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                                />
                                <span class="min-w-0">
                                  <span class="flex flex-wrap items-center gap-2">
                                    <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ rule.display_name }}</span>
                                    <span class="ui-pill ui-pill-neutral">{{ rule.analysis_surface_title }}</span>
                                    {% if rule.rule_type in disabled_rule_types %}
                                      <span class="ui-pill ui-pill-warning">Globally disabled</span>
                                    {% endif %}
                                  </span>
                                  <span class="mt-1 block text-sm text-slate-500 dark:text-slate-400">{{ rule.description }}</span>
                                  <span class="mt-1 block text-sm text-slate-400 dark:text-slate-500">{{ rule.analysis_surface_description }}</span>
                                  {% if rule.rule_type in disabled_rule_types %}
                                    <span class="mt-1 block text-sm text-amber-600 dark:text-amber-300">This rule stays unavailable at runtime until it is re-enabled globally.</span>
                                  {% endif %}
                                </span>
                              </label>
                            {% endfor %}
                          </div>
                        </section>
                      {% endfor %}
                    {% else %}
                      <p class="text-sm text-slate-500 dark:text-slate-400">No project-level detection rules are currently registered.</p>
                    {% endif %}
                    <p class="text-sm text-slate-400 dark:text-slate-500">Leaving every rule unchecked is valid and means Governor will skip project-level detection for this configuration.</p>
                  </div>

                  {% if errors and errors.get('watched_rule_types') %}
                    <p class="text-sm text-red-500 dark:text-red-400">{{ errors['watched_rule_types'][0] }}</p>
                  {% endif %}
                </div>
              </div>
              {% endif %}

              <!-- Solution guardrails group -->
              <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Solution Guardrails</h3>

                <div>
                  <p class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Allowed Solution Types</p>
                  <p class="text-sm text-slate-400 dark:text-slate-500">Choose which remediation families Governor may generate for this project. Detection still runs independently.</p>
                </div>

                {% if unknown_solution_policy_tags %}
                  <div class="border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300">
                    Some stored solution policy tags are no longer available: {{ unknown_solution_policy_tags | join(', ') }}.
                  </div>
                {% endif %}

                <div class="space-y-2">
                  <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                    <input
                      type="radio"
                      name="solution_guardrails_mode"
                      value="all"
                      {% if solution_guardrails_mode == 'all' %}checked{% endif %}
                      class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                    />
                    <span>
                      <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Allow all supported solution types</span>
                      <span class="block text-sm text-slate-400 dark:text-slate-500">Inherit the full set of supported solution families, including future additions.</span>
                    </span>
                  </label>

                  <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                    <input
                      type="radio"
                      name="solution_guardrails_mode"
                      value="custom"
                      {% if solution_guardrails_mode == 'custom' %}checked{% endif %}
                      class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                    />
                    <span>
                      <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Custom allow-list</span>
                      <span class="block text-sm text-slate-400 dark:text-slate-500">Only the checked remediation families may be generated or stored for this project.</span>
                    </span>
                  </label>
                </div>

                <div
                  id="solution-guardrails-custom"
                  class="{% if solution_guardrails_mode != 'custom' %}hidden {% endif %}space-y-3 border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3"
                >
                  {% if solution_policy_catalog %}
                    {% for policy in solution_policy_catalog %}
                      <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 px-3 py-3">
                        <input
                          type="checkbox"
                          name="allowed_solution_policy_tags"
                          value="{{ policy.policy_tag }}"
                          {% if policy.policy_tag in selected_solution_policy_tags %}checked{% endif %}
                          class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                        />
                        <span class="min-w-0">
                          <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">{{ policy.display_name }}</span>
                          <span class="mt-1 block text-sm text-slate-500 dark:text-slate-400">{{ policy.description }}</span>
                        </span>
                      </label>
                    {% endfor %}
                  {% else %}
                    <p class="text-sm text-slate-500 dark:text-slate-400">No solution policy tags are currently registered.</p>
                  {% endif %}
                  <p class="text-sm text-slate-400 dark:text-slate-500">Leaving every policy unchecked is valid and means Governor can still detect opportunities, but it will not store new solutions for this project.</p>
                </div>

                {% if errors and errors.get('allowed_solution_policy_tags') %}
                  <p class="text-sm text-red-500 dark:text-red-400">{{ errors['allowed_solution_policy_tags'][0] }}</p>
                {% endif %}

                {# Spec 124: auto-run shadow validation for Safe solutions #}
                <div class="border-t border-slate-200 dark:border-slate-800 pt-4">
                  <label class="flex items-start gap-3">
                    <input
                      type="checkbox"
                      name="auto_shadow_validate_safe_solutions"
                      value="on"
                      {% if config.auto_shadow_validate_safe_solutions %}checked{% endif %}
                      class="mt-1 h-4 w-4 rounded border-slate-300 dark:border-slate-700 text-brand-500 focus:ring-brand-500"
                    />
                    <span class="min-w-0">
                      <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Auto-validate Safe solutions</span>
                      <span class="mt-1 block text-sm text-slate-500 dark:text-slate-400">
                        When a newly-generated solution is tagged <span class="font-medium text-slate-700 dark:text-slate-300">Safe</span> (low-risk), automatically run a shadow comparison — no manual click required. Review and High Risk solutions are unaffected.
                      </span>
                      <span class="mt-1 block text-sm text-amber-600 dark:text-amber-400">
                        Each run executes your dbt cascade <span class="font-medium">twice</span> against BigQuery and incurs real query cost.
                      </span>
                    </span>
                  </label>
                </div>
              </div>

              {# Local working tree info card removed — redundant; users
                 already set the dbt folder above. In local mode we skip
                 the PR Submission group; in cloud mode it renders below. #}
              {% if not (local_runtime_mode and selected_manifest_source in ['manual_upload', 'local']) %}
              <!-- PR Submission group -->
              <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">PR Submission</h3>
                <div>
                  {% set auto_pr_val = form_data.get('auto_pr_trust_tier', config.auto_pr_trust_tier or '') if form_data else (config.auto_pr_trust_tier or '') %}
                  <label for="auto_pr_trust_tier" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Auto-PR Trust Tier</label>
                  <select
                    name="auto_pr_trust_tier"
                    id="auto_pr_trust_tier"
                    class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                  >
                    <option value="" {% if not auto_pr_val %}selected{% endif %}>Use organisation default</option>
                    <option value="disabled" {% if auto_pr_val == 'disabled' %}selected{% endif %}>Disabled</option>
                    <option value="guaranteed_safe" {% if auto_pr_val == 'guaranteed_safe' %}selected{% endif %}>Guaranteed Safe only</option>
                    <option value="validated" {% if auto_pr_val == 'validated' %}selected{% endif %}>Validated and above</option>
                    <option value="requires_review" {% if auto_pr_val == 'requires_review' %}selected{% endif %}>All (including Requires Review)</option>
                  </select>
                  <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Override the organisation-level auto-PR threshold for this project. Leave as "Use organisation default" to inherit the global setting.</p>
                </div>
              </div>
              {% endif %}

              <!-- Solution Generation group -->
              <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Solution Generation</h3>
                <div>
                  <label for="min_solution_cost_usd" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Minimum Query Cost (USD)</label>
                  <div class="flex items-center gap-2">
                    <span class="text-sm text-slate-400 dark:text-slate-500">$</span>
                    <input
                      type="number"
                      name="min_solution_cost_usd"
                      id="min_solution_cost_usd"
                      value="{{ form_data.get('min_solution_cost_usd', config.min_solution_cost_usd or '') if form_data else (config.min_solution_cost_usd or '') }}"
                      min="0"
                      step="0.01"
                      placeholder="5.00"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    />
                  </div>
                  <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Only generate solutions for opportunities where the query cost exceeds this amount. Opportunities below this threshold are still detected but won't receive solutions. Default: $5.00.</p>
                  {% if errors and errors.get('min_solution_cost_usd') %}
                    <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['min_solution_cost_usd'][0] }}</p>
                  {% endif %}
                </div>
              </div>

              <!-- Storage Billing group -->
              <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Storage Billing</h3>
                <div>
                  <label for="storage_billing_min_savings_usd" class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Minimum Monthly Savings (USD)</label>
                  <div class="flex items-center gap-2">
                    <span class="text-sm text-slate-400 dark:text-slate-500">$</span>
                    <input
                      type="number"
                      name="storage_billing_min_savings_usd"
                      id="storage_billing_min_savings_usd"
                      value="{{ form_data.get('storage_billing_min_savings_usd', config.storage_billing_min_savings_usd or '') if form_data else (config.storage_billing_min_savings_usd or '') }}"
                      min="0"
                      step="0.01"
                      placeholder="0.00"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    />
                    <span class="text-sm text-slate-400 dark:text-slate-500">/month</span>
                  </div>
                  <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Only surface storage billing opportunities where switching to physical billing saves at least this amount per month. Leave blank to show all datasets with any savings.</p>
                  {% if errors and errors.get('storage_billing_min_savings_usd') %}
                    <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['storage_billing_min_savings_usd'][0] }}</p>
                  {% endif %}
                </div>
              </div>

            </div>
          </div>
        </div>
      </details>

      <div class="flex items-center gap-4 pt-4 border-t border-slate-200 dark:border-slate-800">
        <button
          type="submit"
          name="post_update_action"
          value="save"
          id="config-submit-btn"
          data-submitting-label="Saving\u2026"
          class="ui-btn-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <svg class="animate-spin h-4 w-4 text-white hidden" data-submit-spinner 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"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span data-submit-label>Save Changes</span>
        </button>
        <button
          type="submit"
          name="post_update_action"
          value="save_rerun_detection"
          data-submitting-label="Saving &amp; queueing detection\u2026"
          {% if config.status != 'active' or not last_completed_sync %}disabled{% endif %}
          class="ui-btn-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          title="{% if config.status != 'active' %}Enable this configuration to run detection.{% elif not last_completed_sync %}A completed sync is required before detection can be re-run.{% endif %}"
        >
          <svg class="animate-spin h-4 w-4 hidden" data-submit-spinner 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"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span data-submit-label>Save &amp; Re-run Detection</span>
        </button>
        <a href="/admin/configurations" class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 transition-colors">Back to list</a>
      </div>
    </form>

    <!-- Status actions -->
    <div class="mt-8 flex items-center gap-4 pt-6 border-t border-slate-200 dark:border-slate-800">
      {% if config.status == 'active' %}
        <form method="post" action="/admin/configurations/{{ config.id }}/disable" class="inline">
          <button
            type="submit"
            class="border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 px-4 py-2 text-sm font-medium text-amber-600 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-colors"
          >Disable</button>
        </form>
      {% else %}
        <form method="post" action="/admin/configurations/{{ config.id }}/enable" class="inline">
          <button
            type="submit"
            class="border border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 px-4 py-2 text-sm font-medium text-brand-500 dark:text-brand-300 hover:bg-brand-50 dark:hover:bg-brand-700/40 transition-colors"
          >Enable</button>
        </form>
      {% endif %}

      <form method="post" action="/admin/configurations/{{ config.id }}/delete" class="inline" onsubmit="return confirm('Are you sure you want to permanently delete this configuration?')">
        <button
          type="submit"
          class="border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors"
        >Delete</button>
      </form>
    </div>

    <!-- Audit info -->
    <div class="mt-6 grid gap-4 md:grid-cols-2 text-sm text-slate-400 dark:text-slate-500 border-t border-slate-200 dark:border-slate-800 pt-4">
      <div>
        <span class="font-medium text-slate-500 dark:text-slate-400">Created:</span>
        {{ config.created_at.strftime('%Y-%m-%d %H:%M UTC') }}
      </div>
      <div>
        <span class="font-medium text-slate-500 dark:text-slate-400">Last updated:</span>
        {{ config.updated_at.strftime('%Y-%m-%d %H:%M UTC') }}
      </div>
    </div>
  </section>
  {% if config.status == 'active' %}
  <script>
  (function() {
    const configId = {{ config.id | tojson }};
    const pollIntervalMs = 5000;
    let pollTimer = null;
    let sawActiveSync = Boolean(document.querySelector('#sync-status[data-sync-active="true"]'));
    let reloadScheduled = false;

    function getSyncButton() {
      return document.getElementById('sync-now-btn');
    }

    function setSyncButtonState(isSyncing) {
      const btn = getSyncButton();
      if (!btn) return;
      btn.disabled = isSyncing;
      const spinner = btn.querySelector('.sync-spinner');
      if (spinner) spinner.classList.toggle('hidden', !isSyncing);
      const label = btn.querySelector('.sync-label');
      if (label) label.textContent = isSyncing ? 'Syncing…' : 'Sync Now';
    }

    function clearPollTimer() {
      if (pollTimer) {
        window.clearTimeout(pollTimer);
        pollTimer = null;
      }
    }

    function schedulePoll() {
      clearPollTimer();
      pollTimer = window.setTimeout(refreshSyncStatus, pollIntervalMs);
    }

    function refreshSyncStatus() {
      const container = document.getElementById('sync-status-container');
      if (!container) return;

      fetch('/admin/configurations/' + configId + '/sync-status')
        .then((response) => response.text())
        .then((html) => {
          const currentContainer = document.getElementById('sync-status-container');
          if (!currentContainer) return;

          currentContainer.outerHTML = html;

          const activeSync = document.querySelector('#sync-status[data-sync-active="true"]');
          if (activeSync) {
            sawActiveSync = true;
            setSyncButtonState(true);
            schedulePoll();
            return;
          }

          setSyncButtonState(false);
          clearPollTimer();

          const finishedSync = document.querySelector('#sync-status[data-sync-status]');
          const finishedStatus = finishedSync ? finishedSync.dataset.syncStatus : '';
          if (finishedStatus) updateSyncStatusTag(finishedStatus);
          renderSyncFailure(finishedSync);

          if (sawActiveSync && finishedStatus === 'completed' && !reloadScheduled) {
            reloadScheduled = true;
            window.setTimeout(function() {
              window.location.href = '/dashboard?message=' + encodeURIComponent('Sync completed for {{ config.name }}.') + '&level=success';
            }, 250);
          }
        })
        .catch((error) => {
          console.error('Sync status refresh failed:', error);
          if (sawActiveSync) {
            schedulePoll();
          } else {
            setSyncButtonState(false);
          }
        });
    }

    function updateSyncStatusTag(status) {
      var tag = document.getElementById('sync-status-tag');
      if (!tag) {
        tag = document.createElement('span');
        tag.id = 'sync-status-tag';
        tag.className = 'ui-pill';
        var btn = getSyncButton();
        if (btn && btn.parentNode) btn.parentNode.appendChild(tag);
      }
      tag.className = 'ui-pill ' + (
        status === 'completed' ? 'ui-pill-success' :
        status === 'failed' ? 'ui-pill-danger' :
        'ui-pill-blue'
      );
      tag.textContent = status.replace('_', ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
    }

    function renderSyncFailure(syncNode) {
      var panel = document.getElementById('sync-failure-log');
      if (!panel) return;

      var status = syncNode ? syncNode.dataset.syncStatus : '';
      if (status !== 'failed') {
        panel.classList.add('hidden');
        return;
      }

      var message = document.getElementById('sync-failure-message');
      var list = document.getElementById('sync-failure-errors');
      var errors = Array.prototype.slice.call(syncNode.querySelectorAll('[data-sync-error-message]'));
      var lastError = syncNode.dataset.syncLastError || '';

      if (message) {
        message.textContent = lastError || (errors[0] ? errors[0].dataset.syncErrorMessage : 'Governor could not complete the sync.');
      }

      if (list) {
        list.replaceChildren();
        errors.forEach(function(errorNode) {
          var item = document.createElement('div');
          item.className = 'border border-red-300/80 dark:border-red-500/30 bg-white/50 dark:bg-red-950/30 px-3 py-2';

          var title = document.createElement('p');
          title.className = 'font-medium';
          title.textContent = errorNode.dataset.syncErrorType + (errorNode.dataset.syncErrorStep ? ' at ' + errorNode.dataset.syncErrorStep : '');

          var detail = document.createElement('p');
          detail.className = 'mt-1 text-red-600 dark:text-red-300/90';
          detail.textContent = errorNode.dataset.syncErrorMessage;

          item.appendChild(title);
          item.appendChild(detail);
          list.appendChild(item);
        });
      }

      panel.classList.remove('hidden');
    }

    const syncButton = getSyncButton();
    if (syncButton) {
      syncButton.addEventListener('click', function() {
        sawActiveSync = true;
        setSyncButtonState(true);
        renderSyncFailure(null);
        updateSyncStatusTag('in_progress');
        schedulePoll();
      });
    }

    renderSyncFailure(document.querySelector('#sync-status[data-sync-status]'));

    if (sawActiveSync) {
      setSyncButtonState(true);
      schedulePoll();
    }
  })();
  </script>
  {% endif %}
  <script>
  (function() {
    function wireCustomPanel(radioName, panelId) {
      const panel = document.getElementById(panelId);
      if (!panel) return;

      const radios = document.querySelectorAll(`input[name="${radioName}"]`);
      function syncMode() {
        const selected = document.querySelector(`input[name="${radioName}"]:checked`);
        const isCustom = selected && selected.value === 'custom';
        panel.classList.toggle('hidden', !isCustom);
      }

      radios.forEach((radio) => radio.addEventListener('change', syncMode));
      syncMode();
    }

    function syncRuleGroupState(scope, groupKey) {
      const master = scope.querySelector(`[data-rule-group-master="${groupKey}"]`);
      if (!master) return;

      const inputs = Array.from(
        scope.querySelectorAll(`input[type="checkbox"][data-rule-group-child="${groupKey}"]`)
      );
      const checkedCount = inputs.filter((input) => input.checked).length;

      master.checked = inputs.length > 0 && checkedCount === inputs.length;
      master.indeterminate = checkedCount > 0 && checkedCount < inputs.length;
    }

    function wireRuleGroupCheckboxes(scopeId) {
      const scope = document.getElementById(scopeId);
      if (!scope) return;

      scope.querySelectorAll('[data-rule-group-master]').forEach((master) => {
        master.addEventListener('change', function() {
          const groupKey = master.dataset.ruleGroupMaster;
          const inputs = scope.querySelectorAll(
            `input[type="checkbox"][data-rule-group-child="${groupKey}"]`
          );
          inputs.forEach((input) => {
            input.checked = master.checked;
          });
          syncRuleGroupState(scope, groupKey);
        });
      });

      scope.querySelectorAll('[data-rule-group-child]').forEach((input) => {
        input.addEventListener('change', function() {
          syncRuleGroupState(scope, input.dataset.ruleGroupChild);
        });
      });

      scope.querySelectorAll('[data-rule-group-master]').forEach((master) => {
        syncRuleGroupState(scope, master.dataset.ruleGroupMaster);
      });
    }

    function wireLocalFolderPicker() {
      const button = document.getElementById('pick-local-folder-btn');
      const buttonLabel = document.getElementById('pick-local-folder-btn-label');
      const input = document.getElementById('local_project_path');
      const error = document.getElementById('local_project_path_picker_error');
      if (!button || !buttonLabel || !input || !error) return;

      button.addEventListener('click', async function() {
        button.disabled = true;
        buttonLabel.textContent = 'Opening…';
        error.textContent = '';
        error.classList.add('hidden');

        try {
          const response = await fetch('/admin/configurations/pick-local-folder', {
            method: 'POST',
            headers: { 'X-Requested-With': 'fetch' },
          });
          const data = await response.json().catch(function() { return {}; });

          if (!response.ok || !data.path) {
            throw new Error(data.error || data.detail || 'Unable to open the native folder picker.');
          }

          input.value = data.path;
          input.dispatchEvent(new Event('input', { bubbles: true }));
          input.dispatchEvent(new Event('change', { bubbles: true }));
          input.focus();
        } catch (pickerError) {
          error.textContent = pickerError.message || 'Unable to open the native folder picker.';
          error.classList.remove('hidden');
        } finally {
          button.disabled = false;
          buttonLabel.textContent = 'Browse';
        }
      });
    }

    wireCustomPanel('watched_rules_mode', 'watched-rules-custom');
    wireCustomPanel('solution_guardrails_mode', 'solution-guardrails-custom');
    wireRuleGroupCheckboxes('watched-rules-custom');
    wireLocalFolderPicker();
  })();
  </script>
{% endblock %}