{% extends "base.html" %}
{% load static %}
{% comment %}Auth pages give their own per-button feedback (.btn-loading); the full-page
   nav scrim would needlessly dim the brand imagery, so suppress it here.{% endcomment %}
{% block nav_overlay %}{% endblock %}
{% block body %}
<div class="flex min-h-screen bg-ruforum-surface">

  {# ── Brand panel: hero photograph + solid footer band ──────── #}
  <aside class="hidden lg:flex lg:w-[55%] xl:w-[58%] shrink-0 flex-col bg-ruforum-topbar">
    {# Photograph — fills the upper region #}
    <div class="relative flex-1 min-h-0 overflow-hidden">
      <img
        src="{% static 'img/brand/login.jpg' %}"
        alt="RUFORUM researchers reviewing crop data on a tablet in the field"
        width="1408" height="768"
        fetchpriority="high"
        decoding="async"
        class="absolute inset-0 h-full w-full object-cover object-center">
    </div>

    {# Solid dark-brown band — logo, tagline, copyright #}
    <div class="shrink-0 bg-ruforum-topbar px-10 py-8 text-white">
      <a href="/" class="inline-block rounded-lg focus:outline-none focus:ring-2 focus:ring-white/40">
        <img src="{% static 'img/brand/logo.png' %}" alt="RUFORUM"
             class="h-9 w-auto object-contain brightness-0 invert opacity-95">
      </a>
      <h1 class="mt-5 font-display text-2xl font-bold leading-snug text-white">
        Integrated Information, Learning &amp; Management Platform
      </h1>
      <p class="mt-3 max-w-xl text-sm leading-relaxed text-white/60">
        Research infrastructure, grants, e-learning, and knowledge management —
        unified for RUFORUM member universities.
      </p>
      <p class="mt-6 font-meta text-[0.6875rem] tracking-[0.08em] text-white/35">
        &copy; {% now "Y" %} RUFORUM Secretariat
      </p>
    </div>
  </aside>

  {# ── Form panel ────────────────────────────────────────────── #}
  <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
    {# Mobile logo #}
    <div class="mb-8 lg:hidden">
      <img src="{% static 'img/brand/logo.png' %}" alt="RUFORUM" class="h-10 w-auto object-contain">
    </div>

    <div class="w-full {% block auth_card_width %}max-w-sm{% endblock %}">
      <div class="rounded-2xl border border-ruforum-border bg-white px-8 py-10 shadow-auth">
        {% block content %}{% endblock %}
      </div>
    </div>
  </div>

</div>
{% endblock %}