{% extends "base.html" %}

{% block title %}Access Denied - Golden Uniforms{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 text-center">
            <div class="error-page">
                <div class="error-icon mb-4">
                    <i class="fas fa-lock" style="font-size: 4rem; color: #ff6b35;"></i>
                </div>
                <h1 class="display-4 mb-3">Access Denied</h1>
                <p class="lead mb-4">You don't have permission to access this resource.</p>
                <div class="error-actions">
                    <a href="{{ url_for('index') }}" class="btn btn-orange me-3">
                        <i class="fas fa-home me-2"></i>Go Home
                    </a>
                    <a href="{{ url_for('signin') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-sign-in-alt me-2"></i>Sign In
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-page {
    padding: 2rem 0;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.error-actions .btn {
    margin: 0.5rem;
}
</style>
{% endblock %}