<!DOCTYPE html>
{% load static %}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}AI ML Operations, LLC{% endblock %}</title>
  <meta name="description"
    content="{% block meta_description %}AI ML Operations, LLC — forward-deployed AI engineering. We embed with your team to build and deploy custom agentic workflows and production AI systems.{% endblock %}">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ request.build_absolute_uri }}">
  <meta property="og:title" content="{% block og_title %}AI ML Operations, LLC{% endblock %}">
  <meta property="og:description"
    content="{% block og_description %}Forward-deployed AI engineering — custom agentic workflows deployed in your environment.{% endblock %}">
  <meta property="og:image"
    content="{% block og_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'public/img/logo.png' %}{% endblock %}">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{ request.build_absolute_uri }}">
  <meta property="twitter:title" content="{% block twitter_title %}AI ML Operations, LLC{% endblock %}">
  <meta property="twitter:description"
    content="{% block twitter_description %}Forward-deployed AI engineering — custom agentic workflows deployed in your environment.{% endblock %}">
  <meta property="twitter:image"
    content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'public/img/logo.png' %}{% endblock %}">

  <!-- 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@300;400;600;800&display=swap" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="{% static 'public/css/style.css' %}" rel="stylesheet">
  <link rel="icon" type="image/png" href="{% static 'public/img/favicon.png' %}">

  {% if tianji_enabled %}
  <div id="tianji-config"
    data-tracker-url="{{ tianji_tracker_url }}"
    data-website-id="{{ tianji_website_id }}"
    data-page-name="{{ page_name }}"
    {% if user.is_authenticated %}data-user-id="{{ user.pk }}"{% endif %}
    hidden></div>
  {% endif %}

  {% if webmcp_enabled %}
  <div id="webmcp-config"
    data-page-name="{{ webmcp_page_name }}"
    data-contact-url="{{ webmcp_contact_url }}"
    data-recaptcha-required="{{ webmcp_recaptcha_required|yesno:'true,false' }}"
    data-services='{{ webmcp_services_json|escapejs }}'
    data-pages='{{ webmcp_pages_json|escapejs }}'
    hidden></div>
  {% endif %}
</head>

<body>

  <!-- Navigation Bar -->
  <nav aria-label="Main navigation">
    <a href="{% url 'public_index' %}" class="brand-logo">
      <img src="{% static 'public/img/logo.png' %}" alt="AI ML Operations" class="brand-logo-img" width="243" height="28">
    </a>
    <button type="button" class="mobile-menu-btn" aria-label="Open menu" aria-expanded="false" aria-controls="main-nav-links">☰</button>
    <ul class="nav-links" id="main-nav-links">
      <li><a href="{% url 'public_index' %}"
          class="{% if request.resolver_match.url_name == 'public_index' %}active{% endif %}">Home</a></li>
      <li class="dropdown">
        <button type="button" class="nav-dropdown-trigger{% if request.resolver_match.url_name in 'forward_deployed,ai_education,ai_sensor,bot,chat,computers,file_hosting,ml_model,web_design' %} active{% endif %}"
          id="services-menu-button" aria-expanded="false" aria-haspopup="true" aria-controls="services-menu">Services</button>
        <ul class="dropdown-content" id="services-menu" role="menu" aria-labelledby="services-menu-button">
          <li><a href="{% url 'forward_deployed' %}">Forward-Deployed AI</a></li>
          <li><a href="{% url 'bot' %}">AI Agents</a></li>
          <li><a href="{% url 'ml_model' %}">ML Models</a></li>
          <li><a href="{% url 'chat' %}">Chat</a></li>
          <li><a href="{% url 'ai_sensor' %}">Sensors</a></li>
          <li><a href="{% url 'ai_education' %}">Education</a></li>
          <li><a href="{% url 'computers' %}">Hardware</a></li>
          <li><a href="{% url 'file_hosting' %}">Hosting</a></li>
          <li><a href="{% url 'web_design' %}">Web Design</a></li>
        </ul>
      </li>
      <li><a href="{% url 'contact' %}"
          class="{% if request.resolver_match.url_name == 'contact' %}active{% endif %}"
          data-tianji-event="nav_contact">Contact</a></li>
      {% if user.is_authenticated %}
      <li><a href="{% url 'planning:board_view' %}"
          class="{% if 'planning' in request.path %}active{% endif %}"
          data-tianji-event="nav_planning">Planning</a></li>
      <li><a href="{% url 'financial_index' %}"
          class="{% if 'financial' in request.path %}active{% endif %}"
          data-tianji-event="nav_financials">Financials</a></li>
      <li class="dropdown" id="user-profile-dropdown">
        <button type="button" class="profile-icon-link" aria-label="Account menu for {{ user.get_full_name|default:user.username }}"
          aria-expanded="false" aria-haspopup="true" aria-controls="profile-menu">
          <svg class="profile-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="12" cy="8" r="4" />
            <path d="M4 21v-1a6 6 0 0 1 12 0v1" />
          </svg>
        </button>
        <ul class="dropdown-content profile-dropdown-content" id="profile-menu" role="menu">
          <li class="profile-name-item">{{ user.get_full_name|default:user.username }}</li>
          <li><a href="{% url 'change_password' %}">Change Password</a></li>
          <li>
            <form action="{% url 'logout' %}" method="post" style="margin: 0;">
              {% csrf_token %}
              <button type="submit" class="profile-logout-btn">Log Out</button>
            </form>
          </li>
        </ul>
      </li>
      {% else %}
      <li><a href="{% url 'login' %}" class="btn"
          style="border: 1px solid var(--primary-color); padding: 0.4rem 1rem; border-radius: 4px; margin-left: 1rem; color: #000;"
          data-tianji-event="nav_sign_in">Sign
          In</a></li>
      {% endif %}
    </ul>
  </nav>

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

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p class="footer-text">AI ML Operations, LLC — Forward-deployed AI engineering.</p>
      <p class="footer-links">
        <a href="{% url 'terms_of_service' %}" data-tianji-event="footer_terms">Terms &amp; Privacy</a>
        {% if tianji_enabled %}
        <span class="footer-separator">|</span>
        <button type="button" class="footer-link-btn" data-open-cookie-preferences data-tianji-event="footer_cookie_preferences">Cookie Preferences</button>
        {% endif %}
      </p>
      <p class="footer-text footer-text--muted">&copy; 2023 -
        <script>document.write(new Date().getFullYear());</script> All rights reserved.
      </p>
    </div>
  </footer>

  {% if tianji_enabled %}
  <div id="cookie-consent-banner" class="cookie-consent-banner" hidden role="dialog" aria-modal="true"
    aria-labelledby="cookie-consent-title" aria-describedby="cookie-consent-description">
    <div class="cookie-consent-content">
      <h2 id="cookie-consent-title" class="visually-hidden">Analytics notice</h2>
      <p class="cookie-consent-text" id="cookie-consent-description">
        <span class="cookie-consent-text-full">We use analytics to understand how visitors use our site. This helps us improve performance and content.
        See our <a href="{% url 'terms_of_service' %}">Terms of Service &amp; Privacy Policy</a> for details.</span>
        <span class="cookie-consent-text-short">We use analytics on this site. <a href="{% url 'terms_of_service' %}">Privacy Policy</a></span>
      </p>
      <div class="cookie-consent-actions">
        <button type="button" id="cookie-consent-acknowledge" class="btn">Acknowledge</button>
      </div>
    </div>
  </div>
  <script src="{% static 'public/js/tianji-consent.js' %}"></script>
  {% endif %}

  {% if webmcp_enabled %}
  <script src="{% static 'public/js/webmcp-tools.js' %}"></script>
  {% endif %}

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const mobileBtn = document.querySelector('.mobile-menu-btn');
      const navLinks = document.querySelector('.nav-links');

      if (mobileBtn && navLinks) {
        mobileBtn.addEventListener('click', function () {
          const isOpen = navLinks.classList.toggle('active');
          mobileBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
          mobileBtn.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
        });
      }

      function closeDropdown(dropdown) {
        dropdown.classList.remove('dropdown-open');
        const trigger = dropdown.querySelector('.nav-dropdown-trigger, .profile-icon-link');
        if (trigger) {
          trigger.setAttribute('aria-expanded', 'false');
        }
      }

      document.querySelectorAll('.dropdown').forEach(function (dropdown) {
        const trigger = dropdown.querySelector('.nav-dropdown-trigger, .profile-icon-link');
        if (!trigger) {
          return;
        }

        trigger.addEventListener('click', function (event) {
          if (window.matchMedia('(min-width: 769px)').matches && dropdown.querySelector('.nav-dropdown-trigger')) {
            return;
          }
          event.preventDefault();
          const isOpen = dropdown.classList.toggle('dropdown-open');
          trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        });
      });

      document.addEventListener('click', function (event) {
        if (!event.target.closest('.dropdown')) {
          document.querySelectorAll('.dropdown.dropdown-open').forEach(closeDropdown);
        }
      });
    });
  </script>
  {% block tracking_events %}{% endblock %}
</body>

</html>