{% load i18n %}{% load widget_tweaks %} {% load mathfilters %} {% load basefilters %}
<span
  name=""
  id="dynamicKeyResult"
  style="display: none"
  data-toggle="oh-modal-toggle"
  data-target="#dynamicCreateModal"
  hx-get="{% url 'key-result-creation' %}"
  hx-target="#dynamicCreateModalBody"
>
</span>
<div
  class="oh-modal"
  id="dynamicCreateModal"
  role="dialog"
  aria-hidden="true"
  style="z-index: 1022"
  >
  <div
    class="oh-modal__dialog"
    style="max-width: 550px"
    id="dynamicCreateModalBody"
  ></div>
</div>
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
        <h1 class="oh-main__titlebar-title fw-bold">
            {% trans "Objectives" %}
        </h1>
        <a
            class="oh-main__titlebar-search-toggle"
            role="button"
            aria-label="Toggle Search"
            @click="searchShow = !searchShow"
        >
            <ion-icon
                name="search-outline"
                class="oh-main__titlebar-serach-icon"
            ></ion-icon>
        </a>
    </div>
        <form
            hx-get="{% url 'objective-list-search' %}"
            hx-target="#objective_list"
            hx-swap="innerHTML"
            method="get"
            id="filterForm"
            onsubmit="event.preventDefault()"
        >
            <div class="oh-main__titlebar oh-main__titlebar--right">
                <div
                    class="oh-input-group oh-input__search-group"
                    :class="searchShow ? 'oh-input__search-group--show' : ''"
                >
                    <ion-icon
                        name="search-outline"
                        class="oh-input-group__icon oh-input-group__icon--left"
                    ></ion-icon>
                    <input
                        name="search"
                        type="text"
                        class="oh-input oh-input__icon"
                        aria-label="Search Input"
                        placeholder="{% trans 'Search' %}"
                        onkeyup="$('.filterButton').click()"
                    />
                </div>
                <div class="oh-main__titlebar-button-container">
                    <div class="oh-dropdown" x-data="{open: false}">
                        <button
                            class="oh-btn ml-2"
                            @click="open = !open"
                            onclick="event.preventDefault()"
                        >
                            <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
                            <div id="filterCount"></div>
                        </button>
                        <div
                            class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
                            x-show="open"
                            @click.outside="open = false"
                            style="display: none"
                        >
                            <div class="oh-dropdown__filter-body">
                                <div class="oh-accordion">
                                    <div class="oh-accordion-header">{% trans "Objective" %}</div>
                                    <div class="oh-accordion-body">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label" for=""
                                                        >{% trans "Managers" %}</label
                                                    >
                                                    {{objective_filer_form.managers}}
                                                </div>
                                                <div class="oh-input-group">
                                                    <label class="oh-label" for="">{% trans "Key Result" %}</label>
                                                    {{objective_filer_form.employee_objective__key_result_id}}
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label" for="">{% trans "Assignees" %}</label>
                                                    {{objective_filer_form.assignees}}
                                                </div>
                                                <div class="oh-input-group">
                                                    <label class="oh-label" for="">{% trans "Duration" %} </label>
                                                    {{objective_filer_form.duration}}
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <div class="oh-input-group">
                                                    <label class="oh-label" for=""
                                                        >{% trans "Is Archived" %}</label
                                                    >
                                                    {{objective_filer_form.archive}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="oh-dropdown__filter-footer">
                                <button
                                    class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
                                    id="objective-filter-form-submit"
                                >
                                    {% trans "Filter" %}
                                </button>
                            </div>
                        </div>
                    </div>

                    {% comment %} <div
                        class="oh-dropdown"
                        x-data="{open: false}"
                        onclick="event.preventDefault()"
                    >
                        <button class="oh-btn ml-2" @click="open = !open">
                            <ion-icon name="library-outline" class="mr-1"></ion-icon>{% trans "Group By" %}
                        </button>
                        <div
                            class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
                            x-show="open"
                            @click.outside="open = false"
                            style="display: none"
                        >
                            <div class="oh-accordion">
                                <label for="id_field">{% trans "Group By" %}</label>
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group">
                                            <label class="oh-label" for="id_field">{% trans "Field" %}</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group">
                                            <select
                                                class="oh-select mt-1 w-100"
                                                id="id_field"
                                                name="field"
                                                class="select2-selection select2-selection--single"
                                            >
                                                {% for field in gp_fields %}
                                                <option value="{{ field.0 }}">
                                                    {% trans field.1 %}
                                                </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> {% endcomment %}

                    {% comment %} <div class="oh-btn-group ml-2">
                        <div class="oh-dropdown" x-data="{open: false}">
                            <button
                                class="oh-btn oh-btn--dropdown oh-btn oh-btn--shadow"
                                @click="open = !open"
                                @click.outside="open = false"
                                onclick="event.preventDefault()"
                            >
                                {% trans "Actions" %}
                            </button>
                            <div
                                class="oh-dropdown__menu oh-dropdown__menu--right"
                                x-show="open"
                                style="display: none"
                            >
                                <ul class="oh-dropdown__items">
                                    <li class="oh-dropdown__item">
                                        <a href="#" class="oh-dropdown__link" id="archiveObjectives"
                                            >{% trans "Archive" %}</a
                                        >
                                    </li>

                                    <li class="oh-dropdown__item">
                                        <a
                                            href="#"
                                            class="oh-dropdown__link"
                                            id="unArchiveObjectives"
                                            >{% trans "Un-Archive" %}</a
                                        >
                                    </li>

                                    {% if perms.pms.delete_employeeobjective %}
                                    <li class="oh-dropdown__item">
                                        <a
                                            href="#"
                                            class="oh-dropdown__link oh-dropdown__link--danger"
                                            id="deleteObjectives"
                                            >{% trans "Delete" %}</a
                                        >
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div> {% endcomment %}

                    <!-- checking  user permission for objective creation -->
                    {% if perms.pms.add_employeeobjective %}
                        <button
                            class="oh-btn oh-btn--secondary ml-2"
                            data-toggle="oh-modal-toggle"
                            data-target="#objectCreateModal"
                            hx-get="{%url 'create-employee-objective' %}"
                            hx-target="#objectCreateModalTarget"
                            onclick="event.preventDefault()"
                        >
                            <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Create" %}
                        </button>
                    {% endif %}
                </div>
            </div>
        </form>
</section>

<script>
    function periodCheck(element){
      period = $(element).val()
      if (period == 'create_new_period'){
        $('#PeriodModal').show()
      }
    }
</script>