{%- comment -%}
  Build your day: tap servings, watch the ring fill toward a daily protein target, add the picks to the cart.
  Picks are blocks (any product with a protein number). A guide only, not medical advice.
{%- endcomment -%}
<section class="jp-wrap jp-day" data-jp-day data-goal="{{ section.settings.goal }}" aria-labelledby="jp-day-h">
  <div class="jp-day__l">
    <div class="jp-kick jp-kick--sky">{{ section.settings.kicker }}</div>
    <h2 class="jp-day__h" id="jp-day-h">{{ section.settings.heading }}</h2>
    <div class="jp-day__ring">
      <svg viewBox="0 0 240 240" aria-hidden="true"><circle class="jp-day__bg" cx="120" cy="120" r="104"/><circle class="jp-day__fg" cx="120" cy="120" r="104" data-ring/></svg>
      <div class="jp-day__n"><b data-total>0</b><span>of <i data-goal-out>{{ section.settings.goal }}</i> g protein</span></div>
    </div>
    <label class="jp-day__g">Daily target <b data-gout>{{ section.settings.goal }} g</b>
      <input type="range" min="60" max="220" step="5" value="{{ section.settings.goal }}" data-goal-in aria-label="Daily protein target in grams">
    </label>
    <p class="jp-day__msg" data-msg aria-live="polite">Tap + on a serving to start.</p>
    <button type="button" class="jp-btn jp-btn--light" data-add disabled>Add these to cart</button>
    <p class="jp-day__fine">Each pick adds one pack to your cart. A guide only, not medical advice.</p>
  </div>
  <div class="jp-day__grid">
    {%- for b in section.blocks -%}
      {%- assign p = b.settings.product -%}
      {%- if p != blank -%}
        {%- assign v = p.selected_or_first_available_variant -%}
        {%- assign pr = p.metafields.nutrition.protein_g.value | default: p.metafields.jprotein.protein_g.value -%}
        {%- if pr != blank and v.available -%}
          <div class="jp-day__it" data-g="{{ pr }}" data-vid="{{ v.id }}" data-q="0" {{ b.shopify_attributes }}>
            <a class="jp-day__img" href="{{ p.url }}" tabindex="-1" aria-hidden="true">{{ p.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: '' }}</a>
            <div class="jp-day__t">{{ p.title | split: ',' | first | truncate: 46 }}</div>
            <div class="jp-day__p"><b>{% render 'jp-num', n: pr %} g</b> per serving</div>
            <div class="jp-day__q">
              <button type="button" data-minus aria-label="Remove one serving of {{ p.title | escape }}">&minus;</button>
              <span data-qty>0</span>
              <button type="button" data-plus aria-label="Add one serving of {{ p.title | escape }}">+</button>
            </div>
          </div>
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Build your day",
  "settings": [
    { "type": "text", "id": "kicker", "label": "Small label", "default": "Build your day" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "See your protein add up" },
    { "type": "range", "id": "goal", "label": "Starting target (g)", "min": 60, "max": 220, "step": 5, "default": 125 }
  ],
  "blocks": [
    { "type": "pick", "name": "Pick", "settings": [{ "type": "product", "id": "product", "label": "Product (needs a protein number)" }] }
  ],
  "presets": [{ "name": "Build your day" }]
}
{% endschema %}