<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{% block title %}Veracity Real Estate Solutions{% endblock %}</title>
  <meta name="description" content="A comprehensive Canadian real estate appraisal management SaaS platform.">

  <!-- Google 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=Lato:wght@400;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <!-- Custom CSS -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/custom.css' %}">

  {% block head %}{% endblock %}
</head>

<body style="display: flex; min-height: 100vh; flex-direction: column;">

  <div class="sidebar bg-light border-end" style="width: 280px; position: fixed; top: 0; left: 0; height: 100vh;">
    <div class="p-3">
      <a class="navbar-brand" href="{% url 'core:index' %}" style="color: #0A2342; font-weight: 600; font-family: 'Poppins', sans-serif;">Veracity</a>
      <ul class="nav flex-column mt-4">
        <li class="nav-item">
          <a class="nav-link" href="#">
            Dashboard
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Open Appraisals
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Pending Orders
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            In Review
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Upcoming Deadlines
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:property_list' %}">
            Properties
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:appraisal_list' %}">
            Appraisals
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:user_list' %}">
            Users
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:project_list' %}">
            Projects
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:invoice_list' %}">
            Invoices
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="main-content" style="margin-left: 280px; flex-grow: 1; display: flex; flex-direction: column;">
    <header class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
        <div class="container-fluid">
            <span class="navbar-brand">Organization Logo</span>
            <ul class="navbar-nav ms-auto d-flex flex-row">
                <li class="nav-item me-3">
                    <a class="nav-link" href="#">Notifications</a>
                </li>
                <li class="nav-item me-3">
                    <a class="nav-link" href="#">Messages</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                </li>
            </ul>
        </div>
    </header>

    <main class="flex-grow-1 p-4">
        {% block content %}
        {% endblock %}
    </main>

    <footer class="py-3 mt-auto bg-light border-top">
        <div class="container-fluid text-center">
            <small class="text-muted">
                &copy; {% now "Y" %} Veracity Real Estate Solutions. All Rights Reserved.
            </small>
        </div>
    </footer>
  </div>


  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>

</html>