JOIN_FORM_HTML = r"""{% extends "base.html" %}
{% block title %}BuffTEKS VIP Server Access — {{ brand }}{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto card p-6">
  <h1 class="text-2xl font-bold">BuffTEKS VIP Server Access</h1>
  <p class="text-white/70 mt-1">
    Hi <b>{{ user.username }}</b>! The <span class="font-semibold text-purple-400">BuffTEKS VIP Server</span> is our private collaboration space for active members.
  </p>
  <p class="mt-2 text-white/60 text-sm">
    To gain access, you’ll: <b>1)</b> join BuffTEKS, <b>2)</b> perform the
    <span class="font-semibold text-purple-400">Git Commit Ritual</span>, and <b>3)</b> commit to a project team.
  </p>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="mt-3 space-y-2">
        {% for cat,msg in messages %}
          <div class="rounded-lg px-3 py-2 text-sm {{ 'bg-red-500/20 border border-red-400/40' if cat=='error' else 'bg-white/10 border border-white/20' }}">{{ msg }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}

  <form method="post" class="mt-4 grid gap-3">
    <input type="hidden" name="next" value="{{ next_url }}" />

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div>
        <label class="text-xs text-white/60">First name</label>
        <input name="first_name" value="{{ first_name or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" required />
      </div>
      <div>
        <label class="text-xs text-white/60">Last name</label>
        <input name="last_name" value="{{ last_name or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" required />
      </div>
    </div>

    <div>
      <label class="text-xs text-white/60">Major</label>
      <input name="major" value="{{ major or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" required />
    </div>

    <div>
      <label class="text-xs text-white/60">Student Email</label>
      <input type="email" inputmode="email" autocomplete="email" name="student_email" value="{{ student_email or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" placeholder="you@buffs.wtamu.edu" required />
    </div>

    <div>
      <label class="text-xs text-white/60">Which BuffTEKS project/team are you joining?</label>
      <input name="commitment" value="{{ commitment or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" placeholder="Web Dev, Outreach, AI Research, Infrastructure…" required />
    </div>

    <div>
      <label class="text-xs text-white/60">Describe your energy in a single commit message (optional)</label>
      <input name="commit_message" value="{{ commit_message or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-3 text-base" placeholder='feat: ready to ship greatness 🚀' />
    </div>

    <button class="btn-accent btn-block mt-2">Request VIP Access</button>
  </form>

  <pre class="mt-4 text-xs text-white/40 bg-black/30 rounded-xl p-3 overflow-auto">
$ git add me
$ git commit -m "{{ commit_message or 'chore: joined BuffTEKS, ready to contribute' }}"
$ git push origin greatness
  </pre>
</div>
{% endblock %}
"""