{% extends "base.html" %}
{% block title %}Perimeter Drift | Programs{% endblock %}
{% block content %}
<section class="rounded-2xl border border-zinc-800 bg-zinc-950/70 p-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <p class="text-xs uppercase tracking-[0.24em] text-zinc-500">Program Discovery</p>
      <h1 class="mt-2 text-3xl text-white">Scope Search</h1>
    </div>
  </div>
  <form class="mt-6 flex flex-col gap-3 sm:flex-row" method="get" action="{{ url_for('search') }}">
    <input value="{{ query }}" name="q" id="q" placeholder="Search programs, scopes, and runbooks..." class="w-full rounded-lg border border-zinc-700 bg-black px-4 py-2.5 text-zinc-100 outline-none transition focus:border-ember">
    <button class="rounded-lg bg-ember px-4 py-2.5 text-sm font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-red-600">Search</button>
  </form>
</section>

<section class="mt-6 rounded-2xl border border-zinc-800 bg-black/60 p-6">
  <div class="mb-4 flex items-center justify-between">
    <h2 class="text-lg text-white">Results</h2>
    <p id="result-count" class="text-xs uppercase tracking-[0.2em] text-zinc-500">0 entries</p>
  </div>
  <div id="results" class="grid gap-3"></div>
</section>
<script type="module" src="{{ url_for('static', filename='js/search.js') }}"></script>
{% endblock %}
