{% load generic_template_filters %}
<div class="oh-modal__dialog-header">
  <span class="oh-modal__dialog-title" id="genericModalLabel">
    {{title}}
  </span>
  <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close">
    <ion-icon name="close-outline"></ion-icon>
  </button>
</div>

<div
  class="oh-modal__dialog-body oh-modal__dialog-relative"
  style="padding-bottom: 0px"
>
  {% if instance_ids %}
  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
    <button
      data-action = "previous"
      hx-get="{{previous_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
      hx-target="#genericModalBody"
      class="oh-modal__diaglog-nav oh-modal__nav-prev"
    >
      <ion-icon name="chevron-back-outline"></ion-icon>
    </button>

    <button
      data-action = "next"
      hx-get="{{next_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
      hx-target="#genericModalBody"
      class="oh-modal__diaglog-nav oh-modal__nav-next"
    >
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </button>
  </div>
  {% endif %}
  <div id="keyResultsContainer">
    <div class="my-3" id="keyResultCard">
      <div class="oh-card oh-card--no-shadow oh-card__body">
        {% if header %}
        <a
          class="oh-timeoff-modal__profile-content"
          style="text-decoration: none"
          {{header.attrs|format:object|safe}}
        >
          <div class="oh-profile mb-3">
            <div class="oh-profile__avatar">
              <img
                src="{{object|getattribute:header.avatar}}"
                class="oh-profile__image me-2"
              />
            </div>
            <div class="oh-timeoff-modal__profile-info">
              <span class="oh-timeoff-modal__user fw-bold">
                {{object|getattribute:header.title|selected_format:request.user.employee_get.employee_work_info.company_id}}
              </span>
              <span
                class="oh-timeoff-modal__user m-0"
                style="font-size: 18px; color: #4d4a4a"
              >
                {{object|getattribute:header.subtitle|selected_format:request.user.employee_get.employee_work_info.company_id}}</span
              >
            </div>
          </div>
        </a>
        {% endif %}
        <div
          class="oh-modal__dialog-header {% if header %} oh-card__footer--border-top{% endif %}"
          style="padding-top: 5px; padding-rigth: 0px; padding-left: 0px"
        >
          <div class="row">
            {% for col in body %}
            <div class="col-{% if cols|get_item:col.1 %}{{cols|get_item:col.1}}{% else %}6{% endif %} mt-3">
              {% if not col.2 %}
              <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title">{{col.0}}</span>
                <span class="oh-timeoff-modal__stat-count"
                >{{object|getattribute:col.1|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</span
                >
              </div>
              {% else %}
              {{object|getattribute:col.1|safe}}
              {% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="m-3 " id="enlargeattachmentContainer"></div>
      </div>
    </div>
  </div>
</div>
<div class="oh-modal__dialog-footer">
  {% if actions or action_method %}
  {% if actions and not action_method %}
  <div class="oh-btn-group" style="width: 100%">
    {% for action in actions %}
    <a {{action.attrs|format:object|safe}}>
      <ion-icon name="{{action.icon}}"></ion-icon>
      {{action.action}}
    </a>
    {% endfor %}
  </div>
  {% else %} {{object|getattribute:action_method|safe}} {% endif %}
  {% endif %}
</div>

<script>
  $("#reloadMessagesButton").click();
</script>
