{% extends "base.html" %}

{% block title %}{{ dashboard_title }} | PMS{% endblock %}

{% block extra_css %}
<style>
    .placeholder-shell {
        max-width: 1240px;
        margin: 0 auto;
    }

    .placeholder-card {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #e5e7eb;
        border-radius: 1rem;
        box-shadow: 0 20px 35px rgba(16, 24, 40, 0.09);
        padding: 1.4rem;
    }

    .placeholder-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 0.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ede9fe;
        color: #433185;
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .placeholder-title {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
        color: #111827;
    }

    .placeholder-sub {
        margin: 0.35rem 0 1.1rem;
        color: #6b7280;
        font-size: 0.92rem;
    }

    .placeholder-btn {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: #433185;
        color: #fff;
        border-radius: 0.6rem;
        padding: 0.55rem 0.86rem;
        font-size: 0.88rem;
        font-weight: 600;
    }

    .placeholder-btn:hover {
        color: #fff;
        background: #5a4299;
    }
</style>
{% endblock %}

{% block content %}
<section class="placeholder-shell">
    <article class="placeholder-card">
        <span class="placeholder-icon"><i class="bi bi-layout-text-window-reverse"></i></span>
        <h1 class="placeholder-title">{{ dashboard_title }}</h1>
        <p class="placeholder-sub">This section is ready as a placeholder and can now be expanded with real modules.</p>
        <a href="{% url 'home' %}" class="placeholder-btn">
            <i class="bi bi-arrow-left"></i> Back to Dashboard
        </a>
    </article>
</section>
{% endblock %}