Currency Switcher

{%- comment -%}
  modblo. Currency Switcher
  Replaces BEST Currency Converter / MLV-It / Geolocation app currency switchers.
  Uses Shopify's native Markets / localization (no third-party SDK, no
  exchange-rate-api dependency). Visitors pick their country; Shopify
  applies the matching currency, language, and (if Markets is configured)
  region-specific pricing automatically.
{%- endcomment -%}

{%- if localization.available_countries.size > 1 -%}
<div class="modblo-cs" data-modblo-cs
     data-section-id="{{ section.id }}"
     data-display="{{ section.settings.display | default: 'select' }}"
     style="--modblo-cs-bg: {{ section.settings.bg }};
            --modblo-cs-fg: {{ section.settings.fg }};
            --modblo-cs-accent: {{ section.settings.accent }};">

  {%- if section.settings.display == 'select' -%}
    {%- form 'localization' -%}
      <div class="modblo-cs__select-wrap">
        <span class="modblo-cs__current" aria-hidden="true">
          {{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}
        </span>
        <select name="country_code" class="modblo-cs__select" aria-label="Select country and currency">
          {%- for country in localization.available_countries -%}
            <option value="{{ country.iso_code }}" {% if country.iso_code == localization.country.iso_code %}selected{% endif %}>
              {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
            </option>
          {%- endfor -%}
        </select>
        <span class="modblo-cs__chevron" aria-hidden="true">
          <svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 4.5l3 3 3-3"/>
          </svg>
        </span>
      </div>
      <noscript><button type="submit" class="modblo-cs__submit">Update</button></noscript>
    {%- endform -%}

  {%- else -%}
    {%- comment -%} Pill / dropdown panel display {%- endcomment -%}
    <button type="button" class="modblo-cs__trigger" data-modblo-cs-toggle aria-expanded="false" aria-haspopup="listbox">
      <span class="modblo-cs__trigger-flag" aria-hidden="true">{{ localization.country.currency.iso_code }}</span>
      <span class="modblo-cs__trigger-name">{{ localization.country.name }}</span>
      <svg class="modblo-cs__trigger-caret" viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M3 4.5l3 3 3-3"/>
      </svg>
    </button>

    <div class="modblo-cs__panel" data-modblo-cs-panel hidden role="listbox">
      {%- form 'localization' -%}
        <ul class="modblo-cs__list">
          {%- for country in localization.available_countries -%}
            <li>
              <button type="submit" name="country_code" value="{{ country.iso_code }}"
                      class="modblo-cs__option {% if country.iso_code == localization.country.iso_code %}is-active{% endif %}"
                      role="option" aria-selected="{% if country.iso_code == localization.country.iso_code %}true{% else %}false{% endif %}">
                <span class="modblo-cs__option-code">{{ country.currency.iso_code }}</span>
                <span class="modblo-cs__option-name">{{ country.name }}</span>
                <span class="modblo-cs__option-sym">{{ country.currency.symbol }}</span>
              </button>
            </li>
          {%- endfor -%}
        </ul>
      {%- endform -%}
    </div>
  {%- endif -%}
</div>

<style>
  .modblo-cs { position: relative; display: inline-block; }

  /* SELECT mode */
  .modblo-cs__select-wrap {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: color-mix(in oklab, var(--modblo-cs-fg) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--modblo-cs-fg) 12%, transparent);
    border-radius: 10px;
    padding: 0 30px 0 12px;
    height: 36px;
    color: var(--modblo-cs-fg, #0b0b0c);
  }
  .modblo-cs__select-wrap:hover { border-color: color-mix(in oklab, var(--modblo-cs-fg) 25%, transparent); }
  .modblo-cs__current {
    font-size: 13px; font-weight: 600;
    pointer-events: none;
  }
  .modblo-cs__select {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
    background: transparent; border: 0;
    width: 100%; height: 100%;
    appearance: none;
  }
  .modblo-cs__chevron {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    pointer-events: none; opacity: .55;
  }
  .modblo-cs__submit {
    background: var(--modblo-cs-accent, #6366f1); color: #fff;
    border: 0; padding: 6px 12px; margin-left: 6px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer;
  }

  /* PANEL mode */
  .modblo-cs__trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: color-mix(in oklab, var(--modblo-cs-fg) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--modblo-cs-fg) 12%, transparent);
    color: inherit; cursor: pointer;
    padding: 7px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    transition: background .2s, border-color .2s;
  }
  .modblo-cs__trigger:hover { border-color: color-mix(in oklab, var(--modblo-cs-fg) 25%, transparent); }
  .modblo-cs__trigger-flag {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: color-mix(in oklab, var(--modblo-cs-fg) 10%, transparent);
    padding: 2px 6px; border-radius: 4px;
  }
  .modblo-cs__trigger-caret { opacity: .55; transition: transform .2s; }
  .modblo-cs__trigger[aria-expanded="true"] .modblo-cs__trigger-caret { transform: rotate(180deg); }

  .modblo-cs__panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 280px; max-height: 360px; overflow-y: auto;
    background: var(--modblo-cs-bg, #fff); color: var(--modblo-cs-fg, #0b0b0c);
    border: 1px solid color-mix(in oklab, var(--modblo-cs-fg) 10%, transparent);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.18);
    z-index: 30; padding: 6px;
  }
  .modblo-cs__panel[hidden] { display: none; }

  .modblo-cs__list { list-style: none; padding: 0; margin: 0; }
  .modblo-cs__option {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: transparent; color: inherit; cursor: pointer;
    border: 0; padding: 9px 10px; border-radius: 8px;
    font-size: 13px; text-align: left;
    transition: background .15s;
  }
  .modblo-cs__option:hover { background: color-mix(in oklab, var(--modblo-cs-fg) 5%, transparent); }
  .modblo-cs__option.is-active { background: color-mix(in oklab, var(--modblo-cs-accent, #6366f1) 8%, transparent); }
  .modblo-cs__option-code {
    font-weight: 700; font-size: 11px; letter-spacing: .04em;
    background: color-mix(in oklab, var(--modblo-cs-fg) 8%, transparent);
    padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
    min-width: 38px; text-align: center;
  }
  .modblo-cs__option-name { flex: 1; }
  .modblo-cs__option-sym { opacity: .55; font-size: 13px; flex-shrink: 0; }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-cs][data-section-id="{{ section.id }}"]');
    if (!root) return;

    /* SELECT mode: auto-submit form on change */
    var select = root.querySelector('.modblo-cs__select');
    if (select) {
      select.addEventListener('change', function () {
        select.closest('form').submit();
      });
    }

    /* PANEL mode: toggle dropdown */
    var trigger = root.querySelector('[data-modblo-cs-toggle]');
    var panel = root.querySelector('[data-modblo-cs-panel]');
    if (trigger && panel) {
      trigger.addEventListener('click', function (e) {
        e.stopPropagation();
        var open = panel.hidden;
        panel.hidden = !open;
        trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
      document.addEventListener('click', function (e) {
        if (!root.contains(e.target)) {
          panel.hidden = true;
          trigger.setAttribute('aria-expanded', 'false');
        }
      });
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
          panel.hidden = true;
          trigger.setAttribute('aria-expanded', 'false');
        }
      });
    }
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Currency Switcher",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Display" },
    { "type": "select", "id": "display", "label": "Display style", "default": "select",
      "options": [
        { "value": "select", "label": "Compact select (CAD $)" },
        { "value": "panel", "label": "Pill + dropdown panel" }
      ]
    },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Currency Switcher" }]
}
{% endschema %}