{#
    Demo Environment Banner
    Shows demo session info and remaining time.
    Included in all demo admin pages.
#}
<div class="demo-environment-banner bg-warning-subtle border-bottom border-warning py-2 px-3 d-flex justify-content-between align-items-center">
    <div class="d-flex align-items-center gap-3">
        <span class="badge bg-warning text-dark">
            <i class="fa-solid fa-flask me-1"></i>
            DEMO MODE
        </span>
        <span class="text-muted small">
            Viewing: <strong>{{ concept|upper }}</strong> Demo Store
        </span>
    </div>
    <div class="d-flex align-items-center gap-3">
        <span class="text-muted small">
            <i class="fa-regular fa-clock me-1"></i>
            Session expires in: <strong>{{ remainingTime }}</strong>
        </span>
        {% if userModifications is defined and userModifications > 0 %}
        <span class="badge bg-info text-white">
            {{ userModifications }} change{{ userModifications != 1 ? 's' : '' }} made
        </span>
        {% endif %}
        <a href="/demo/logout" class="btn btn-sm btn-outline-secondary">
            <i class="fa-solid fa-right-from-bracket me-1"></i>
            Exit Demo
        </a>
    </div>
</div>

<style>
.demo-environment-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
}
</style>