berrypod/lib/berrypod_web/live/admin/theme/index.html.heex

<div class="theme-layout">
  <!-- Controls Sidebar -->
  <div
    id="theme-sidebar"
    class={[
      "theme-sidebar",
      if(@sidebar_collapsed,
        do: "theme-sidebar-collapsed",
        else: "theme-sidebar-expanded"
      )
    ]}
  >
    <!-- Collapsed state: just show expand button -->
    <%= if @sidebar_collapsed do %>
      <div class="theme-sidebar-collapsed-inner">
        <button
          type="button"
          phx-click="toggle_sidebar"
          class="theme-collapse-btn"
          aria-label="Expand sidebar"
          aria-expanded="false"
          aria-controls="theme-sidebar"
        >
          <svg
            class="theme-collapse-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            aria-hidden="true"
          >
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </div>
    <% else %>
      <.link href={~p"/admin"} class="theme-back-link">
        <.icon name="hero-arrow-left-mini" class="size-4" /> Admin
      </.link>
      
<!-- Header -->
      <div class="theme-header">
        <div style="flex: 1;">
          <h1 class="theme-title">Theme Studio</h1>
          <p class="theme-subtitle">
            One theme, infinite possibilities. Every combination is designed to work beautifully.
          </p>
        </div>
        <button
          type="button"
          phx-click="toggle_sidebar"
          class="theme-collapse-btn"
          style="margin: -0.25rem -0.5rem 0 0;"
          aria-label="Collapse sidebar"
          aria-expanded="true"
          aria-controls="theme-sidebar"
        >
          <svg
            class="theme-collapse-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            aria-hidden="true"
          >
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </button>
      </div>
      
<!-- Site Name -->
      <div class="theme-field" style="margin-bottom: 1.5rem;">
        <label class="theme-section-label">Shop name</label>
        <form phx-change="update_setting" phx-value-field="site_name">
          <input
            type="text"
            name="site_name"
            value={@theme_settings.site_name}
            placeholder="Your shop name"
            class="admin-input"
            style="padding: 0.75rem 1rem; font-size: 1rem;"
          />
        </form>
      </div>
      
<!-- Branding Section -->
      <div class="theme-panel">
        <label class="theme-section-label" style="margin-bottom: 1rem;">Logo & header</label>
        
<!-- Logo Mode Radio Cards -->
        <div class="admin-stack" style="--admin-stack-gap: 0.5rem; margin-bottom: 1rem;">
          <%= for {value, title, desc} <- [
            {"text-only", "Shop name only", "Your name in the heading font"},
            {"logo-text", "Logo + shop name", "Your logo image with name beside it"},
            {"logo-only", "Logo only", "Just your logo (with text built in)"}
          ] do %>
            <label class={[
              "theme-radio-card",
              if(@theme_settings.logo_mode == value,
                do: "theme-radio-card-active",
                else: ""
              )
            ]}>
              <input
                type="radio"
                name="logo_mode"
                value={value}
                checked={@theme_settings.logo_mode == value}
                phx-click="update_setting"
                phx-value-field="logo_mode"
                phx-value-setting_value={value}
                class="hidden"
              />
              <span class={[
                "theme-radio-dot",
                @theme_settings.logo_mode == value && "theme-radio-dot-active"
              ]}>
                <span class={[
                  "theme-radio-dot-inner",
                  if(@theme_settings.logo_mode == value,
                    do: "theme-radio-dot-inner-active",
                    else: ""
                  )
                ]}>
                </span>
              </span>
              <div style="flex: 1;">
                <div class="theme-radio-title">{title}</div>
                <div class="admin-text-secondary">{desc}</div>
              </div>
            </label>
          <% end %>
        </div>
        
<!-- Logo Upload (for logo-text and logo-only modes) -->
        <%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
          <div class="theme-subsection">
            <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
              Upload logo (SVG or PNG)
            </span>
            <div class="admin-row" style="--admin-row-gap: 0.75rem;">
              <form phx-change="noop" phx-submit="noop" style="flex: 1;">
                <label class="theme-upload-label">
                  <span>Choose file...</span>
                  <.live_file_input upload={@uploads.logo_upload} class="hidden" />
                </label>
              </form>
              <%= if @logo_image do %>
                <div class="theme-thumb theme-thumb-logo">
                  <img
                    src={"/image_cache/#{@logo_image.id}.webp"}
                    alt="Current logo"
                  />
                  <button
                    type="button"
                    phx-click="remove_logo"
                    class="theme-remove-btn"
                    title="Remove logo"
                  >
                    ×
                  </button>
                </div>
                <form
                  phx-change="update_image_alt"
                  phx-value-image-id={@logo_image.id}
                  style="margin-top: 0.5rem;"
                >
                  <label class="admin-row" style="--admin-row-gap: 0.5rem;">
                    <span class="admin-text-secondary shrink-0">Alt text</span>
                    <input
                      type="text"
                      name="alt"
                      value={@logo_image.alt || ""}
                      placeholder="Describe this image"
                      class="admin-input admin-input-sm"
                      style="flex: 1;"
                      phx-debounce="blur"
                    />
                  </label>
                  <p
                    :if={!@logo_image.alt || @logo_image.alt == ""}
                    class="theme-alt-warning"
                  >
                    Missing alt text — add a description for accessibility
                  </p>
                </form>
              <% end %>
            </div>

            <%= for entry <- @uploads.logo_upload.entries do %>
              <div class="theme-progress">
                <div class="theme-progress-bar">
                  <div
                    class="theme-progress-fill"
                    style={"width: #{entry.progress}%"}
                  >
                  </div>
                </div>
                <span class="admin-text-secondary">{entry.progress}%</span>
                <button
                  type="button"
                  phx-click="cancel_upload"
                  phx-value-ref={entry.ref}
                  phx-value-upload="logo_upload"
                  class="theme-upload-cancel"
                >
                  ×
                </button>
              </div>
              <%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
                <p class="theme-error-text">{error_to_string(err)}</p>
              <% end %>
            <% end %>

            <%= for err <- upload_errors(@uploads.logo_upload) do %>
              <p class="theme-error-text">{error_to_string(err)}</p>
            <% end %>
            
<!-- Logo Size Slider -->
            <%= if @logo_image do %>
              <form
                phx-change="update_setting"
                phx-value-field="logo_size"
                style="margin-top: 0.75rem;"
              >
                <div class="theme-slider-header">
                  <span class="theme-slider-label">Logo size</span>
                  <span class="theme-slider-value">{@theme_settings.logo_size}px</span>
                </div>
                <input
                  type="range"
                  min="24"
                  max="120"
                  value={@theme_settings.logo_size}
                  name="logo_size"
                  class="admin-range"
                  style="width: 100%;"
                />
              </form>
              
<!-- SVG Recolor Toggle (only for SVG logos) -->
              <%= if @logo_image.is_svg do %>
                <div style="margin-top: 0.75rem;">
                  <label class="admin-toggle-label">
                    <input
                      type="checkbox"
                      checked={@theme_settings.logo_recolor}
                      phx-click="update_setting"
                      phx-value-field="logo_recolor"
                      phx-value-setting_value={
                        if @theme_settings.logo_recolor, do: "false", else: "true"
                      }
                      class="admin-toggle admin-toggle-sm"
                    />
                    <span class="theme-slider-label">Recolour logo</span>
                  </label>

                  <%= if @theme_settings.logo_recolor do %>
                    <form
                      id="logo-color-form"
                      phx-change="update_color"
                      phx-value-field="logo_color"
                      phx-hook="ColorSync"
                      class="theme-color-row"
                      style="margin-top: 0.5rem;"
                    >
                      <input
                        type="color"
                        name="value"
                        value={@theme_settings.logo_color}
                        class="theme-color-swatch theme-color-swatch-sm"
                      />
                      <span class="theme-color-value">{@theme_settings.logo_color}</span>
                    </form>
                  <% end %>
                </div>
              <% end %>
            <% end %>
          </div>
        <% end %>
      </div>
      
<!-- Site Icon / Favicon -->
      <div class="theme-panel">
        <label class="theme-section-label">Site icon</label>
        <p class="admin-text-tertiary" style="margin-bottom: 1rem;">
          Your icon appears in browser tabs and on home screens.
        </p>
        
<!-- Use logo as icon toggle -->
        <label class="admin-toggle-label" style="margin-bottom: 1rem;">
          <input
            type="checkbox"
            checked={@theme_settings.use_logo_as_icon}
            phx-click="toggle_setting"
            phx-value-field="use_logo_as_icon"
            class="admin-toggle admin-toggle-sm"
          />
          <span class="theme-slider-label">Use logo as favicon</span>
        </label>
        
<!-- Icon upload (only when not using logo) -->
        <%= if !@theme_settings.use_logo_as_icon do %>
          <div style="padding-top: 0.75rem; border-top: 1px solid var(--t-border-default);">
            <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
              Upload icon (PNG or SVG, 512×512+)
            </span>
            <div class="admin-row" style="--admin-row-gap: 0.75rem;">
              <form phx-change="noop" phx-submit="noop" style="flex: 1;">
                <label class="theme-upload-label">
                  <span>Choose file...</span>
                  <.live_file_input upload={@uploads.icon_upload} class="hidden" />
                </label>
              </form>
              <%= if @icon_image do %>
                <div class="theme-thumb theme-thumb-icon">
                  <%= if @icon_image.is_svg do %>
                    <img
                      src={"/images/#{@icon_image.id}/recolored/000000"}
                      alt="Current icon"
                    />
                  <% else %>
                    <img
                      src={"/image_cache/#{@icon_image.id}.webp"}
                      alt="Current icon"
                    />
                  <% end %>
                  <button
                    type="button"
                    phx-click="remove_icon"
                    class="theme-remove-btn"
                    title="Remove icon"
                  >
                    ×
                  </button>
                </div>
              <% end %>
            </div>

            <%= for entry <- @uploads.icon_upload.entries do %>
              <div class="theme-progress">
                <div class="theme-progress-bar">
                  <div
                    class="theme-progress-fill"
                    style={"width: #{entry.progress}%"}
                  >
                  </div>
                </div>
                <span class="admin-text-secondary">{entry.progress}%</span>
                <button
                  type="button"
                  phx-click="cancel_upload"
                  phx-value-ref={entry.ref}
                  phx-value-upload="icon_upload"
                  class="theme-upload-cancel"
                >
                  ×
                </button>
              </div>
              <%= for err <- upload_errors(@uploads.icon_upload, entry) do %>
                <p class="theme-error-text">{error_to_string(err)}</p>
              <% end %>
            <% end %>

            <%= for err <- upload_errors(@uploads.icon_upload) do %>
              <p class="theme-error-text">{error_to_string(err)}</p>
            <% end %>
          </div>
        <% end %>
        
<!-- Short name -->
        <div class="theme-subsection" style="padding-top: 0.75rem;">
          <form phx-change="update_setting" phx-value-field="favicon_short_name">
            <div class="theme-slider-header" style="margin-bottom: 0.25rem;">
              <span class="theme-slider-label">Short name</span>
              <span class="admin-text-tertiary">Home screen label</span>
            </div>
            <input
              type="text"
              name="favicon_short_name"
              value={@theme_settings.favicon_short_name}
              placeholder={String.slice(@theme_settings.site_name, 0, 12)}
              maxlength="12"
              class="admin-input admin-input-sm"
            />
          </form>
        </div>
        
<!-- Icon background colour -->
        <div style="margin-top: 0.75rem;">
          <form
            id="icon-bg-color-form"
            phx-change="update_color"
            phx-value-field="icon_background_color"
            phx-hook="ColorSync"
            class="theme-color-row"
          >
            <input
              type="color"
              name="value"
              value={@theme_settings.icon_background_color}
              class="theme-color-swatch theme-color-swatch-sm"
            />
            <div>
              <span class="theme-slider-label" style="display: block;">Icon background</span>
              <span class="theme-slider-value" style="font-size: 0.75rem;">
                {@theme_settings.icon_background_color}
              </span>
            </div>
          </form>
        </div>
      </div>
      
<!-- Header Background Toggle -->
      <div style="margin-bottom: 1.5rem;">
        <label class="admin-toggle-label">
          <input
            type="checkbox"
            checked={@theme_settings.header_background_enabled}
            phx-click="update_setting"
            phx-value-field="header_background_enabled"
            phx-value-setting_value={
              if @theme_settings.header_background_enabled, do: "false", else: "true"
            }
            class="admin-toggle admin-toggle-sm"
          />
          <span style="font-size: 0.875rem; color: color-mix(in oklch, var(--t-text-primary) 80%, transparent);">
            Header background image
          </span>
        </label>
      </div>
      
<!-- Header Image Upload (only when enabled) -->
      <%= if @theme_settings.header_background_enabled do %>
        <div class="theme-panel">
          <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
            Upload header image
          </span>
          <form phx-change="noop" phx-submit="noop">
            <label class="theme-upload-label">
              <span>Choose file...</span>
              <.live_file_input upload={@uploads.header_upload} class="hidden" />
            </label>
          </form>

          <%= if @header_image do %>
            <div class="theme-thumb theme-thumb-cover theme-thumb-header">
              <img
                src={"/image_cache/#{@header_image.id}.webp"}
                alt="Current header background"
              />
              <button
                type="button"
                phx-click="remove_header"
                class="theme-remove-btn"
                title="Remove header background"
              >
                ×
              </button>
            </div>
            <form
              phx-change="update_image_alt"
              phx-value-image-id={@header_image.id}
              style="margin-top: 0.5rem;"
            >
              <label class="admin-row" style="--admin-row-gap: 0.5rem;">
                <span class="admin-text-secondary shrink-0">Alt text</span>
                <input
                  type="text"
                  name="alt"
                  value={@header_image.alt || ""}
                  placeholder="Describe this image"
                  class="admin-input admin-input-sm"
                  style="flex: 1;"
                  phx-debounce="blur"
                />
              </label>
              <p
                :if={!@header_image.alt || @header_image.alt == ""}
                class="theme-alt-warning"
              >
                Missing alt text — add a description for accessibility
              </p>
            </form>
            
<!-- Header Image Controls -->
            <div class="admin-stack" style="--admin-stack-gap: 0.75rem; margin-top: 0.75rem;">
              <form phx-change="update_setting" phx-value-field="header_zoom">
                <div class="theme-slider-header">
                  <span class="theme-slider-label">Zoom</span>
                  <span class="theme-slider-value">{@theme_settings.header_zoom}%</span>
                </div>
                <input
                  type="range"
                  min="100"
                  max="200"
                  value={@theme_settings.header_zoom}
                  name="header_zoom"
                  class="admin-range"
                  style="width: 100%;"
                />
              </form>
              <form phx-change="update_setting" phx-value-field="header_position_x">
                <div class="theme-slider-header">
                  <span class="theme-slider-label">Horizontal position</span>
                  <span class="theme-slider-value">{@theme_settings.header_position_x}%</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value={@theme_settings.header_position_x}
                  name="header_position_x"
                  class="admin-range"
                  style="width: 100%;"
                />
              </form>
              <form phx-change="update_setting" phx-value-field="header_position_y">
                <div class="theme-slider-header">
                  <span class="theme-slider-label">Vertical position</span>
                  <span class="theme-slider-value">{@theme_settings.header_position_y}%</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value={@theme_settings.header_position_y}
                  name="header_position_y"
                  class="admin-range"
                  style="width: 100%;"
                />
              </form>
            </div>
          <% end %>

          <%= for entry <- @uploads.header_upload.entries do %>
            <div class="theme-progress">
              <div class="theme-progress-bar">
                <div
                  class="theme-progress-fill"
                  style={"width: #{entry.progress}%"}
                >
                </div>
              </div>
              <span class="admin-text-secondary">{entry.progress}%</span>
              <button
                type="button"
                phx-click="cancel_upload"
                phx-value-ref={entry.ref}
                phx-value-upload="header_upload"
                class="theme-upload-cancel"
              >
                ×
              </button>
            </div>
            <%= for err <- upload_errors(@uploads.header_upload, entry) do %>
              <p class="theme-error-text">{error_to_string(err)}</p>
            <% end %>
          <% end %>

          <%= for err <- upload_errors(@uploads.header_upload) do %>
            <p class="theme-error-text">{error_to_string(err)}</p>
          <% end %>
        </div>
      <% end %>
      
<!-- Presets Section -->
      <div style="margin-bottom: 1.5rem;">
        <label class="theme-section-label">Start with a preset</label>
        <div class="theme-presets">
          <%= for {preset_name, description} <- @presets_with_descriptions do %>
            <button
              type="button"
              phx-click="apply_preset"
              phx-value-preset={preset_name}
              class={[
                "theme-preset",
                @active_preset == preset_name && "theme-preset-active"
              ]}
            >
              <div class="theme-preset-name">{preset_name}</div>
              <div class="theme-preset-desc">{description}</div>
            </button>
          <% end %>
        </div>
      </div>
      
<!-- Accent Colors -->
      <div style="margin-bottom: 1.5rem;">
        <label class="theme-section-label">Accent colour</label>
        <form
          id="accent-color-form"
          phx-change="update_color"
          phx-value-field="accent_color"
          phx-hook="ColorSync"
        >
          <div class="theme-color-row">
            <input
              type="color"
              id="accent-color-picker"
              name="value"
              value={@theme_settings.accent_color}
              class="theme-color-swatch"
            />
            <span class="theme-color-value">{@theme_settings.accent_color}</span>
          </div>
        </form>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label class="theme-section-label">Hover colour</label>
        <form
          id="secondary-accent-color-form"
          phx-change="update_color"
          phx-value-field="secondary_accent_color"
          phx-hook="ColorSync"
        >
          <div class="theme-color-row">
            <input
              type="color"
              id="secondary-accent-color-picker"
              name="value"
              value={@theme_settings.secondary_accent_color}
              class="theme-color-swatch"
            />
            <span class="theme-color-value">{@theme_settings.secondary_accent_color}</span>
          </div>
        </form>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label class="theme-section-label">Sale colour</label>
        <form
          id="sale-color-form"
          phx-change="update_color"
          phx-value-field="sale_color"
          phx-hook="ColorSync"
        >
          <div class="theme-color-row">
            <input
              type="color"
              id="sale-color-picker"
              name="value"
              value={@theme_settings.sale_color}
              class="theme-color-swatch"
            />
            <span class="theme-color-value">{@theme_settings.sale_color}</span>
          </div>
        </form>
      </div>
      
<!-- Customise Section -->
      <details
        class="theme-customise"
        id="customise-section"
        open={@customise_open}
      >
        <summary class="theme-customise-summary" phx-click="toggle_customise">
          <span class="theme-customise-label">Customise</span>
          <svg
            class="theme-customise-chevron"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </summary>

        <div style="padding-top: 1rem;">
          <!-- Typography Group -->
          <div class="theme-group">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <polyline points="4 7 4 4 20 4 20 7"></polyline>
                <line x1="9" y1="20" x2="15" y2="20"></line>
                <line x1="12" y1="4" x2="12" y2="20"></line>
              </svg>
              <span class="theme-group-title">Typography</span>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Font style</label>
              <div class="theme-chips">
                <%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="typography"
                    phx-value-setting_value={typo}
                    class={[
                      "theme-chip",
                      @theme_settings.typography == typo && "theme-chip-active"
                    ]}
                  >
                    {typo}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Font size</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="font_size"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.font_size == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Heading weight</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="heading_weight"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.heading_weight == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>
          </div>
          
<!-- Colours Group -->
          <div class="theme-group">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
              <span class="theme-group-title">Colours</span>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Colour mood</label>
              <div class="theme-chips">
                <%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="mood"
                    phx-value-setting_value={mood}
                    class={["theme-chip", @theme_settings.mood == mood && "theme-chip-active"]}
                  >
                    {mood}
                  </button>
                <% end %>
              </div>
            </div>
          </div>
          
<!-- Layout Group -->
          <div class="theme-group">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
                <line x1="9" y1="21" x2="9" y2="9"></line>
              </svg>
              <span class="theme-group-title">Layout</span>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Product grid</label>
              <div class="theme-chips">
                <%= for cols <- ["2", "3", "4"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="grid_columns"
                    phx-value-setting_value={cols}
                    class={[
                      "theme-chip",
                      @theme_settings.grid_columns == cols && "theme-chip-active"
                    ]}
                  >
                    {cols} columns
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Density</label>
              <div class="theme-chips">
                <%= for density <- ["spacious", "balanced", "compact"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="density"
                    phx-value-setting_value={density}
                    class={[
                      "theme-chip",
                      @theme_settings.density == density && "theme-chip-active"
                    ]}
                  >
                    {density}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Header layout</label>
              <div class="theme-chips">
                <%= for layout <- ["standard", "centered", "left"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="header_layout"
                    phx-value-setting_value={layout}
                    class={[
                      "theme-chip",
                      @theme_settings.header_layout == layout && "theme-chip-active"
                    ]}
                  >
                    {layout}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.announcement_bar}
                  phx-click="toggle_setting"
                  phx-value-field="announcement_bar"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Announcement bar</span>
              </label>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.sticky_header}
                  phx-click="toggle_setting"
                  phx-value-field="sticky_header"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Sticky header</span>
              </label>
            </div>
          </div>
          
<!-- Shape Group -->
          <div style="margin-bottom: 1rem;">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              </svg>
              <span class="theme-group-title">Shape</span>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Corner style</label>
              <div class="theme-chips">
                <%= for shape <- ["sharp", "soft", "round", "pill"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="shape"
                    phx-value-setting_value={shape}
                    class={["theme-chip", @theme_settings.shape == shape && "theme-chip-active"]}
                  >
                    {shape}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Card shadow</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="card_shadow"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.card_shadow == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Button style</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="button_style"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.button_style == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>
          </div>
          
<!-- Products Group -->
          <div class="theme-group">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
              </svg>
              <span class="theme-group-title">Products</span>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Content width</label>
              <div class="theme-chips">
                <%= for width <- ["contained", "wide", "full"] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="layout_width"
                    phx-value-setting_value={width}
                    class={[
                      "theme-chip",
                      @theme_settings.layout_width == width && "theme-chip-active"
                    ]}
                  >
                    {width}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Image aspect ratio</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="image_aspect_ratio"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.image_aspect_ratio == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="theme-section-label">Product text alignment</label>
              <div class="theme-chips">
                <%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
                  <button
                    type="button"
                    phx-click="update_setting"
                    phx-value-field="product_text_align"
                    phx-value-setting_value={value}
                    class={[
                      "theme-chip",
                      @theme_settings.product_text_align == value && "theme-chip-active"
                    ]}
                  >
                    {label}
                  </button>
                <% end %>
              </div>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.hover_image}
                  phx-click="toggle_setting"
                  phx-value-field="hover_image"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Second image on hover</span>
              </label>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.show_prices}
                  phx-click="toggle_setting"
                  phx-value-field="show_prices"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Show prices</span>
              </label>
            </div>
          </div>
          
<!-- Product Page Group -->
          <div style="margin-bottom: 1rem;">
            <div class="theme-group-header">
              <svg
                class="theme-group-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
              </svg>
              <span class="theme-group-title">Product page</span>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.pdp_trust_badges}
                  phx-click="toggle_setting"
                  phx-value-field="pdp_trust_badges"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Trust badges</span>
              </label>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.pdp_reviews}
                  phx-click="toggle_setting"
                  phx-value-field="pdp_reviews"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Reviews section</span>
              </label>
            </div>

            <div class="theme-field">
              <label class="admin-check-label">
                <input
                  type="checkbox"
                  checked={@theme_settings.pdp_related_products}
                  phx-click="toggle_setting"
                  phx-value-field="pdp_related_products"
                  class="admin-checkbox admin-checkbox-sm"
                />
                <span style="font-size: 0.875rem;">Related products</span>
              </label>
            </div>
          </div>
        </div>
      </details>
      
<!-- Current Combination Display -->
      <div class="theme-combination">
        <div class="theme-combination-label">Current combination</div>
        <div class="theme-combination-value">
          {String.capitalize(@theme_settings.mood)} · {String.capitalize(
            @theme_settings.typography
          )} · {String.capitalize(@theme_settings.shape)} · {String.capitalize(
            @theme_settings.density
          )} · {@theme_settings.grid_columns}-up · {String.capitalize(
            @theme_settings.header_layout
          )}
        </div>
        <div class="theme-combination-footnote">
          One of 100,000+ possible combinations
        </div>
      </div>
    <% end %>
  </div>
  
<!-- Preview Area -->
  <div class="theme-preview-area">
    <div class="theme-preview-container">
      <!-- Preview Page Switcher -->
      <div class="theme-preview-tabs">
        <%= for {page_name, label} <- [
          {:home, "Home"},
          {:collection, "Collection"},
          {:pdp, "Product"},
          {:cart, "Cart"},
          {:about, "About"},
          {:delivery, "Delivery"},
          {:privacy, "Privacy"},
          {:terms, "Terms"},
          {:contact, "Contact"},
          {:error, "404"}
        ] do %>
          <button
            type="button"
            phx-click="change_preview_page"
            phx-value-page={page_name}
            class={[
              "theme-preview-tab",
              @preview_page == page_name && "theme-preview-tab-active"
            ]}
          >
            {label}
          </button>
        <% end %>
      </div>
      
<!-- Browser Chrome -->
      <div class="theme-browser-chrome">
        <div class="theme-browser-dots">
          <div class="theme-browser-dot theme-browser-dot-close"></div>
          <div class="theme-browser-dot theme-browser-dot-min"></div>
          <div class="theme-browser-dot theme-browser-dot-max"></div>
        </div>
        <div class="theme-browser-url">
          <svg
            class="theme-browser-url-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
          </svg>
          <span class="theme-browser-url-text truncate">
            {@theme_settings.site_name |> String.downcase() |> String.replace(" ", "")}.myshopify.com
          </span>
        </div>
      </div>
      
<!-- Preview Frame -->
      <div
        class="themed theme-preview-frame"
        data-mood={@theme_settings.mood}
        data-typography={@theme_settings.typography}
        data-shape={@theme_settings.shape}
        data-density={@theme_settings.density}
        data-grid={@theme_settings.grid_columns}
        data-header={@theme_settings.header_layout}
        data-sticky={to_string(@theme_settings.sticky_header)}
        data-layout={@theme_settings.layout_width}
        data-shadow={@theme_settings.card_shadow}
        data-button-style={@theme_settings.button_style}
      >
        <style>
          /* All font faces for theme switching */
          <%= Phoenix.HTML.raw(Berrypod.Theme.Fonts.generate_all_font_faces(
                &BerrypodWeb.Endpoint.static_path/1
              )) %>
          /* Generated theme CSS */
          <%= Phoenix.HTML.raw(@generated_css) %>
        </style>

        <.preview_page
          page={@preview_page}
          preview_data={@preview_data}
          theme_settings={@theme_settings}
          logo_image={@logo_image}
          header_image={@header_image}
          cart_drawer_open={@cart_drawer_open}
        />
      </div>
    </div>
  </div>
</div>