{% extends 'public_base.html' %}
{% block content %}

<div class="permission-denied-container">
    <div class="permission-denied-card">
        <div class="permission-denied-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
        </div>
        <h2 class="permission-denied-title">Access Denied</h2>
        <p class="permission-denied-message">
            You don't have permission to perform this operation.
            <br>
            Please contact your administrator if you believe this is an error.
        </p>
        <div class="permission-denied-actions">
            <a href="#" class="btn btn-primary">Return to Home</a>
        </div>
    </div>
</div>

<style>
    .permission-denied-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
        padding: 20px;
        background-color: #f8f9fa;
    }
    
    .permission-denied-card {
        max-width: 500px;
        width: 100%;
        padding: 30px;
        text-align: center;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .permission-denied-icon {
        margin-bottom: 20px;
    }
    
    .permission-denied-title {
        color: #dc3545;
        margin-bottom: 15px;
        font-weight: 600;
    }
    
    .permission-denied-message {
        color: #6c757d;
        margin-bottom: 25px;
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    .permission-denied-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 25px;
    }
    
    .btn {
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }
    
    .btn-outline-secondary {
        color: #6c757d;
        border: 1px solid #6c757d;
        background-color: transparent;
    }
    
    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
    }
</style>

{% endblock %}