{% extends "base.html" %}
{% block title %}Perimeter Drift | Profile{% endblock %}
{% block content %}
<section class="grid gap-6 xl:grid-cols-[1.1fr_1fr]">
  <article class="rounded-2xl border border-zinc-800 bg-zinc-950/70 p-6">
    <p class="text-xs uppercase tracking-[0.24em] text-zinc-500">Research Identity</p>
    <h1 class="mt-2 text-3xl text-white">Profile</h1>
    <p class="mt-3 text-sm text-zinc-300">
      Keep your contact context and focus areas up to date to help routing and follow-ups during coordinated disclosure.
    </p>

    <form method="post" class="mt-6 grid gap-4">
      <label class="grid gap-2">
        <span class="text-xs uppercase tracking-[0.2em] text-zinc-500">Bio</span>
        <textarea {% if not editable %}readonly{% endif %} name="bio" rows="12" class="w-full rounded-xl border border-zinc-700 bg-black p-3 text-sm text-zinc-200 outline-none transition focus:border-ember">{{ bio }}</textarea>
      </label>
      {% if editable %}
      <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">Save Profile</button>
      {% else %}
      <p class="text-xs text-zinc-500">Read-only view. You can only edit your own profile.</p>
      {% endif %}
    </form>
  </article>

  <article class="rounded-2xl border border-zinc-800 bg-black/60 p-6">
    <h2 class="text-lg text-white">Preview</h2>
    <pre class="mt-4 rounded-xl border border-zinc-800 bg-zinc-950/60 p-4 text-sm text-zinc-200">{{ bio }}</pre>
  </article>
</section>
{% endblock %}
