food-tracker/templates/food.html

<div class="card" id="card-{{ food.id }}">
  <p class="food-name">
    {{ food.name }}
  </p>
  <div class="card-inner">
    <div class="amounts">
      <p class="unit">
        <sup>1</sup>&frasl;<sub>4</sub> Cup
      </p>
      <p class="kc">
        {{ food.kc_per_serving }} kc
      </p>
    </div>
    <div class="buttons">
      <button class="increase" hx-post="/increase/{{ food.id }}" hx-target="#card-{{ food.id }}">+</button>
      <button class="decrease" hx-post="/decrease/{{ food.id }}" hx-target="#card-{{ food.id }}">-</button>
    </div>
    <div class="checkboxes">
      {% for counter in self::range(10) %}
      {% if loop.index as i32 <= food.target_servings %}
      <label class="ok">
        {% if loop.index as i32 <= food.actual_servings %}
        <input type="checkbox" checked>
        {% else %}
        <input type="checkbox">
        {% endif %}
      </label>
      {% else %}
      <label class="bad">
        {% if loop.index as i32 <= food.actual_servings %}
        <input type="checkbox" checked>
        {% else %}
        <input type="checkbox">
        {% endif %}
      </label>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>