<!DOCTYPE html>
{% if request.shop -%}
<!--shop_id={{ request.shop.id }}-->
{%- endif %}
{% if request.product -%}
<!--product_id={{ request.product.id }}-->
<!--product_created={{ request.product.human_created_timestamp }}-->
<!--product_updated={{ request.product.human_updated_timestamp }}-->
{%- endif %}
{% set user_theme_id = request.user.theme_id if request.user and request.user.authenticated else none %}
{% set shop_default_theme = request.shop.default_theme if request.shop else 1 %}
{% if user_theme_id is not none %}
  {% set theme_preference = 'light' if (user_theme_id == 1) else 'dark' %}
{% else %}
  {% set theme_preference = 'light' if (shop_default_theme == 1) else 'dark' %}
{% endif %}
<html lang="en" data-theme="{{ theme_preference }}" data-user-theme="{{ user_theme_id or 'null' }}" data-shop-default="{{ shop_default_theme }}"{% if request.shop and request.shop.color_filter %} data-color-filter="{{ request.shop.color_filter }}"{% endif %}>
<head>

  <!-- design tokens first, then app styles. ?v= cache-busts on each deploy. -->
  <link rel="stylesheet" href="/static/css/tokens.css?v={{ request.git_hash }}">
  <link rel="stylesheet" href="/static/css/common.css?v={{ request.git_hash }}">
  
  <!-- Dark mode theme switching -->
  <script>
    (function() {
      // Theme priority: localStorage > user preference > shop default > system default (light)
      const userThemeId = {{ user_theme_id or 'null' }};
      const shopDefaultTheme = {{ shop_default_theme }};
      
      // Get theme from localStorage
      const savedTheme = localStorage.getItem('theme-preference');
      
      let finalTheme;
      if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
        // User has explicitly chosen a theme via toggle
        finalTheme = savedTheme;
      } else if (userThemeId !== null) {
        // Use user's profile setting (0=dark, 1=light)
        finalTheme = userThemeId === 0 ? 'dark' : 'light';
      } else {
        // Use shop default (0=dark, 1=light)
        finalTheme = shopDefaultTheme === 0 ? 'dark' : 'light';
      }
      
      // Apply theme immediately to prevent flash
      document.documentElement.setAttribute('data-theme', finalTheme);
      
      // Theme switching function (for programmatic use)
      window.setTheme = function(theme) {
        if (theme === 'dark' || theme === 'light') {
          document.documentElement.setAttribute('data-theme', theme);
          localStorage.setItem('theme-preference', theme);
        }
      };
    })();
  </script>

  {% include 'snippets/analytics.j2' %}

  {% set theme_color = request.shop.ribbon_color_1 or request.app.saas_theme_color or "#5871ad" %}
  <!-- this makes mobile pretty...  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="{{ theme_color }}">
  <meta charset="utf-8">
  {% if cache_version %}
  <meta name="mps-cache-version" content="{{ cache_version }}">
  {% endif %}

  {% if request.is_saas_domain == false and request.shop and request.shop.favicon %}
  <link rel="icon" href="{{ request.shop_cdn_endpoint }}/{{ request.shop.uuid_str }}/meta/shop-favicon?ts={{ request.shop.updated_timestamp }}" />
  {% endif %}

  {% if request.path == '/' and request.shop and request.shop.google_site_verification %}
  <meta name="google-site-verification" content="{{ request.shop.google_site_verification }}" />
  {% endif %}

  {% if request.shop %}
  <link rel="alternate" type="application/rss+xml" title="{{ request.shop.name }} RSS" href="/rss.xml" />
  <link rel="alternate" type="application/atom+xml" title="{{ request.shop.name }} Atom" href="/atom.xml" />
  {% endif %}

  {%- block append_to_head_tag_section %}
  <title>{{ request.domain }}</title>
  {% endblock %}
</head>

<body{% if request.shop and request.shop.watch_mode_enabled %} class="watch-mode-shop"{% endif %}>
<noscript>
  <style>.js-only {display: none;}</style>
</noscript>
{% include 'snippets/ribbon.j2' %}
{% if request.shop and request.shop.is_non_production %}
<div class="environment-banner environment-banner-{{ request.shop.environment_label }}">
  {{ request.shop.environment_label|upper }} ENVIRONMENT — This shop is not visible to the public.
</div>
{% endif %}
{% if request.shop and request.shop.is_trial_active %}
<div class="trial-banner">
  Trial: {{ request.shop.trial_days_remaining }} day{{ 's' if request.shop.trial_days_remaining != 1 else '' }} remaining — <a href="/actions/view">Choose a plan</a>
</div>
{% elif request.shop and request.shop.is_trial_expired %}
<div class="trial-banner trial-banner-expired">
  Trial expired — <a href="/actions/view">Choose a plan</a> to continue editing
</div>
{% endif %}
<section class="main">

  <section class="nav-grid">

    <section class="nav">

      <section class="logo">
      {% if request.is_saas_domain %}
        {% if request.app.saas_logo %}
        <a href="/"><img class="logo" src="{{ request.app.saas_logo }}" /></a>
        {% else %}
        <a href="/"><img class="logo" src="/static/mps.png" /></a>
        {% endif %}

      {% elif request.shop and request.shop.logo_banner %}
      <a href="/"><img class="logo" src="{{ request.shop_cdn_endpoint }}/{{ request.shop.uuid_str }}/meta/shop-logo-banner?ts={{ request.shop.updated_timestamp }}" /></a>
      {% else%}
      Upload a logo in shop settings.
      {% endif %}
      </section>

      <section class="search">
      {% include 'snippets/search.j2' %}
      </section>
      
      <section class="log-in">

      {% if request.shop and request.shop.shop_locations.all()|length > 1 %}
        <a class="cart-and-count" href="{{ request.route_url('shop_locations', shop_id=request.shop.id, _query={'next': request.url}) }}">Shop Locations</a>
      {% endif %}

      {% if request.shop and request.shop.subscriptions_enabled and not request.is_saas_domain %}
      <a href="/subscribe" class="cart-and-count">Subscribe</a>
      {% endif %}

      {% if request.user and request.user.authenticated %}

      {% if request.user.full_name %}
      <a href="/u/settings" class="user-display-name">{{ request.user.name }}</a>
      {% else %}
      <a href="/u/settings" class="user-display-name">My Account</a>
      {% endif %}


      {% else %}
      <a href="{{ request.route_url('join-or-log-in', _query={'next': request.url}) }}">My Account</a>
      {% endif %}

      <a href="/cart" class="cart-and-count">&#128722; Cart ${{ "{:,.2f}".format(request.active_cart.total) }} ({{ "{:,}".format(request.active_cart.count) }})</a>

      </section>
  
    <!-- nav -->
    </section>

  <!-- nav-grid -->
  </section>

{% include 'snippets/flash-alerts.j2' %}

  {% if request.user and request.user.authenticated %}

  <section class="windows-95-task-bar">

      <section class="windows-95-start-button">
      {% if request.is_saas_domain or request.user and request.user.can_edit_shop(request.shop) %}
      <a href="/actions/view" class="windows-95-start-button mps-button mps-button-blue"><span class="start-button-icon">&#9776; &nbsp </span> {{ request.shop.name }}</a>
      {% endif %}
      </section>

      <section class="call-to-action">
      {% block call_to_action %}
      {% if request.is_saas_domain or request.user and request.user.can_edit_shop(request.shop) %}
      {% if request.user.shops %}
      <a href="/actions/new" class="mps-button mps-button-small mps-button-green">&#65291; New</a>
      {% else %}
      <a href="/s/new" class="mps-button mps-button-small mps-button-green">&#65291; New Shop</a>
      {% endif %}
      {% endif %}

      {% endblock call_to_action %}
      </section>
      {% endif %}

  </section >
  
  <section class="content">
  {% block content %}
  {% endblock %}
  </section>

<!-- main -->
</section>

{% include 'snippets/footer.j2' %}

{% if request.shop and request.shop.sandbox_mode %}
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="sandbox-duotone-blue">
      <feColorMatrix type="matrix" values="
        0.3 0.3 0.3 0 0
        0.1 0.1 0.1 0 0
        0.5 0.5 0.5 0 0.2
        0   0   0   1 0" />
    </filter>
    <filter id="sandbox-duotone-green">
      <feColorMatrix type="matrix" values="
        0.1 0.1 0.1 0 0
        0.4 0.4 0.4 0 0.1
        0.2 0.2 0.2 0 0
        0   0   0   1 0" />
    </filter>
    <filter id="sandbox-grain">
      <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" result="noise"/>
      <feColorMatrix type="saturate" values="0" in="noise" result="mono"/>
      <feBlend mode="multiply" in="SourceGraphic" in2="mono"/>
    </filter>
    <filter id="sandbox-vignette">
      <feFlood flood-color="black" flood-opacity="0.4" result="flood"/>
      <feComposite operator="out" in="flood" in2="SourceGraphic" result="shadow"/>
      <feGaussianBlur stdDeviation="40" in="shadow" result="blur"/>
      <feComposite operator="atop" in="blur" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>
<div id="sandbox-toolbar" class="sandbox-toolbar js-only"{% if request.user and request.user.authenticated and request.user.has_s3_bucket %} data-has-bucket="1"{% endif %}>
  <button id="sandbox-toggle" class="sandbox-toggle-btn" title="Toggle sandbox filters">&#x1F3A8; Filters</button>
  <div id="sandbox-panel" class="sandbox-panel" style="display:none">
    <div class="sandbox-panel-header">
      <span>Creative Filters</span>
      <button id="sandbox-close" class="sandbox-close-btn">&times;</button>
    </div>
    <div id="sandbox-presets" class="sandbox-presets"></div>
    <div id="sandbox-sliders" class="sandbox-sliders"></div>
    <div id="sandbox-actions" class="sandbox-actions"></div>
  </div>
</div>
<script src="/static/js/sandbox.js"></script>
{% endif %}

</body>
</html>
