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 -->
        {{ food.portion }} ({{ food.portion_weight }} g)
      </p>
      <p class="kc">
        {{ food.kc_per_serving }} kc
      </p>
    </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.servings_eaten %}
        <input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}" value="●" class="checked">
        {% else %}
        <input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}" value="●" class="unchecked">
        {% endif %}
      </label>
      {% else %}
      <label class="bad">
        {% if loop.index as i32 <= food.servings_eaten %}
        <input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}" value="●" class="checked">
        {% else %}
        <input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}" value="●" class="unchecked">
        {% endif %}
      </label>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>