{% comment %} Wishlist App Embed Block — sitewide injection {% endcomment %}

<div
  id="wl-root"
  data-shop="{{ shop.permanent_domain }}"
  data-card-selector="{{ block.settings.product_card_selector | escape }}"
  data-button-style="{{ block.settings.button_style | escape }}"
  data-icon-style="{{ block.settings.icon_style | escape }}"
  data-stroke-width="{{ block.settings.stroke_width }}"
  data-button-position="{{ block.settings.button_position | escape }}"
  data-button-offset-x="{{ block.settings.button_offset_x }}"
  data-button-offset-y="{{ block.settings.button_offset_y }}"
  data-button-color="{{ block.settings.button_color }}"
  data-button-hover-color="{{ block.settings.button_hover_color }}"
  data-button-text-color="{{ block.settings.button_text_color }}"
  data-drawer-button-color="{{ block.settings.drawer_button_color }}"
  data-drawer-button-text-color="{{ block.settings.drawer_button_text_color }}"
  data-drawer-toolbar-color="{{ block.settings.drawer_toolbar_color }}"
  data-drawer-toolbar-text-color="{{ block.settings.drawer_toolbar_text_color }}"
  data-floating-button-color="{{ block.settings.floating_button_color }}"
  data-floating-button-text-color="{{ block.settings.floating_button_text_color }}"
  data-floating-button-hover-color="{{ block.settings.floating_button_hover_color }}"
  data-product-card-button-color="{{ block.settings.product_card_button_color }}"
  data-product-card-button-text-color="{{ block.settings.product_card_button_text_color }}"
  data-product-card-button-active-color="{{ block.settings.product_card_button_active_color }}"
  data-product-card-button-active-text-color="{{ block.settings.product_card_button_active_text_color }}"
  data-toast-enabled="{{ block.settings.enable_toast }}"
  data-toast-position="{{ block.settings.toast_position }}"
></div>

<script src="{{ 'wishlist.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Wishlist Go",
  "target": "body",
  "stylesheet": "wishlist.css",
  "settings": [
    {
      "type": "header",
      "content": "Icon"
    },
    {
      "type": "select",
      "id": "icon_style",
      "label": "Icon style",
      "options": [
        { "value": "heart", "label": "Heart" },
        { "value": "bookmark", "label": "Bookmark" }
      ],
      "default": "heart",
      "info": "Applies to product cards, header icon, and product page button"
    },
    {
      "type": "range",
      "id": "stroke_width",
      "label": "Icon stroke width",
      "min": 1,
      "max": 3,
      "step": 0.5,
      "default": 2,
      "unit": "px",
      "info": "Applies to all wishlist icons sitewide"
    },
    {
      "type": "header",
      "content": "Product Card"
    },
    {
      "type": "text",
      "id": "product_card_selector",
      "label": "Product card CSS selector",
      "default": ".card-wrapper",
      "info": "The CSS class wrapping each product card in your theme. Dawn uses .card-wrapper"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "filled", "label": "Filled" },
        { "value": "outline", "label": "Outline" }
      ],
      "default": "outline"
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Wishlist button position",
      "options": [
        { "value": "left",  "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right",
      "info": "Side of the product card where the wishlist button appears"
    },
    {
      "type": "range",
      "id": "button_offset_x",
      "label": "Horizontal offset",
      "min": 0,
      "max": 40,
      "step": 2,
      "default": 10,
      "unit": "px",
      "info": "Distance from the left or right edge of the card"
    },
    {
      "type": "range",
      "id": "button_offset_y",
      "label": "Vertical offset",
      "min": 0,
      "max": 40,
      "step": 2,
      "default": 10,
      "unit": "px",
      "info": "Distance from the top edge of the card"
    },
    {
      "type": "header",
      "content": "Toast Notifications"
    },
    {
      "type": "checkbox",
      "id": "enable_toast",
      "label": "Enable toast notifications",
      "default": true,
      "info": "Show a toast message when items are added to or removed from the wishlist"
    },
    {
      "type": "select",
      "id": "toast_position",
      "label": "Toast position",
      "options": [
        { "value": "bottom-right", "label": "Bottom Right" },
        { "value": "bottom-left", "label": "Bottom Left" },
        { "value": "bottom-center", "label": "Bottom Center" },
        { "value": "top-right", "label": "Top Right" },
        { "value": "top-left", "label": "Top Left" },
        { "value": "top-center", "label": "Top Center" }
      ],
      "default": "top-left"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Add to Cart Button Color",
      "default": "#111111",
      "info": "Color for the main Add to Cart and action buttons"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#333333",
      "info": "Button color on hover state"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff",
      "info": "Text color on buttons"
    },
    {
      "type": "color",
      "id": "drawer_button_color",
      "label": "Drawer Button Color",
      "default": "#111111",
      "info": "Color for buttons inside the wishlist drawer"
    },
    {
      "type": "color",
      "id": "drawer_button_text_color",
      "label": "Drawer Button Text Color",
      "default": "#ffffff",
      "info": "Text color for drawer buttons"
    },
    {
      "type": "color",
      "id": "drawer_toolbar_color",
      "label": "Drawer Toolbar Color",
      "default": "#f9fafb",
      "info": "Background color for filters and toolbar"
    },
    {
      "type": "color",
      "id": "drawer_toolbar_text_color",
      "label": "Drawer Toolbar Text Color",
      "default": "#111111",
      "info": "Text color in toolbar elements"
    },
    {
      "type": "header",
      "content": "Floating Button"
    },
    {
      "type": "color",
      "id": "floating_button_color",
      "label": "Floating Button Background Color",
      "default": "#111111",
      "info": "Background color of the fixed floating wishlist button"
    },
    {
      "type": "color",
      "id": "floating_button_text_color",
      "label": "Floating Button Icon Color",
      "default": "#ffffff",
      "info": "Icon color on the floating button"
    },
    {
      "type": "color",
      "id": "floating_button_hover_color",
      "label": "Floating Button Hover Color",
      "default": "#222222",
      "info": "Floating button background on hover"
    },
    {
      "type": "header",
      "content": "Product Card Button"
    },
    {
      "type": "color",
      "id": "product_card_button_color",
      "label": "Product Card Button Background Color",
      "default": "rgba(255, 255, 255, 0.92)",
      "info": "Background color of the wishlist button on product cards"
    },
    {
      "type": "color",
      "id": "product_card_button_text_color",
      "label": "Product Card Button Icon Color",
      "default": "#111111",
      "info": "Icon color for the product card wishlist button"
    },
    {
      "type": "color",
      "id": "product_card_button_active_color",
      "label": "Product Card Button Active Background Color",
      "default": "#fff0f0",
      "info": "Background color when item is in wishlist"
    },
    {
      "type": "color",
      "id": "product_card_button_active_text_color",
      "label": "Product Card Button Active Icon Color",
      "default": "#e53e3e",
      "info": "Icon color when item is in wishlist"
    }
  ]
}
{% endschema %}