{% macro reminder(reminder) %}
  <a
    href="{{ reminder.url ?? "calendar?showActivity={{ reminder.source }},{{ reminder.id }}" }}"
    class="btn btn-list-item btn-transparent flex-col items-start md:flex-row"
    target="_blank"
  >
    <span class="text max-h-none">
      <b>{{ reminder.title }}</b>
      <div class="badge badge-small {% if reminder['id_owner'] == hubleto.authProvider().getUserId() %} badge-blue {% endif %}">@{{ reminder.owner }}</div>
      <div class="badge badge-small badge-lime">{{ reminder.details }}</div>
    </span>
  </a>
{% endmacro %}

{% macro reminders(reminders, viewParams, user) %}
  <div class="list mt-2">
    {% for reminder in reminders %}
      {% if reminder.id_owner == user.id %} {{ _self.reminder(reminder) }} {% endif %}
    {% endfor %}
  </div>
  <div class="list mt-2 text-xs bg-gray-50">
    {% for reminder in reminders %}
      {% if reminder.id_owner != user.id %} {{ _self.reminder(reminder) }} {% endif %}
    {% endfor %}
  </div>
{% endmacro %}


{% if viewParams.remindersToday|length > 0 %}
  <b>{{ translate('Today') }}</b><br/>
  {{ _self.reminders(viewParams.remindersToday, viewParams, user) }}
{% else %}
  <div class="alert alert-info">
    {{ translate("Let's have a break. You have nothing to do for today.") }} 🎉<br/>
  </div>
{% endif %}

<div class="flex gap-2 mt-2 items-center flex-wrap">
  {% if viewParams.remindersTomorrow|length > 0 %}
    <button
      class="btn btn-transparent"
      onclick="$('#reminders-tomorrow').slideToggle();"
    >
      <span class="icon"><i class="fas fa-ellipsis"></i></span>
      <span class="text">{{ viewParams.remindersTomorrow|length }} {{ translate('reminders tomorrow') }}</span>
    </button>
  {% endif %}
  {% if viewParams.remindersLater|length > 0 %}
    <button
      class="btn btn-transparent"
      onclick="$('#reminders-later').slideToggle();"
    >
      <span class="icon"><i class="fas fa-ellipsis"></i></span>
      <span class="text">{{ viewParams.remindersLater|length }} {{ translate('reminders later') }}</span>
    </button>
  {% endif %}
</div>

{% if viewParams.remindersTomorrow|length > 0 %}
  <div id="reminders-tomorrow" style="display:none" class="mt-2">
    <b>{{translate("Tomorrow")}}</b><br/>
    {{ _self.reminders(viewParams.remindersTomorrow, viewParams, user) }}
  </div>
{% endif %}

{% if viewParams.remindersLater|length > 0 %}
  <div id="reminders-later" style="display:none" class="mt-2">
    <b>{{translate("Later")}}</b><br/>
    {{ _self.reminders(viewParams.remindersLater, viewParams, user) }}
  </div>
{% endif %}