{% load static %}

<div id="normal-toggle-block">
  {% if case.normal_case %}
    <span class="badge bg-success">Normal</span>
    <small class="text-muted">{{ case.normal_case.display_age }}</small>
    {% if can_edit %}
      <span>
        <button class="btn btn-sm btn-outline-danger ms-2"
                hx-post="{% url 'atlas:case_toggle_normal' case.pk %}"
                hx-target="#normal-toggle-block"
                hx-swap="outerHTML"
                hx-confirm="Unmark this case as normal?">
          Unmark normal
        </button>

        <button class="btn btn-sm btn-outline-secondary ms-2"
                hx-get="{% url 'atlas:case_normal_edit' case.normal_case.pk %}"
                hx-target="body"
                hx-swap="beforeend">
          Edit Normal
        </button>
      </span>
    {% endif %}
  {% else %}
    {% if can_edit %}
      <button class="btn btn-sm btn-outline-primary"
              hx-get="{% url 'atlas:case_normal_form' case.pk %}"
              hx-target="body"
              hx-swap="beforeend">
        Mark as normal
      </button>
    {% else %}
      <span class="badge bg-secondary">Not normal</span>
    {% endif %}
  {% endif %}
</div>