{% load i18n static %}
<!doctype html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="{{ settings_obj.theme_color }}">
    <title>{% trans "Offline" %}</title>
    <link rel="stylesheet" href="{% static 'mobileapp/css/offline.css' %}">
    <style>
        :root {
            --theme: {{ settings_obj.theme_color }};
            --background: {{ settings_obj.background_color }};
            --foreground: {{ settings_obj.foreground_color }};
        }
    </style>
</head>
<body>
    <main class="offline-card">
        <div class="offline-pill">{% trans "Offline mode" %}</div>
        <h1>{% trans "You are offline" %}</h1>
        <p>{% trans "This page is the default offline fallback for the mobile app plugin. Reconnect to continue loading the live website inside the generated app shell." %}</p>
    </main>
</body>
</html>
