{% load i18n %} {% load horillafilters %} {% load static %}
{% include 'filter_tags.html' %}
{% 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 %}
</div>
{% endif %}
{% if krs %}
    <!-- start of select all -->
    {% comment %} <div class="oh-checkpoint-badge text-success mb-2" id="selectAllInstances" style="cursor: pointer;">
        {% trans "Select All" %}
    </div>
    <div class="oh-checkpoint-badge text-secondary mb-2" id="unselectAllInstances" style="cursor: pointer;display: none;">
        {% trans "Unselect All" %}
    </div>
    <div class="oh-checkpoint-badge text-danger mb-2" id="selectedCandidate" style="display: none">
    </div> {% endcomment %}
    <!-- start of select all -->
    <!-- start of column toggle -->
    <div class="oh-table_sticky--wrapper">
        <div class="oh-sticky-dropdown--header">
        <div class="oh-dropdown" x-data="{open: false}">
            <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
            role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
            <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
            <ul class="oh-dropdown__items" id="krsCells">
            </ul>
            </div>
        </div>
        </div>
    </div>
    <!-- end of column toggle -->
    <div id="krs-table" data-table-name="krs_table">
        <!-- start of sticky table -->
        <div class="oh-sticky-table">
        <div class="oh-sticky-table__table oh-table--sortable">
            <div class="oh-sticky-table__thead">
                <div class="oh-sticky-table__tr">
                    <div class="oh-sticky-table__th" style="width: 10px; @media (max-width: 575.98px) { position: sticky; }">
                        <div class="centered-div">
                        <input
                                type="checkbox"
                                class="all-contract oh-input oh-input__checkbox"
                                id = "Allcontract"
                                title='{% trans "Select All" %}'
                            />
                        </div>
                    </div>
                    <div
                        class="oh-sticky-table__th {% if request.sort_option.order == '-title' %}arrow-up {% elif request.sort_option.order == 'title' %}arrow-down {% else %}arrow-up-down {% endif %}"
                        hx-get="{% url 'filter-key-result' %}?{{pd}}&sortby=title"
                        hx-target="#krs-container"
                    >
                        {% trans "Key Results" %}
                    </div>
                    <div data-cell-index="1" data-cell-title="{% trans 'Progress Type' %}" class="oh-sticky-table__th">{% trans "Progress Type" %}</div>
                    <div data-cell-index="2" data-cell-title="{% trans 'Target Value' %}" class="oh-sticky-table__th">{% trans "Target Value" %}</div>
                    <div data-cell-index="3" data-cell-title="{% trans 'Duration' %}" class="oh-sticky-table__th">{% trans "Duration" %}</div>
                    <div data-cell-index="4" data-cell-title="{% trans 'Descrption' %}" class="oh-sticky-table__th">{% trans "Descrption" %}</div>
                    {% comment %} <div data-cell-index="5" data-cell-title="{% trans 'Is Active' %}" class="oh-sticky-table__th">{% trans "Is Active" %}</div> {% endcomment %}

                    <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
                </div>
            </div>
            {% for kr in krs %}
            <div class="oh-sticky-table__tbody " draggable="true"
            >
            <div class="oh-sticky-table__tr ">
                <div class="oh-sticky-table__sd" onclick="event.stopPropagation()">
                    <div class="centered-div">
                        <input
                        type="checkbox"
                        id="{{kr.id}}"
                        onchange="highlightRow($(this))"
                        value="{{kr.id}}"
                        class="oh-input payslip-checkbox oh-input__checkbox all-contract-row"
                        />
                    </div>
                </div>
                <div class="oh-sticky-table__td">
                    {{kr.title}}
                </div>
                <div data-cell-index="1" class="oh-sticky-table__td">
                {{kr.get_progress_type_display}}
                </div>
                <div data-cell-index="2" class="oh-sticky-table__td">
                    {{kr.target_value}}
                </div>
                <div data-cell-index="3" class="oh-sticky-table__td">
                {{kr.duration}}{% trans " Days" %}
                </div>
                <div data-cell-index="4" class="oh-sticky-table__td">
                {{kr.description}}
                </div>
                {% comment %} <div data-cell-index="5" class="oh-sticky-table__td">
                {{kr.target_value}}
                </div> {% endcomment %}

                <div class="oh-sticky-table__td oh-sticky-table__right">
                <div class="oh-btn-group">
                    <a
                    onclick="event.stopPropagation();"
                    class="oh-btn oh-btn--light-bkg w-100"
                    data-toggle="oh-modal-toggle"
                    data-target="#objectUpdateModal"
                    hx-get="{% url 'update-key-result' kr.id %}"
                    hx-target="#objectUpdateModalTarget"
                    title='{% trans "Edit" %}'
                    >
                    <ion-icon
                        name="create-outline"
                        role="img"
                        class="md hydrated"
                        style="color: blue"
                        aria-label="create outline"
                    ></ion-icon>
                    </a>
                    <a
                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                    onclick = "event.preventDefault();event.stopPropagation();"
                    hx-confirm="{% trans 'Do you want to delete this Key result?' %}"
                    hx-post="{% url 'delete-key-result' kr.id %}?{{pd}}"
                    hx-target="#krs-container"
                    title="{% trans 'Delete' %}"
                    >
                    <ion-icon
                        name="trash-outline"
                        role="img"
                        class="md hydrated"
                        aria-label="trash outline"
                    ></ion-icon>
                    </a>
                </div>
                </div>
            </div>
            </div>
            {% endfor %}
        </div>
        </div>
        <!-- end of sticky table -->

        <!-- start of pagination -->
        <div class="oh-pagination">
        <span
            class="oh-pagination__page"
            >
            {% trans "Page" %} {{ krs.number }} {% trans "of" %} {{ krs.paginator.num_pages }}.
            </span
        >
        <nav class="oh-pagination__nav">
            <div class="oh-pagination__input-container me-3">
            <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
            <input
                type="number"
                name="page"
                class="oh-pagination__input"
                value="{{krs.number}}"
                hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list"
                hx-target="#krs-container"
                min="1"
            />
            <span class="oh-pagination__label">{% trans "of" %} {{krs.paginator.num_pages}}</span>
            </div>
            <ul class="oh-pagination__items">
            {% if krs.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page=1" class="oh-pagination__link">{% trans "First" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page={{ krs.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
            </li>
            {% endif %}
            {% if krs.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page={{ krs.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target='#krs-container' hx-get="{% url 'filter-key-result' %}?{{pd}}&view=list&page={{ krs.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
            </li>
            {% endif %}

            </ul>
        </nav>
        </div>
        <!-- end of pagination -->
    </div>
{% else %}
    <!-- start of empty page -->
    <div class="oh-404">
        <img
        style="width: 150px; height: 150px"
        src="{% static 'images/ui/no-results.png' %}"
        class="oh-404__image mb-4"
        />
        <h5 class="oh-404__subtitle">
        {% trans "No search result found!" %}
        </h5>
    </div>
    <!-- end of empty page -->
{% endif %}

<script>
 // toggle columns //
 toggleColumns("krs-table","krsCells")
 localStoragekrsCells = localStorage.getItem("krs_table")
 if (!localStoragekrsCells) {
   $("#krsCells").find("[type=checkbox]").prop("checked",true)
 }
 $("[type=checkbox]").change()

</script>