{% assign rates = site.data.market_rates %}

{% if rates.commodities or rates.forex or rates.crypto %}

<section class="ticker-board" aria-label="Live market rates">

  <div class="ticker-tabs" role="tablist" aria-label="Market categories">

    {% if rates.forex %}

    <button type="button" class="ticker-tab is-active" role="tab" id="tab-forex" aria-selected="true" aria-controls="panel-forex" data-tab="forex">Major FX</button>

    {% endif %}

    {% if rates.crypto %}

    <button type="button" class="ticker-tab" role="tab" id="tab-crypto" aria-selected="false" aria-controls="panel-crypto" data-tab="crypto">OTC / Crypto <span class="ticker-tab-hint">Dark Market</span></button>

    {% endif %}

    {% if rates.commodities %}

    <button type="button" class="ticker-tab" role="tab" id="tab-commodities" aria-selected="false" aria-controls="panel-commodities" data-tab="commodities">Spot Commodities</button>

    {% endif %}

  </div>



  {% if rates.forex %}

  <div class="ticker-panel is-active" role="tabpanel" id="panel-forex" aria-labelledby="tab-forex" data-panel="forex">

    <div class="ticker-grid ticker-grid-6">

      {% for pair in rates.forex %}

        {% if forloop.index <= 6 %}

        <div class="ticker-card">

          <div class="ticker-label">{{ pair[1].label }}</div>

          <div class="ticker-price mono">{{ pair[1].price }}</div>

          {% if pair[1].change_pct %}

            <div class="ticker-change {% if pair[1].change_pct >= 0 %}up{% else %}down{% endif %}">{{ pair[1].change_pct }}%</div>

          {% endif %}

        </div>

        {% endif %}

      {% endfor %}

    </div>

    <div class="ticker-grid ticker-grid-6">

      {% for pair in rates.forex %}

        {% if forloop.index > 6 and forloop.index <= 12 %}

        <div class="ticker-card">

          <div class="ticker-label">{{ pair[1].label }}</div>

          <div class="ticker-price mono">{{ pair[1].price }}</div>

          {% if pair[1].change_pct %}

            <div class="ticker-change {% if pair[1].change_pct >= 0 %}up{% else %}down{% endif %}">{{ pair[1].change_pct }}%</div>

          {% endif %}

        </div>

        {% endif %}

      {% endfor %}

    </div>

  </div>

  {% endif %}



  {% if rates.crypto %}

  <div class="ticker-panel" role="tabpanel" id="panel-crypto" aria-labelledby="tab-crypto" data-panel="crypto" hidden>

    <div class="ticker-grid ticker-grid-6">

      {% for pair in rates.crypto %}

        <div class="ticker-card ticker-card-crypto">

          <div class="ticker-label">{{ pair[1].label }}</div>

          <div class="ticker-price mono">{{ pair[1].price }}</div>

          {% if pair[1].change_24h_pct %}

            <div class="ticker-change {% if pair[1].change_24h_pct >= 0 %}up{% else %}down{% endif %}">{{ pair[1].change_24h_pct }}%</div>

          {% endif %}

        </div>

      {% endfor %}

    </div>

  </div>

  {% endif %}



  {% if rates.commodities %}

  <div class="ticker-panel" role="tabpanel" id="panel-commodities" aria-labelledby="tab-commodities" data-panel="commodities" hidden>

    <div class="ticker-grid ticker-grid-6">

      {% for pair in rates.commodities %}

        <div class="ticker-card">

          <div class="ticker-label">{{ pair[1].label }}</div>

          <div class="ticker-price mono">{{ pair[1].price }}</div>

          {% if pair[1].change_24h_pct %}

            <div class="ticker-change {% if pair[1].change_24h_pct >= 0 %}up{% else %}down{% endif %}">{{ pair[1].change_24h_pct }}%</div>

          {% endif %}

        </div>

      {% endfor %}

    </div>

  </div>

  {% endif %}

</section>

<script>

(function () {

  var board = document.currentScript && document.currentScript.previousElementSibling;

  if (!board || !board.classList.contains('ticker-board')) return;

  var tabs = board.querySelectorAll('.ticker-tab');

  var panels = board.querySelectorAll('.ticker-panel');

  tabs.forEach(function (tab) {

    tab.addEventListener('click', function () {

      var target = tab.getAttribute('data-tab');

      tabs.forEach(function (t) {

        var active = t === tab;

        t.classList.toggle('is-active', active);

        t.setAttribute('aria-selected', active ? 'true' : 'false');

      });

      panels.forEach(function (panel) {

        var active = panel.getAttribute('data-panel') === target;

        panel.classList.toggle('is-active', active);

        panel.hidden = !active;

      });

    });

  });

})();

</script>

{% endif %}