{% load static %}{% load i18n %}
<!-- start of messages -->
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
  <script>
    setTimeout(function () {
      $("#keyResultCloseButton").click();
    }, 1000);
  </script>

</div>
{% endif %}
<!-- end of messages -->

<div class="oh-modal__dialog">
  <!-- for creating key result -->
  <div class="oh-modal__dialog-header">
    <h2 class="oh-modal__dialog-title">{% trans "Create Key Result" %}</h2>
    <button
      type="button"
      id="keyResultCloseButton"
      class="oh-modal__close--custom"
      onclick="removeCreateKR();$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show');"
      {% if messages %}
        hx-get="{{redirect_url}}"
        hx-target="#objectCreateModalTarget"
      {% endif %}
    >
      <ion-icon
        name="close-outline"
        role="img"
        aria-label="close outline"
      ></ion-icon>
    </button>
  </div>
  <div class="oh-modal__dialog-body">
    <form
      hx-post="{% url 'key-result-creation' %}?{{redirect_url}}&dataUrl={{dataUrl}}"
      hx-target="#dynamicCreateModalBody"
      id="krForm"
    >
      {% csrf_token %} {{k_form.as_p}}
    </form>
  </div>
</div>