{% extends 'base.html' %}
{% load static %}

{% block content %}
<main class="content">
	<div class="container-fluid p-4">
		<div class="row">
			<div class="col-12 col-xl-6">
				<div class="card shadow-sm border-0" style="border-radius: 12px; border-left: 4px solid #dc3545;">
					<div class="card-header bg-white border-0">
						<h4 class="fw-bold text-danger">
							<i class="fas fa-exclamation-triangle me-2"></i>Unauthorized Access
						</h4>
					</div>
					<div class="card-body">
						<div class="text-center py-4">
							<i class="fas fa-lock fa-4x text-danger mb-3"></i>
							<h5 class="fw-bold" style="color: #0e2e63;">Access Restricted</h5>
							<p class="text-muted">You don't have sufficient privileges to view this page.</p>
							<p class="text-muted small">Please contact your System Administrator for access.</p>
							<a href="{% url 'welcome' %}" class="btn mt-3" style="background: #0e2e63; color: #fff; border-radius: 8px; padding: 10px 30px;">
								<i class="fas fa-home me-2"></i> Back to Dashboard
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
{% endblock %}