{% extends "base.html" %}
{% block title %}Perimeter Drift | New Report{% endblock %}
{% block content %}
<section class="rounded-2xl border border-zinc-800 bg-zinc-950/70 p-6">
  <p class="text-xs uppercase tracking-[0.24em] text-red-200">New Disclosure Report</p>
  <h1 class="mt-2 text-3xl text-white">Submit Finding</h1>
  <p class="mt-3 max-w-2xl text-sm leading-relaxed text-zinc-300">
    Provide a short title, classify the issue, and include a technical report covering root cause, impact, and a minimal proof of concept.
  </p>
</section>

<section class="mt-6 rounded-2xl border border-zinc-800 bg-black/60 p-6">
  <form method="post" class="grid gap-4">
    <label class="grid gap-2">
      <span class="text-xs uppercase tracking-[0.2em] text-zinc-500">Title</span>
      <input required name="title" placeholder="PHP sandbox escape" class="w-full rounded-lg border border-zinc-700 bg-black px-3 py-2 text-sm text-zinc-100 outline-none transition focus:border-ember">
    </label>

    <label class="grid gap-2">
      <span class="text-xs uppercase tracking-[0.2em] text-zinc-500">Vulnerability Type</span>
      <select required name="vuln_type" class="w-full rounded-lg border border-zinc-700 bg-black px-3 py-2 text-sm text-zinc-100 outline-none transition focus:border-ember">
        <option value="" disabled selected>Select a type</option>
        {% for t in vuln_types %}
        <option value="{{ t }}">{{ t }}</option>
        {% endfor %}
      </select>
    </label>

    <label class="grid gap-2">
      <span class="text-xs uppercase tracking-[0.2em] text-zinc-500">Report</span>
      <textarea required name="report" rows="16" placeholder="Describe root cause, exploit flow, and impact." class="w-full rounded-xl border border-zinc-700 bg-black p-3 text-sm text-zinc-200 outline-none transition focus:border-ember"></textarea>
    </label>

    <div class="grid gap-3 md:grid-cols-2">
      <a href="{{ url_for('reports_index') }}" class="rounded-md border border-zinc-700 px-4 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200 transition hover:border-ember hover:text-white">Cancel</a>
      <button class="rounded-md bg-ember px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-red-600">Create Report</button>
    </div>
  </form>
</section>
{% endblock %}
