{% import "components.html" as c with context %}
<div id="conversation-reminders" data-reminders x-poll data-poll='{{ poll("reminders", selected, thread=contact.thread_id, since=reminder_since, failed=reminders.answer not in ("listed", "offline"))|tojson }}' hx-get="{{ c.messages_url(selected, contact)|replace('/messages?', '/reminders?') }}" hx-trigger="poll-refresh" hx-swap="outerHTML">
    <div class="section">{{ c.icon("alarm-clock") }} {{ t.text("profile.reminders") }} · {{ reminders.items|length }}</div>
    <div class="rows">
      {% for item in reminders.items %}
      <div class="row">{{ c.icon("repeat" if item.repeat_rule else "calendar") }}<div><b>{{ item.title }}</b><small>{% if item.repeat_rule %}{{ item.repeat_rule|repeat }} · {% endif %}{% if item.next_fire_at_ms %}{{ c.time(item.next_fire_at_ms, "due") }}{% endif %}</small></div></div>
      {% endfor %}
      {% if reminders.answer == "offline" %}<div class="empty">{{ t.text("contacts.offline") }}</div>
      {% elif reminders.answer != "listed" %}<div class="empty">{{ t.text("contacts." ~ reminders.answer, {"code": reminders.code}) }}</div>
      {% elif not reminders.items %}{{ c.empty(t.text("profile.no_reminders"), "alarm-clock") }}{% endif %}
    </div>
</div>