<section class="trail-stats" data-reveal>
  <div class="trail-stats__inner">
    {%- for block in section.blocks -%}
      <div class="trail-stats__item" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
        <div class="trail-stats__number">
          <span class="trail-stats__value" data-count="{{ block.settings.value | replace: ',', '' }}">{{ block.settings.value }}</span>
          {%- if block.settings.unit != blank -%}
            <span class="trail-stats__unit">{{ block.settings.unit }}</span>
          {%- endif -%}
        </div>
        {%- if block.settings.label != blank -%}
          <span class="trail-stats__label">{{ block.settings.label }}</span>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>
</section>

{% schema %}
{
  "name": "Trail Stats",
  "class": "section-trail-stats",
  "settings": [],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat",
      "settings": [
        { "type": "text", "id": "value", "label": "Value", "default": "0" },
        { "type": "text", "id": "unit", "label": "Unit", "default": "ft" },
        { "type": "text", "id": "label", "label": "Label", "default": "Altitude tested" }
      ]
    }
  ],
  "presets": [{ "name": "Trail Stats", "blocks": [{ "type": "stat" }, { "type": "stat" }, { "type": "stat" }, { "type": "stat" }] }]
}
{% endschema %}