<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}AI Inventory Assistant{% endblock %}</title>
  {% if project_description %}
  <meta name="description" content="{{ project_description }}">
  {% endif %}
  
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">
  
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  
  <style>
    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #64748b;
      --accent: #10b981;
      --background: #f8fafc;
      --glass: rgba(255, 255, 255, 0.7);
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--background);
      color: #1e293b;
    }
    
    h1, h2, h3, .brand {
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    
    .glass-card {
      background: var(--glass);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 1.5rem;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    }
    
    .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
      padding: 0.75rem 1.5rem;
      border-radius: 0.75rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
      background-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
  </style>
  {% block head %}{% endblock %}
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light py-4">
    <div class="container">
      <a class="navbar-brand brand fw-bold fs-4 text-primary" href="/">InventoryAI</a>
      <div class="ms-auto">
        <a href="/admin/" class="btn btn-outline-secondary btn-sm px-3 rounded-pill">Admin Portal</a>
      </div>
    </div>
  </nav>

  <main>
    {% block content %}{% endblock %}
  </main>

  <footer class="py-5 mt-5">
    <div class="container text-center text-muted">
      <p>&copy; 2026 InventoryAI Assistant. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  {% block scripts %}{% endblock %}
</body>

</html>