<div id="calendar-{{ calendar.id }}" class="mb-4">
  <div class="d-flex align-items-center gap-3">
    <div>
      <h1 class="mb-1">{{ calendar.name }}</h1>
      <small class="text-muted">Timezone: {{ calendar.timezone }}</small>
    </div>
    <button hx-get="{% url 'hebcal:update_calendar' pk=calendar.pk %}"
            hx-target="body"
            hx-swap="beforeend"
            data-bs-toggle="tooltip"
            class="btn btn-primary align-self-start mt-2"
            title="Edit Calendar">
      <i