{% load static i18n %}
{% load i18n %}
{% load widget_tweaks %} {% load basefilters %} {% load pmsfilters %}
{% include "filter_tags.html" %}
{% if messages %}
    <div class="oh-alert-container">
        {% for message in messages %}
        <div class="oh-alert oh-alert--animated {{message.tags}}">
              {{ message }}
        </div>
        {% endfor %}
    </div>
{% endif %}
{% for emp_objective in emp_objectives %}
    {% if perms.pms.view_employeeobjective or emp_objective|is_manager_or_owner:request.user %}
        <div class="oh-accordion-meta">
            <div class="oh-accordion-meta__item">
                <div class="oh-accordion-meta__header"
                    onclick="
                        {% comment %} event.stopPropagation(); {% endcomment %}
                        $(this).toggleClass('oh-accordion-meta__header--show');
                        $(this).parent().find('.oh-accordion-meta__body').toggleClass('d-none');
                        "
                    {% comment %} {% if perms.payroll.view_taxbracket %} {% endcomment %}
                        data-target="#krBody{{emp_objective.id}}"
                        hx-get="{% url 'kr-table-view' emp_objective.id %}?{{request.GET.urlencode}}&objective_id={{objective.id}}"
                        hx-target="#krData{{emp_objective.id}}"
                    {% comment %} {% endif %}  {% endcomment %}
                    >
                    <div class="oh-accordion-meta__title d-flex align-items-center justify-content-between w-100 ">
                        <div class="d-flex align-items-center justify-content-between" style="width:60%">
                            <div class="oh-tabs__input-badge-container">
                                <span
                                    class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
                                >
                                    {{emp_objective.employee_key_result.all|length}}
                                </span>
                                    {{emp_objective.employee_id}}
                            </div>
                            {% if emp_objective.employee_key_result.first %}
                            <div class="oh-progress-container progress_barmm"  style="width:50%">
                                <div class="oh-progress" role="progressbar">
                                        <div class="oh-progress__bar oh-progress__bar--secondary" style="width: calc( {{ emp_objective.progress_percentage }}%)"></div>
                                </div>
                                <div class="oh-progress-container__percentage" style="width:50px" name= "key_result_percentage">{{emp_objective.progress_percentage}} %</div>
                            </div>
                            {% endif %}
                        </div>
                        <div>
                            {% comment %} <div class="d-flex" onclick="event.stopPropagation()"> {% endcomment %}

                                <div class="oh-btn-group">
                                    {% comment %} {% if request.user|is_reportingmanager or perms.pms.view_employeekeyresult %} {% endcomment %}
                                        <a
                                            hx-get='{% url "view-employee-objective" emp_objective.id %}'
                                            hx-target="#objectDetailsModalTarget"
                                            data-toggle="oh-modal-toggle"
                                            data-target="#objectDetailsModal"
                                            type="button" title="{% trans 'View' %}"
                                            class="oh-btn oh-btn--light-bkg p-3 w-100"  onclick="event.stopPropagation()"
                                        >
                                            <ion-icon name="eye-outline"></ion-icon>
                                        </a>
                                    {% comment %} {% endif %} {% endcomment %}
                                    {% if request.user|is_reportingmanager or perms.pms.view_employeekeyresult %}
                                        <a
                                            hx-get='{% url "objective-detailed-view-activity" emp_objective.id %}'
                                            hx-target="#activityContainer"
                                            data-target="#OKRactivitySidebar"
                                            type="button" title="{% trans 'Activites' %}"
                                            class="oh-btn oh-btn--light-bkg p-3 w-50 oh-activity-sidebar__open"  onclick="event.stopPropagation()"
                                        >
                                            <ion-icon name="newspaper-outline"></ion-icon>
                                        </a>
                                    {% endif %}
                                    {% if request.user|is_reportingmanager or perms.pms.add_employeekeyresult %}
                                        <button  style="border-right:1px solid hsl(8, 77%, 56%)"
                                            class="oh-btn oh-btn--secondary-outline float-end"
                                            hx-get='{% url "employee-key-result-creation" emp_objective.id %}'
                                            hx-target="#objectDetailsModalTarget"
                                            data-toggle="oh-modal-toggle"
                                            data-target="#objectDetailsModal"
                                            title="Add Key Result"
                                            onclick="event.stopPropagation()"
                                        >
                                            <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
                                        </button>
                                    {% endif %}
                                    {% if request.user|is_reportingmanager or perms.pms.add_employeeobjective %}

                                    <div class="" onclick="event.stopPropagation()">
                                        <div class="oh-dropdown" x-data="{show: false}">
                                            <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
                                                <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
                                            </button>
                                            <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
                                                <ul class="oh-dropdown__items">
                                                {% if perms.pms.change_employeeobjective or request.user|is_reportingmanager %}
                                                    <li class="oh-dropdown__item">
                                                        <a
                                                        class="fw-light"
                                                        data-toggle="oh-modal-toggle"
                                                        data-target="#objectDetailsModal"
                                                        hx-get='{% url "update-employee-objective" emp_objective.id %}'
                                                        hx-target="#objectDetailsModalTarget"
                                                        >{% trans "Edit" %}</a>
                                                    </li>
                                                    {% if emp_objective.archive %}
                                                        <li class="oh-dropdown__item">
                                                            <a
                                                            class="fw-light"
                                                            onclick="return confirm(`{% trans 'Do you want to un-archive this employee objective?' %}`)"
                                                            href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
                                                            hx-target="#emp_objective_card"
                                                            >{% trans "Unarchive" %}</a>
                                                        </li>
                                                    {% else %}
                                                        <li class="oh-dropdown__item">
                                                            <a
                                                            class="fw-light"
                                                            onclick="return confirm(`{% trans 'Do you want to archive this employee objective?' %}`)"
                                                            href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
                                                            hx-target="#emp_objective_card"
                                                            >{% trans "Archive" %}</a>
                                                        </li>
                                                    {% endif %}

                                                {% endif %}
                                                {% if perms.pms.delete_employeeobjective or request.user|is_reportingmanager %}
                                                    <li class="oh-dropdown__item">
                                                        <a
                                                        class="fw-light"
                                                        data-toggle="oh-modal-toggle"
                                                        data-target="#objectDetailsModal"
                                                        hx-confirm="{% trans 'Do you want to delete this employee objective?' %}"
                                                        hx-get='{% url "delete-employee-objective" emp_objective.id %}?single_view="False'
                                                        hx-target="#objectDetailsModalTarget"
                                                        >{% trans "Delete" %}</a>
                                                    </li>
                                                {% endif %}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}


                                </div>
                        </div>
                    </div>
                </div>
                <div
                    class="oh-accordion-meta__body d-none"
                    id="krBody{{emp_objective.id}}"
                >
                    <!-- htmx tax bracket loading here -->
                    <div
                    class="oh-sticky-table oh-sticky-table--no-overflow mb-5"
                    id="krData{{emp_objective.id}}"
                    ></div>
                </div>
            </div>

        </div>
    {% endif %}
{% endfor %}