{% extends "base.html" %}
{% load static %}
{% block title %}Offline · IILMP{% endblock %}

{% block body %}
<main id="main-content" class="min-h-screen flex items-center justify-center px-6 py-16 bg-ruforum-surface-warm">
  <div class="max-w-xl text-center">
    <img src="{% static 'img/brand/logo.png' %}" alt="IILMP — RUFORUM" class="mx-auto h-16 w-auto" />
    <p class="mt-6 font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">You're offline</p>
    <h1 class="mt-2 font-display text-3xl font-semibold tracking-tight text-ruforum-text">No network connection</h1>
    <p class="mt-3 max-w-md mx-auto text-sm leading-relaxed text-ruforum-text-muted">
      The page you requested couldn't be loaded because the device is offline. Once your connection returns, refreshing this tab will resume where you left off.
    </p>
    <div class="mt-6 flex flex-wrap items-center justify-center gap-2">
      <button type="button" onclick="window.location.reload();" class="btn-primary">Try again</button>
      <a href="/" class="btn-secondary">Home</a>
    </div>
    <p class="mt-10 font-meta text-[10px] uppercase tracking-[0.14em] text-ruforum-text-muted">RUFORUM · Integrated Information &amp; Lifelong Learning</p>
  </div>
</main>
{% endblock %}