{% load static %}
{% load vite_tags %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
  <meta name="csrf-cookie-name" content="{{ settings.CSRF_COOKIE_NAME|default:'csrftoken' }}">
  {% include "partials/_csrf_helpers.html" %}
  <title>{% block page_title %}Gobii Console{% endblock %}</title>
  {% if fish_collateral_enabled %}
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/gobii_fish_favicon_32.png' %}" />
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/gobii_fish_favicon_16.png' %}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/gobii_fish_apple_touch_180.png' %}" />
  {% else %}
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon-32x32.png' %}" />
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon-16x16.png' %}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}" />
  {% endif %}
  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  {% 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 %}
  <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
  {% if settings.GOBII_PROPRIETARY_MODE %}
  <script async src="https://js.stripe.com/dahlia/stripe.js"></script>
  {% endif %}
  {% if fish_collateral_enabled %}
    <link rel="preload" as="image" href="{% static 'images/gobii_fish.png' %}" />
  {% else %}
    <link rel="preload" as="image" href="{% static 'images/noBgBlue.png' %}" />
  {% endif %}
  <link rel="stylesheet" href="{% static 'css/custom_fonts.css' %}">
  <link rel="stylesheet" href="{% static 'css/pygments.css' %}">
  <link rel="stylesheet" href="{% static 'css/globals.css' %}">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.12.9/libphonenumber-js.min.js" defer></script>

  {# Google Analytics #}
  {% if settings.GA_MEASUREMENT_ID and not debug %}
  <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());
    const gtagConfig = { anonymize_ip: true };
    {% if user.is_authenticated %}gtagConfig.user_id = '{{ user.id }}';{% endif %}
    gtag('config', '{{ settings.GA_MEASUREMENT_ID }}', gtagConfig);
  </script>
  {% endif %}

  {# Reddit Pixel #}
  {% if environment.is_production and settings.REDDIT_PIXEL_ID %}
  <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>
  {% endif %}

  {# TikTok Pixel #}
  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and settings.TIKTOK_PIXEL_ID %}
  <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;o&&(n.src+="&partner="+o);var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a)};
    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 %}
  {% endif %}

  {# Meta Pixel #}
  {% if environment.is_production and settings.GOBII_PROPRIETARY_MODE and settings.META_PIXEL_ID %}
  <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 %}
    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>
  {% endif %}

  <script src="{% static 'js/gobii_analytics.js' %}" defer></script>
  <script src="{% static 'js/signup_tracking.js' %}" defer></script>

  {# Signup tracking events - uses shared include with fetch-based retry #}
  {% with signup_tracking_source='react_shell' %}
    {% include "includes/_signup_tracking.html" %}
  {% endwith %}

  {# Segment Analytics - mirrors base.html setup #}
  {% if not debug and settings.SEGMENT_WEB_WRITE_KEY %}
  <script>
    !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics.SNIPPET_VERSION="5.2.0";}}();
    analytics.load("{{ settings.SEGMENT_WEB_WRITE_KEY }}");

    // Add source middleware for web events
    analytics.addSourceMiddleware(({ payload, next }) => {
      const { properties } = payload.obj;
      if (!properties) payload.obj.properties = {};
      payload.obj.properties.medium = 'Web';
      payload.obj.properties.frontend = true;
      next(payload);
    });

    // Identify user if authenticated
    {% if user.is_authenticated %}
    (function() {
      if (typeof analytics.user === 'function' && analytics.user()?.id() === "{{ user.id }}") return;
      analytics.identify("{{ user.id }}", { email: "{{ user.email }}" });
    })();
    {% endif %}

    // Page tracking
    analytics.page('App', '{{ page_name|default:"React Shell" }}');
  </script>
  {% else %}
  <script>
    window.analytics = window.analytics || {
      page: function() {},
      track: function() {},
      identify: function() {},
      ready: function(cb) { if (typeof cb === 'function') cb(); },
    };
  </script>
  {% endif %}

  {% block head_extra %}{% endblock %}
</head>
<body class="{{ body_class|default:'min-h-screen bg-slate-100' }}">
  <main class="min-h-screen">
    {% block react_shell_content %}{% endblock %}
  </main>
  {% block extra_js %}{% endblock %}
</body>
</html>
