40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
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>⁄<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>
|