{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Site Under Construction{% endblock %}

{% block extra_head %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
{% endblock %}

{% block admin_content %}
{{ mh::management_header_simple(
    title="Site Under Construction",
    subtitle="Preview the public page and configure copy in plugin settings."
) }}

<div class="suc-admin-panel">
    <div class="suc-admin-status">
        <span class="suc-admin-status-label">Mode:</span>
        {% if construction_enabled %}
        <span class="badge badge-warning">Active — visitors see only this page</span>
        {% else %}
        <span class="badge badge-secondary">Off — site is public</span>
        {% endif %}
    </div>

    <p class="text-muted suc-admin-help">
        Turn on <strong>Under construction mode</strong> in this plugin's settings
        (Admin → Settings → Apps, or the plugin settings panel). Title, message, and
        the administrator link are also configured there.
    </p>

    <div class="suc-admin-preview">
        <h3 class="suc-admin-preview-heading">Preview</h3>
        <div class="suc-container suc-container--preview">
            <div class="suc-bg" aria-hidden="true">
                <span class="suc-blob suc-blob--1"></span>
                <span class="suc-blob suc-blob--2"></span>
            </div>
            <div class="suc-card">
                <div class="suc-sticker" aria-hidden="true">
                    <span class="suc-sticker-ring"></span>
                    <span class="suc-sticker-emoji">🚧</span>
                </div>
                <p class="suc-kicker">Something cool is cooking</p>
                <h1 class="suc-title">{{ construction_title | default(value="Site Under Construction") }}</h1>
                <p class="suc-message">{{ construction_message | default(value="We're building something new. Please check back soon.") }}</p>
                {% if check_back_date %}
                <div class="suc-checkback-pill">
                    <i class="fas fa-calendar-check" aria-hidden="true"></i>
                    <span>Check back {{ check_back_date | date_in_tz(timezone=settings.timezone, format="%B %d, %Y") }}</span>
                </div>
                {% endif %}
                {% if show_admin_link | default(value=true) %}
                <div class="suc-footer">
                    <p class="suc-admin-note">Are you the administrator?</p>
                    <a href="/auth/login?return=/admin" class="suc-admin-link">
                        Log in to Admin
                        <i class="fas fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <p class="text-muted small">
        <a href="/plugins/site-under-construction/" target="_blank" rel="noopener">Open public page</a>
        (admins are not redirected while logged in).
    </p>
</div>
{% endblock %}