{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Zugriff verweigert{% else %}Access Denied{% endif %}
{% endblock %}

{% block content %}
<div class="card" style="text-align: center; max-width: 600px; margin: 40px auto; padding: 40px;">
  <div style="margin-bottom: 24px;">
    <div style="width: 80px; height: 80px; background-color: rgba(239, 68, 68, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--danger); border: 2px solid rgba(239, 68, 68, 0.2);">
      <svg style="width: 42px; height: 42px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
      </svg>
    </div>
  </div>

  <h1 style="font-family: var(--font-title); font-size: 2.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -0.5px;">
    {% if current_lang == 'de' %}Zugriff verweigert{% else %}Access Denied{% endif %}
  </h1>

  <p style="color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin-bottom: 24px;">
    {% if current_lang == 'de' %}
      Diese Seite (<strong>{% if current_lang == 'de' %}{{ page_title_de }}{% else %}{{ page_title_en }}{% endif %}</strong>) ist als <strong>intern</strong> gekennzeichnet. 
      Ihr aktueller Standort bzw. Ihre IP-Adresse hat keine Berechtigung, auf diese Inhalte zuzugreifen.
    {% else %}
      This page (<strong>{% if current_lang == 'de' %}{{ page_title_de }}{% else %}{{ page_title_en }}{% endif %}</strong>) is marked as <strong>internal</strong>.
      Your current network IP does not have permission to access these contents.
    {% endif %}
  </p>

  <div style="background-color: var(--bg-secondary); border: 1px solid var(--card-border); padding: 18px; border-radius: 8px; margin-bottom: 30px; text-align: left;">
    <div style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 6px;">
      {% if current_lang == 'de' %}Ihre IP-Adresse:{% else %}Your IP Address:{% endif %}
    </div>
    <div style="font-family: 'Courier New', Courier, monospace; font-size: 1.1rem; color: var(--accent-color); font-weight: 700; word-break: break-all;">
      {{ client_ip }}
    </div>
  </div>

  <div style="display: flex; flex-direction: column; gap: 12px;">
    {% if ip_allowed %}
      {% if logged_in %}
        <a href="/settings" class="btn btn-primary">
          {% if current_lang == 'de' %}IP-Whitelists anpassen{% else %}Manage Whitelisted IPs{% endif %}
        </a>
      {% else %}
        <a href="/login?next=/page/{{ slug }}" class="btn btn-primary">
          {% if current_lang == 'de' %}Als Editor anmelden{% else %}Login as Editor{% endif %}
        </a>
      {% endif %}
    {% endif %}
    
    <a href="/" class="btn btn-secondary">
      {% if current_lang == 'de' %}Zurück zur Startseite{% else %}Back to Home{% endif %}
    </a>
  </div>
</div>
{% endblock %}