{% load static %}
{% load django_htmx %}
{% load analytics_tags %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
  <meta name="csrf-cookie-name" content="{{ settings.CSRF_COOKIE_NAME|default:'csrftoken' }}">
  {% include "partials/_csrf_helpers.html" %}

  {% if default_charter and not agent_charter_saved %}
    {# a default charter has been specified, so change title #}
    <title>{% if landing_title %}{{ landing_title }}{% else %}{{ default_charter|truncatechars:60 }}{% endif %} - Gobii</title>

    <meta property="og:type"        content="website">

    {% if landing_code %}
    <meta property="og:url"         content="{{ request.scheme }}://{{ request.get_host }}{% url 'pages:landing_redirect' code=landing_code %}">
    {% endif %}

    <meta property="og:title" content="{% if landing_title %}{{ landing_title }}{% else %}{{ default_charter|truncatechars:60 }}{% endif %} - Gobii">
    <meta property="og:description" content="{{ default_charter|truncatechars:160 }}">
    <meta property="og:site_name" content="Gobii">

    {%  if landing_preview_image %}
    <meta property="og:image" content="{{ landing_preview_image }}">
    {% endif %}

    <meta name="twitter:card" content="summary">
{% else %}
  <title>{% block title %}Gobii{% endblock %}</title>
{% endif %}
  <!-- Favicon -->
  {% if fish_collateral_enabled %}
    <link rel="icon" href="{% static 'images/gobii_fish_favicon.ico' %}?v=5" sizes="any">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/gobii_fish_favicon_16.png' %}?v=5">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/gobii_fish_favicon_32.png' %}?v=5">
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/gobii_fish_apple_touch_180.png' %}?v=5">
  {% else %}
    <link rel="icon" href="{% static 'images/favicon.ico' %}?v=4" sizes="any">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon-16x16.png' %}?v=4">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon-32x32.png' %}?v=4">
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}?v=4">
  {% endif %}

  <meta name="twitter:site"        content="@gobii_ai">

  <!-- Optional: for better Android support -->
  <link rel="manifest" href="{% url 'pages:web_manifest' %}">
  <meta name="theme-color" content="#0ea5e9">

  <!-- Connection hints for common third-party script origins -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="preconnect" href="https://static.gobii.ai">
  {% if settings.GOBII_PROPRIETARY_MODE %}
  <link rel="preconnect" href="https://js.stripe.com">
  {% endif %}
  {% if settings.GA_MEASUREMENT_ID and not debug %}
  <link rel="preconnect" href="https://www.googletagmanager.com">
  {% endif %}

  <!-- Critical CSS: discover render-blocking styles before analytics scripts. -->
  <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
  <link rel="stylesheet" href="{% static 'css/custom_fonts.css' %}">
  <link rel="stylesheet" href="{% static 'css/globals.css' %}">
  {% block early_head_styles %}{% endblock %}

  <script defer src="https://unpkg.com/lucide@0.546.0"></script>
  {% if settings.GOBII_PROPRIETARY_MODE %}
  <script async src="https://js.stripe.com/dahlia/stripe.js"></script>
  {% endif %}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      if (window.lucide && typeof window.lucide.createIcons === 'function') {
        window.lucide.createIcons();
      }
    });
    document.addEventListener('htmx:afterSwap', function () {
      if (window.lucide && typeof window.lucide.createIcons === 'function') {
        window.lucide.createIcons();
      }
    });
  </script>

  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and canonical_url %}
  <link rel="canonical" href="{{ canonical_url }}">
  {% endif %}

  {% if settings.GA_MEASUREMENT_ID and not debug %}
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.GA_MEASUREMENT_ID }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    {% get_page_meta request.path as ga_page_meta %}

    {% if ga_page_meta %}
    let gaPageTitle = "{{ ga_page_meta.0|escapejs }} - {{ ga_page_meta.1|escapejs }}";
    {% else %}
    let gaPageTitle = document.title;
    {% endif %}
    const gaIsOrgContext = window.location.pathname.startsWith('/console') && {% if current_context and current_context.type == 'organization' %}true{% else %}false{% endif %};
    if (gaIsOrgContext) {
      gaPageTitle = `Organization ${gaPageTitle}`;
    }

    const gtagConfig = {
      anonymize_ip: true,
      page_title: gaPageTitle
    };
    {% if user.is_authenticated %}
    gtagConfig.user_id = '{{ user.id }}';
    {% endif %}
    gtag('config', '{{ settings.GA_MEASUREMENT_ID }}', gtagConfig);
  </script>
  {% endif %}

  {% if environment.is_production and settings.REDDIT_PIXEL_ID %}
  <!-- Reddit Pixel -->
  <script>
  !function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document);

  {% if user.is_authenticated %}
    rdt('init', '{{ settings.REDDIT_PIXEL_ID }}', {
        email: '{{ analytics.data.email_hash }}',
        externalId: '{{ analytics.data.id_hash }}',
    });
  {% else %}
    rdt('init','{{ settings.REDDIT_PIXEL_ID }}');
  {%  endif %}

  rdt('track', 'PageVisit');
  </script>
  <!-- DO NOT MODIFY UNLESS TO REPLACE A USER IDENTIFIER -->
  <!-- End Reddit Pixel -->
  {% endif %}

  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and settings.TIKTOK_PIXEL_ID %}
    <!-- TikTok Pixel Code Start -->
    <script>
    !function (w, d, t) {
      w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
    var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
    ;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};


      ttq.load('{{ settings.TIKTOK_PIXEL_ID }}');
      ttq.page();
    }(window, document, 'ttq');
    </script>
    {% if user.is_authenticated %}
    <script>
      ttq.identify({
        "email": "{{ analytics.data.email_hash }}",
        "external_id": "{{ analytics.data.id_hash }}"
      });
    </script>
    {%  endif %}
    <!-- TikTok Pixel Code End -->
  {% endif %}


  <script src="{% static 'js/segment_bootstrap.js' %}"></script>
  <script>
    (function () {
      const segmentEnabled = window.GobiiSegmentBootstrap && window.GobiiSegmentBootstrap.init({
        enabled: {% if settings.SEGMENT_WEB_WRITE_KEY %}{% if not settings.DEBUG or settings.SEGMENT_WEB_ENABLE_IN_DEBUG %}true{% else %}false{% endif %}{% else %}false{% endif %},
        writeKey: "{{ settings.SEGMENT_WEB_WRITE_KEY|escapejs }}",
        defaultProperties: {
          medium: 'Web',
          frontend: true
        }
      });

      if (!segmentEnabled) {
        return;
      }

      if ({{ user.is_authenticated|yesno:"true,false" }}) {
        let shouldIdentify = true;
        // Check if user method exists before calling it.
        if (typeof analytics.user === 'function') {
          const segmentUser = analytics.user();
          if (segmentUser && typeof segmentUser.id === 'function' && segmentUser.id() === "{{ user.id }}") {
            shouldIdentify = false;
          }
        }

        if (shouldIdentify) {
          analytics.identify("{{ user.id }}", {
            email : "{{ user.email }}",
          });
        }
      }

      {% if landing_code %}
        analytics.page('Landing Page', {
          landing_code: '{{ landing_code|escapejs }}',
          landing_hero_text: '{{ landing_hero_text|escapejs|default:"" }}',
          landing_preview_image: '{{ landing_preview_image|escapejs|default:"" }}',
          landing_title: '{{ landing_title|escapejs|default:"" }}',
          default_charter: '{{ default_charter|escapejs|default:"" }}',
        });
      {% else %}
        {% get_page_meta request.path as page_meta %}   {# ← call the tag, store result #}
        (function() {
          const isOrganizationContext = {% if current_context and current_context.type == 'organization' %}true{% else %}false{% endif %};
          const organizationId = {% if current_context and current_context.type == 'organization' %}"{{ current_context.id|escapejs }}"{% else %}null{% endif %};
          const organizationName = {% if current_context and current_context.type == 'organization' %}"{{ current_context.name|escapejs }}"{% else %}null{% endif %};
          const isConsolePath = window.location.pathname.startsWith('/console');
          const pageProps = {};

          if (isOrganizationContext && isConsolePath) {
            pageProps.organization = true;
            if (organizationId) {
              pageProps.organization_id = organizationId;
            }
            if (organizationName) {
              pageProps.organization_name = organizationName;
            }
          }

          {% if page_meta %}
          let pageCategory = "{{ page_meta.0|escapejs }}";
          let pageName = "{{ page_meta.1|escapejs }}";

          if (isOrganizationContext && isConsolePath && pageName) {
            pageName = `Organization ${pageName}`;
          }

          if (Object.keys(pageProps).length > 0) {
            analytics.page(pageCategory, pageName, pageProps);
          } else {
            analytics.page(pageCategory, pageName);
          }
          {% else %}
          if (Object.keys(pageProps).length > 0) {
            analytics.page(pageProps);
          } else {
            analytics.page();
          }
          {% endif %}
        })();
      {% endif %}
    })();
  </script>

{% if not debug and settings.MIXPANEL_PROJECT_TOKEN %}
  <!-- Mixpanel Replay -->
  <script type="text/javascript">
    (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);

    mixpanel.init("{{ analytics.tokens.mixpanel_project_token }}", {
      record_sessions_percent: 1,  //records 1% of all sessions
      record_heatmap_data: true,
      loaded: function (mixpanel) {
        const pollInterval = 500; // How frequently to check
        const maxAttempts = 10; // Max times to check
        let anonymousCheckAttempts = 0;
        let authCheckAttempts = 0;

       {% if user.is_authenticated %}
        // If user is authenticated, identify them immediately
        mixpanel.identify("{{ user.id }}"); //use django's user id
       {% else %}
          try {
            const authCheck = setInterval(() => {
                const segmentUser =
                  window.analytics && typeof window.analytics.user === 'function'
                    ? window.analytics.user()
                    : null;
                const segment_user_id =
                  segmentUser && typeof segmentUser.id === 'function'
                    ? segmentUser.id()
                    : null;

                if (segment_user_id) {
                    mixpanel.identify(segment_user_id); //use segment's user id
                    clearInterval(authCheck);
                } else {
                    authCheckAttempts++;
                    if (authCheckAttempts >= maxAttempts) {
                        clearInterval(authCheck);
                        console.log('mixpanel: Max attempts reached for segment user_id');
                    }
                }
            }, pollInterval);
          } catch (e) {
              console.error(`mixpanel: error checking for segment user_id: ${e}`);
          }
       {% endif %}


        // Checking for segment device_id
       try {
         const anonymousCheck = setInterval(() => {
           const segmentUser =
             window.analytics && typeof window.analytics.user === 'function'
               ? window.analytics.user()
               : null;
           const segment_device_id =
             segmentUser && typeof segmentUser.anonymousId === 'function'
               ? segmentUser.anonymousId()
               : null;

           if (segment_device_id) {
             mixpanel.register({$device_id: segment_device_id}); //use segment's device_id
             clearInterval(anonymousCheck);
           } else {
             anonymousCheckAttempts++;
             if (anonymousCheckAttempts >= maxAttempts) {
               clearInterval(anonymousCheck);
               console.log('mixpanel: Max attempts reached for segment device_id');
             }
           }
         }, pollInterval);
       } catch (e) {
         console.error(`mixpanel: error checking for segment device_id: ${e}`);
       }

        // Checking for segment user_id

      }
    });
  </script>
  <!-- End Mixpanel Replay -->
{% endif %}

  {% if environment.is_production and settings.META_PIXEL_ID %}
  <!-- Meta Pixel Code -->
  <script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  {% if user.is_authenticated %}
    {# link external id #}
    fbq('init', '{{ settings.META_PIXEL_ID }}', { em: '{{ analytics.data.email_hash }}', external_id: '{{ analytics.data.id_hash }}' });
  {%  else %}
    fbq('init', '{{ settings.META_PIXEL_ID }}');
  {% endif %}

  fbq('track', 'PageView');
  </script>
  <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{ settings.META_PIXEL_ID }}&ev=PageView&noscript=1" /></noscript>
  <!-- End Meta Pixel Code -->

  {% endif %}
  <!-- Preload logo to prevent flicker -->
  {% if fish_collateral_enabled %}
    <link rel="preload" as="image" href="{% static 'images/gobii_fish_with_text_purple_nav.png' %}" />
  {% else %}
    <link rel="preload" as="image" href="{% static 'images/noBgBlue.png' %}" />
  {% endif %}
  
  <style>
    [x-cloak] { display: none !important; }
    
    /* Reserve space for logo to prevent layout shift */
    a[href="{% url 'pages:home' %}"] img {
      min-height: 2.5rem; /* matches h-10 */
    }

    /* Optimized global font size for comfortable reading across all devices.
       This scales all rem-based Tailwind utilities proportionally and keeps
       sizing reasonable across breakpoints. */
    :root {
      font-size: 16px; /* Standard base size on mobile */
    }

    @media (min-width: 768px) {
      :root {
        font-size: 18px; /* Slightly larger on tablets & larger screens */
      }
    }
    
    /* Theme colors for documentation */
    :root {
      --primary-50: #f0f9ff;
      --primary-100: #e0f2fe;
      --primary-200: #bae6fd;
      --primary-300: #7dd3fc;
      --primary-400: #38bdf8;
      --primary-500: #0ea5e9;
      --primary-600: #0284c7;
      --primary-700: #0369a1;
      --primary-800: #075985;
      --primary-900: #0c4a6e;
    }

  </style>

  <!-- Alpine.js -->
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.7/dist/cdn.min.js"></script>
  
  <!-- Preline -->
  <script defer src="https://cdn.jsdelivr.net/npm/preline@latest/dist/preline.min.js"></script>

  <script defer>
    // This script block handles the re-initialization of Preline components
    // after HTMX swaps content into the DOM.

    document.addEventListener('DOMContentLoaded', () => {
      if (typeof htmx !== 'undefined') {
        // Use a direct event listener for 'htmx:load' on document.body,
        // as this was demonstrably working in earlier tests.
        document.body.addEventListener('htmx:load', function(event) {
          // event.detail.elt is the element that HTMX has loaded content into.
          if (window.HSStaticMethods && typeof window.HSStaticMethods.autoInit === 'function') {
            window.HSStaticMethods.autoInit();
            // console.log('Preline components re-initialized via htmx:load. HTMX loaded element:', event.detail.elt);
          } else {
            console.error('Preline (HSStaticMethods.autoInit) not available for HTMX content re-initialization during htmx:load.');
          }
        });
      } else {
        console.warn('HTMX not found on DOMContentLoaded. Preline re-initialization for HTMX swaps will not be configured.');
      }
    });
  </script>

  <!-- Global event to close all mobile navs before navigation or caching -->
  <script>
    function dispatchCloseMobileNav() {
      document.dispatchEvent(new CustomEvent('close-mobile-nav'));
    }

    window.addEventListener('pagehide', dispatchCloseMobileNav);
    window.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') dispatchCloseMobileNav();
    });
    window.addEventListener('freeze', dispatchCloseMobileNav);
    document.addEventListener('htmx:beforeRequest', dispatchCloseMobileNav);
    document.addEventListener('htmx:beforeHistorySave', dispatchCloseMobileNav);
  </script>

  <!-- Re-initialize Alpine after a bfcache restore -->
  <script>
    window.addEventListener('pageshow', function (event) {
      if (event.persisted) {
        if (window.Alpine) {
          Alpine.destroyTree(document.body);
          Alpine.initTree(document.body);
        }
      }
    });
  </script>

  <script src="{% static 'js/gobii_analytics.js' %}" defer></script>
  {% if settings.TURNSTILE_ENABLED %}
    {% if cta_signup_modal_config.enabled or request.resolver_match.url_name == 'account_login' or request.resolver_match.url_name == 'account_signup' %}
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
    {% endif %}
  {% endif %}
  <script src="{% static 'js/account_identity_signals.js' %}" defer></script>
  <script src="{% static 'js/account_auth_forms.js' %}" defer></script>
  <script src="{% static 'js/cta_signup_modal.js' %}" defer></script>
  <script src="{% static 'js/cta_tracking.js' %}" defer></script>
  <script src="{% static 'js/signup_tracking.js' %}" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.12.9/libphonenumber-js.min.js" defer></script>
  <script type="text/javascript" src="{% static 'js/phone_format.js' %}" defer></script>

  <style type="text/css">

    .htmx-indicator {
      width: 0;           /* matches spinner dimensions */
      height: 0;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
  </style>

  {% if not suppress_signup_tracking_snippet %}
    {% with signup_tracking_source='base_template' %}
      {% include "includes/_signup_tracking.html" %}
    {% endwith %}
  {% endif %}

  {% if user.is_authenticated %}
  <script type="text/javascript">
    // For each of the UTM parameters, check if it exists in the URL or cookies, and add to properties object
    // to send to Segment
    const cookies = ['utm_source','utm_medium','utm_campaign','utm_content','utm_term'];
    const props = {};

    cookies.forEach(cookie => {
      const cookieValue = document.cookie.split('; ').find(row => row.startsWith(cookie + '='));
      if (cookieValue) {
        props[cookie] = decodeURIComponent(cookieValue.substring(cookie.length + 1));
      } else {
        // If the cookie doesn't exist, check the URL
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has(cookie)) {
          props[cookie] = urlParams.get(cookie);
        }
      }
    });

    if (analytics && analytics.identify && Object.keys(props).length > 0) {
      analytics.identify("{{ user.id }}", props);
    }
  </script>
  {% endif %}


  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and settings.REWARDFUL_ID %}
  <script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
  <script async src='https://r.wdfl.co/rw.js' data-rewardful='{{ settings.REWARDFUL_ID }}'></script>
  {% endif %}

  <!-- block for head_extras -->
  {% block head_extras %}{% endblock %}

  {% htmx_script %}
</head>
<body class="antialiased bg-white text-slate-800" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-analytics-cta-event="{{ analytics.events.CTA_CLICKED }}" data-analytics-cta-tracking-enabled="{% if request.path == '/' or request.path|slice:':11' == '/solutions/' or request.path|slice:':10' == '/accounts/' or request.path == '/pricing/' %}true{% else %}false{% endif %}">
  {% if llm_bootstrap_required %}
    <div class="bg-amber-100 text-amber-900 border-b border-amber-300">
      <div class="max-w-7xl mx-auto px-4 py-3 text-sm">
        <strong class="font-semibold">Setup required:</strong>
        No LLM providers are configured yet. Complete the initial setup to enable agents and tool discovery.
      </div>
    </div>
  {% endif %}
  {% if mini_mode_solutions_header %}
    {% include "includes/_unified_header_nav_mini.html" %}
  {% else %}
    {% include "includes/_unified_header_nav.html" %}
  {% endif %}
  <div>
    {% if messages %}
    <div class="fixed top-18 left-1/2 transform -translate-x-1/2 w-full max-w-md p-4 z-50" id="global-messages">
      {% for message in messages %}
      <div
        class="p-4 mb-4 {% if message.tags == 'success' %}bg-green-100 text-green-800 border border-green-200{% elif message.tags == 'error' %}bg-red-100 text-red-800 border border-red-200{% elif message.tags == 'info' %}bg-blue-100 text-blue-800 border border-blue-200{% elif message.tags == 'warning' %}bg-yellow-100 text-yellow-800 border border-yellow-200{% else %}bg-gray-100 text-gray-800 border border-gray-200{% endif %} rounded-lg shadow-lg flex justify-between items-center"
        role="alert"
        x-data="{ show: true }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform -translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-2"
      >
        <span>{{ message }}</span>
        <button type="button" @click="show = false; setTimeout(() => $el.closest('[role=alert]').remove(), 300)"
          class="text-gray-500 hover:text-gray-700 focus:outline-none" aria-label="Close">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% block content %}{% endblock %}
    <!-- HTMX injects modals here -->
    <div id="modal-container">
      {% if cta_signup_modal_config.enabled %}
        {{ cta_signup_modal_config|json_script:"gobii-cta-signup-modal-config" }}
        {% include "partials/_cta_signup_modal.html" %}
      {% endif %}
    </div>

    {# Global footer #}
    {% include "includes/_footer.html" %}
  </div>
  {% if environment.is_production and settings.LINKEDIN_PARTNER_ID %}
  <script type="text/javascript">
  _linkedin_partner_id = "{{ settings.LINKEDIN_PARTNER_ID }}";
  window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
  window._linkedin_data_partner_ids.push(_linkedin_partner_id);
  </script><script type="text/javascript">
  (function(l) {
  if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
  window.lintrk.q=[]}
  var s = document.getElementsByTagName("script")[0];
  var b = document.createElement("script");
  b.type = "text/javascript";b.async = true;
  b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
  s.parentNode.insertBefore(b, s);})(window.lintrk);
  {% if show_signup_tracking and environment.is_production and settings.GOBII_PROPRIETARY_MODE %}
      (function () {
        {% if settings.LINKEDIN_SIGNUP_CONVERSION_ID  %}
        if (typeof window.lintrk === 'function') {
          window.lintrk('track', { conversion_id: {{ settings.LINKEDIN_SIGNUP_CONVERSION_ID  }} });
        }
        {% endif %}
      })();
  {% endif %}
  </script>
  <noscript>
  <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid={{ settings.LINKEDIN_PARTNER_ID }}&fmt=gif" />
  </noscript>
  {% endif %}

  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and settings.REWARDFUL_ID %}
  <script>

    rewardful('ready', function() {
      if(Rewardful.referral) {
        document.cookie = "rewardful-referral=" + Rewardful.referral + "; path=/; max-age=" + (60 * 60 * 24 * 30);
      }
    });
  </script>
  {% endif %}

  {# Allow pages to inject additional scripts after the global includes. #}
  {% block extra_js %}{% endblock %}
</body>
</html>
