{% extends "base.html" %} {% block title %}QR Code Not Found - QR Code
Management{% endblock %} {% block content %}
<div class="error-page">
  <div class="error-container">
    <div class="error-icon">
      <i class="fas fa-qrcode"></i>
    </div>
    <div class="error-message">
      <h1>QR Code Not Found</h1>
      <p>
        The QR code you're looking for doesn't exist or has been deactivated.
      </p>
      <p class="error-detail">
        Please check with the person who provided this QR code.
      </p>
    </div>
    <div class="error-actions">
      {% if session.user_id %}
      <a href="{{ url_for('dashboard') }}" class="btn btn-primary">
        <i class="fas fa-home"></i>
        Go to Dashboard
      </a>
      {% else %}
      <a href="{{ url_for('login') }}" class="btn btn-primary">
        <i class="fas fa-sign-in-alt"></i>
        Login
      </a>
      {% endif %}
    </div>
  </div>
</div>

<style>
  .error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--spacing-8);
  }

  .error-container {
    text-align: center;
    max-width: 600px;
  }

  .error-icon {
    font-size: 6rem;
    color: var(--gray-400);
    margin-bottom: var(--spacing-6);
  }

  .error-message h1 {
    font-size: var(--font-size-3xl);
    color: var(--gray-900);
    margin-bottom: var(--spacing-4);
  }

  .error-message p {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    margin-bottom: var(--spacing-4);
  }

  .error-detail {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    font-style: italic;
    margin-bottom: var(--spacing-8) !important;
  }

  .error-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
  }
</style>
{% endblock %}