{% extends "core/base.html" %}
{% load static %}
{% block title %}Access Restricted — SwiftPOS{% endblock %}
{% block topbar_title %}Access Restricted{% endblock %}

{% block content %}
<div class="container-fluid d-flex align-items-center justify-content-center" style="min-height:75vh;">
    <div class="text-center" style="max-width:520px;">

        <!-- Animated lock icon -->
        <div class="mb-4" style="position:relative;display:inline-block;">
            <div style="width:120px;height:120px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 0 0 16px rgba(251,191,36,0.12),0 0 0 32px rgba(251,191,36,0.06);animation:pulseRing 2s ease-in-out infinite;">
                <i class="fas fa-lock" style="font-size:3rem;color:#d97706;"></i>
            </div>
        </div>

        <!-- Heading -->
        <h1 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;color:#1e293b;margin-bottom:0.5rem;">
            Access Restricted
        </h1>
        <p style="font-size:1.05rem;color:#64748b;line-height:1.6;margin-bottom:2rem;">
            Your <strong style="color:#1e293b;">{{ user_role|title }}</strong> role doesn't have permission to access this feature.
            Please contact your <strong style="color:#7c3aed;">administrator</strong> to request access.
        </p>

        <!-- Info card -->
        <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;margin-bottom:2rem;text-align:left;">
            <div class="d-flex align-items-start gap-3">
                <div style="background:#ede9fe;border-radius:10px;padding:0.6rem;flex-shrink:0;">
                    <i class="fas fa-shield-halved" style="color:#7c3aed;font-size:1.1rem;"></i>
                </div>
                <div>
                    <div style="font-weight:600;color:#1e293b;font-size:0.95rem;margin-bottom:0.3rem;">Why am I seeing this?</div>
                    <p style="color:#64748b;font-size:0.875rem;margin:0;line-height:1.6;">
                        Your company administrator has configured role-based access controls. 
                        Each feature can be individually enabled or disabled per role (Cashier, Manager).
                        Only administrators can unlock access to restricted sections.
                    </p>
                </div>
            </div>
        </div>

        <!-- Action buttons -->
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="javascript:history.back()"
               style="background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;border-radius:12px;padding:0.75rem 1.5rem;font-weight:600;font-size:0.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;transition:all 0.2s;"
               onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f1f5f9'">
                <i class="fas fa-arrow-left"></i> Go Back
            </a>
            <!-- <a href="{% url 'dashboard' %}"
               style="background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;border-radius:12px;padding:0.75rem 1.5rem;font-weight:600;font-size:0.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;box-shadow:0 4px 12px rgba(79,70,229,0.3);transition:all 0.2s;"
               onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
                <i class="fas fa-house"></i> Dashboard
            </a> -->
        </div>

        <!-- Contact hint -->
        <p style="margin-top:2rem;font-size:0.8rem;color:#94a3b8;">
            <i class="fas fa-info-circle me-1"></i>
            ONLY ADMIN CAN GIVE YOU ACCESS
            </a>
        </p>
    </div>
</div>

<style>
@keyframes pulseRing {
    0%, 100% { box-shadow: 0 0 0 16px rgba(251,191,36,0.12), 0 0 0 32px rgba(251,191,36,0.06); }
    50%       { box-shadow: 0 0 0 20px rgba(251,191,36,0.18), 0 0 0 40px rgba(251,191,36,0.08); }
}
</style>
{% endblock %}