{% load bootstrap4 %}
<form {% if action == "create" %}
        hx-post="{% url 'calendar:create-event' %}"
      {% else %}
        hx-post="{% url 'calendar:update-event' event.id %}"
      {% endif %}
        hx-target="#calendar-partial">
    {% csrf_token %}
    <div class="form-row">
      <div class="col">
        {% bootstrap_field form.title %}
      </div>
    </div>
    <div class="form-row">
      <div class="col" style="min-width: 0;">
        {% bootstrap_field form.start_time %}
      </div>
      <div class="col" style="min-width: 0;">
        {% bootstrap_field form.end_time %}
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        {% bootstrap_field form.description %}
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        <label for="{{ form.url.id_for_label }}">
          URL
          {% if form.url.value %}
            <small>
              <a href="{{ form.url.value }}" target="_blank">View  ↗</a>
            </small>
          {% endif %}
        </label>
        {% bootstrap_field form.url show_label=False %}
      </div>
      <div class="col">
        <label for="{{ form.target_list.id_for_label }}">
          Target list
          {% if form.target_list.value %}
          <small>
            <a href="{% url 'targets:list' %}?targetlist__name={{ form.target_list.value }}" target="_blank">View  ↗</a>
          </small>
          {% endif %}
        </label>
        {% bootstrap_field form.target_list show_label=False%}
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        {% bootstrap_field form.user %}
      </div>
      <div class="col">
        {% bootstrap_field form.proposal %}
      </div>
      <div class="col">
        {% bootstrap_field form.telescope %}
      </div>
      <div class="col">
        {% bootstrap_field form.instrument %}
      </div>
    </div>
    {% buttons %}
    <button type="submit" class="btn btn-primary">Save</button>
    {% if action == "create" %}
    <button type="submit" name="save_and_edit" value="1" class="btn btn-primary">Save and edit</button>
    {% else %}
    <button type="button"
            hx-post="{% url 'calendar:delete-event' event.id %}"
            hx-target="#calendar-partial"
            hx-confirm="Are you sure you want to delete this event?"
            class="btn btn-danger">Delete</button>
    {% endif %}
    {% endbuttons %}
</form>
<h6 class="mb-2">Todo list</h6>
<hr>
<div id="cal-todos">
{% if action == "update" %}
  {% include 'tom_calendar/partials/todos.html' with event=event %}
{% else %}
  <p>Save the event to add TODOs</p>
{% endif %}
</div>