{% load static i18n%}
{% load i18n %}


{% if objective_form.non_field_errors %}
<!-- form non field errors  -->
<div class="oh-wrapper">
    <div class="oh-alert-container">
        {% for error in objective_form.non_field_errors %}
        <div class="oh-alert oh-alert--animated oh-alert--danger">
            {{ error }}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="oh-modal__dialog-header">
  {% if update %}
    <h2 class="oh-modal__dialog-title" >
      {% trans "Update Key result" %}
    </h2>
  {% else %}
    <h2 class="oh-modal__dialog-title" >
      {% trans "Create Key result" %}
    </h2>
  {% endif %}

  <button type="button" class="oh-modal__close--custom" onclick="$('#objectDetailsModal').removeClass('oh-modal--show');">
    <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
  </button>
</div>
<div class="oh-modal__dialog-body">
  {% if update %}
    <form
      hx-post="{%url 'employee-key-result-update' form.instance.id %}"
      hx-target="#objectDetailsModalTarget"
      id="objectiveForm"
    >
  {% else %}
    <form
      hx-post="{%url 'employee-key-result-creation' emp_objective.id %}"
      hx-target="#objectDetailsModalTarget"
      id="objectiveForm"
    >
  {% endif %}

    {% csrf_token %}
    {{form.as_p}}
  </form>
</div>

<!-- key result modal -->
<div class="oh-modal" id="kRModal" role="dialog" aria-labelledby="editKeyResultModal" aria-hidden="true">
  <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" class="oh-modal__close--custom" onclick="$('#kRModal').hide();">
        <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
      </button>
    </div>
    <div class="oh-modal__dialog-body" id="kRModalTarget">
       <form
       {% comment %} onsubmit="saveKeyResult();event.preventDefault();" {% endcomment %}
       hx-post='{% url "key-result-creation" %}'
       hx-target="#kRModal"
       >
          {% csrf_token %}
          {{k_form.as_p}}
       </form>
      </div>
  </div>
</div>
<!-- end of key result modal -->