{% extends "base.html" %}
{% block content %}
  <div class="srf-container" style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 50vh;
      padding: 0 1rem;
    ">
    
    <!-- Main Heading -->
    <h4>
      Access Denied
    </h4>

    <!-- Thin Separator Line -->
    <hr style="
        width: 200px;
        border: none;
        border-top: 1px solid #ccc;
        margin: 0.5rem 0 1.5rem;
      "
    >

    <!-- Maintenance Icon -->
    <i class="material-icons mb-2" style="font-size: 35px;">
        desktop_access_disabled
    </i>

    <!-- Explanatory Text -->
    <p style="color: #555;">
      You do not have permission to access this page or action.<br>
      Please contact your Site Administrator(s) to request access.
    </p>

    <!-- “Return” Link -->
    <a href="{% url 'stations-map' %}" style="
        margin-top: 1.5rem;
        color: #007BFF;
      ">
      Return to the Station Map
    </a>
  </div>
{% endblock %}