neiam /fieri-forever

{# The viewer's rank on one restaurant. Each button posts and swaps this whole
   widget; hx-select is explicit because <body>'s boosted "#content" would
   otherwise be inherited and select nothing from this fragment. An obsession
   shows its start date, editable in place. #}
{% from "_macros.html" import rank_icon, rank_btn, rank_label %}
<div id="rank-{{ restaurant_id }}" class="flex flex-wrap items-center gap-2"
     hx-target="#rank-{{ restaurant_id }}" hx-select="#rank-{{ restaurant_id }}" hx-swap="outerHTML">
  <div class="join">
    {% for r in ranks %}
    <button type="button"
            class="join-item btn btn-xs {% if my_rank == r %}{{ rank_btn(r) }}{% else %}btn-ghost border-base-300{% endif %}"
            title="{{ rank_label(r) }}{% if r == 'obsessed' and my_rank == r and my_since %} since {{ my_since }}{% endif %}"
            aria-pressed="{{ 'true' if my_rank == r else 'false' }}"
            hx-post="/restaurants/{{ restaurant_id }}/rank"
            hx-vals='{"rank": "{{ r }}"}'>
      <i class="fas {{ rank_icon(r) }}"></i><span class="hidden md:inline">{{ rank_label(r) }}</span>
    </button>
    {% endfor %}
  </div>
  {% if my_rank == "to_try" and tried %}
  <span class="text-xs text-info"><i class="fas fa-circle-check"></i> Been there. How was it?</span>
  {% endif %}
  {% if my_rank == "obsessed" %}
  <label class="text-xs flex items-center gap-1 opacity-80">
    since
    <input type="date" name="since" value="{{ my_since or '' }}" aria-label="Obsessed since"
           class="input input-bordered input-xs"
           hx-post="/restaurants/{{ restaurant_id }}/rank" hx-vals='{"rank": "obsessed"}' hx-trigger="change"/>
  </label>
  {% endif %}
</div>