<div id="calendar_entry_options_{{ entry.id }}" class="flex flex-col md:flex-row gap-1">
  {% if entry.state == 'provisional' %}
  <form
      hx-post="{{ url_for(
          'calendars.calendar.day.calendar_entries.calendar_entry.confirm_entry',
          slug=post.slug,
          calendar_slug=calendar.slug,
          day=day,
          month=month,
          year=year,
          entry_id=entry.id
        ) }}"    
      hx-select="#calendar_entry_options_{{ entry.id }}"
      hx-target="#calendar_entry_options_{{entry.id}}"
      hx-swap="outerHTML"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button
        type="submit"
        data-confirm="true"
        data-confirm-title="Confirm entry?"
        data-confirm-text="Are you sure you want to confirm this entry?"
        data-confirm-icon="question"
        data-confirm-confirm-text="Yes, confirm it"
        data-confirm-cancel-text="Cancel"
        
        class="{{styles.action_button}}"
      >
        <i class="fa-solid fa-rotate mr-2" aria-hidden="true"></i>
        confirm
      </button>
    </form>
    <form
      hx-post="{{ url_for(
          'calendars.calendar.day.calendar_entries.calendar_entry.decline_entry',
          slug=post.slug,
          calendar_slug=calendar.slug,
          day=day,
          month=month,
          year=year,
          entry_id=entry.id
        ) }}"
      hx-select="#calendar_entry_options_{{ entry.id }}"
      hx-target="#calendar_entry_options_{{entry.id}}"
      hx-swap="outerHTML"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button
        type="submit"
        data-confirm="true"
        data-confirm-title="Decline entry?"
        data-confirm-text="Are you sure you want to decline this entry?"
        data-confirm-icon="question"
        data-confirm-confirm-text="Yes, decine it"
        data-confirm-cancel-text="Cancel"
        
        class="{{styles.action_button}}"
      >
        <i class="fa-solid fa-rotate mr-2" aria-hidden="true"></i>
        decline
      </button>
    </form>
  {% endif %}
  {% if entry.state == 'confirmed' %}
    <form
      hx-post="{{ url_for(
          'calendars.calendar.day.calendar_entries.calendar_entry.provisional_entry',
          slug=post.slug,
          calendar_slug=calendar.slug,
          day=day,
          month=month,
          year=year,
          entry_id=entry.id
        ) }}"
      hx-target="#calendar_entry_options_{{ entry.id }}"
      hx-select="#calendar_entry_options_{{ entry.id }}"
      hx-swap="outerHTML"
      hx-trigger="confirmed"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <button
        type="button"
        class="{{styles.action_button}}"
        data-confirm="true"
        data-confirm-title="Provisional entry?"
        data-confirm-text="Are you sure you want to provisional this entry?"
        data-confirm-icon="question"
        data-confirm-confirm-text="Yes, provisional it"
        data-confirm-cancel-text="Cancel"
        
      >
        <i class="fa-solid fa-rotate mr-2" aria-hidden="true"></i>
        provisional
      </button>
    </form>
  {% endif %}
</div>