{% extends 'index.html' %} {% load static i18n %} {% load i18n %} {% load widget_tweaks %} {% load mathfilters %} {% load basefilters %} {% block styles %}
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
{% endblock styles %} {% block content %}

<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
	<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 "Objective Key Results (OKR)" %}
			</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="{{objective_filer_form.objective.id_for_label}}"
															>{% trans "Objective" %}</label
														>
														{{objective_filer_form.objective}}
													</div>
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.status.id_for_label}}">{% trans "Status" %}</label>
														{{objective_filer_form.status}}
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
														{{objective_filer_form.employee_id}}
													</div>
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.created_at.id_for_label}}">{% trans "Created" %} </label>
														{{objective_filer_form.created_at}}
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.start_date.id_for_label}}"
															>{% trans "Start Date" %}</label
														>
														{{objective_filer_form.start_date}}
													</div>
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.updated_at.id_for_label}}"
															>{% trans "Updated At" %}</label
														>
														{{objective_filer_form.updated_at}}
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.end_date.id_for_label}}">{% trans "End Date" %}</label>
														{{objective_filer_form.end_date}}
													</div>
													<div class="oh-input-group">
														<label class="oh-label" for="{{objective_filer_form.archive.id_for_label}}">{% trans "Archive" %}</label>
														{{ objective_filer_form.archive }}
													</div>
												</div>
												<div class="oh-input-group">
													<label class="oh-label" for="{{objective_filer_form.emp_obj_id.id_for_label}}">{% trans "Key Result" %}</label>
													{{ objective_filer_form.emp_obj_id }}
												</div>
											</div>
										</div>
									</div>
									<div class="oh-accordion">
										<div class="oh-accordion-header">{% trans "Advanced" %}</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 fil">
														<a
															hx-get="{%url 'objective-list-search' %}?created_at_date_range=today"
															hx-target="#objective_list"
															class="oh-btn oh-btn--secondary oh-btn--small w-100"
															>{% trans "Today" %}</a
														>
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group fil">
														<a
															hx-get="{%url 'objective-list-search' %}?created_at_date_range=yesterday"
															hx-target="#objective_list"
															class="oh-btn oh-btn--secondary oh-btn--small w-100"
															>{% trans "Yesterday" %}</a
														>
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group fil">
														<a
															hx-get="{%url 'objective-list-search' %}?created_at_date_range=week"
															hx-target="#objective_list"
															class="oh-btn oh-btn--secondary oh-btn--small w-100"
															>{% trans "This Week" %}</a
														>
													</div>
												</div>
												<div class="col-sm-12 col-md-12 col-lg-6">
													<div class="oh-input-group fil">
														<a
															hx-get="{%url 'objective-list-search' %}?created_at_date_range=month"
															hx-target="#objective_list"
															class="oh-btn oh-btn--secondary oh-btn--small w-100"
															>{% trans "This Month" %}</a
														>
													</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>

						<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>

						<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>

						<!-- checking  user permission for objective creation -->
						{% if perms.pms.add_employeeobjective or request.user|filtersubordinates %}
							<div class="oh-btn-group ml-2">
								<div>
									<a
										href="{%url 'objective-creation' %}"
										class="oh-btn oh-btn--secondary oh-btn--shadow"
										style="text-decoration: none"
									>
										<ion-icon name="add-outline"></ion-icon>
										{% trans "Create" %}
									</a>
								</div>
							</div>
						{% endif %}
					</div>
				</div>
			</form>
	</section>
	<div class="oh-checkpoint-badge mb-2" id="selectedObjectives" data-ids="[]" data-clicked="" style="display:none;" >
		{% trans "Selected Objectives" %}
	</div>
	<div class="oh-wrapper" id="objective_list">
		{% include 'okr/objective_list.html' %}
	</div>
</main>

<script src="{% static '/base/filter.js' %}"></script>
<script src="{% static 'src/okr/action.js' %}"></script>
<script>
	$(".fil").click(function () {
		$("#filterCount").text("(1)");
	});

	$(document).ready(function () {
		$("#id_field").on("change", function () {
			$(".filterButton")[0].click();
		});
	});
</script>

{% endblock content %}