{% load i18n %} {% 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 %}
<div class="oh-card">
 {% for contract_list in contracts %}

	<div class="oh-accordion-meta">
		<div class="oh-accordion-meta__item">
			<div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
				<span class="oh-accordion-meta__title pt-3 pb-3">
					<div class="oh-tabs__input-badge-container">
						<span
							class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
						>
							{{contract_list.list.paginator.count}}
						</span>
						{{contract_list.grouper}}
					</div>
				</span>
			</div>
			<div class="oh-accordion-meta__body d-none">
				<div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
					<div class="oh-sticky-table">
						<div class="oh-sticky-table__table">
						  	<div class="oh-sticky-table__thead">
								<div class="oh-sticky-table__tr">
									<div class="oh-sticky-table__th" style="width:10px;">
										<div class="centered-div">
										<input
											type="checkbox"
											class="all-contract oh-input oh-input__checkbox Allcontract"
											onchange="
											$(this).closest('.oh-sticky-table').find('.all-contract-row').prop('checked', $(this).is(':checked')).change();addingContractIds()"
											id = ""
											title='{% trans "Select All" %}'
										/>
										</div>
									</div>
									<div class="oh-sticky-table__th">{% trans "Contract" %}</div>
									<div class="oh-sticky-table__th">{% trans "Employee" %}</div>
									<div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
									<div class="oh-sticky-table__th">{% trans "End Date" %}</div>
									<div class="oh-sticky-table__th">{% trans "Wage Type" %}</div>
									<div class="oh-sticky-table__th">{% trans "Basic Salary" %}</div>
									<div class="oh-sticky-table__th">{% trans "Filing Status" %}</div>
									<div class="oh-sticky-table__th">{% trans "Status" %}</div>
									{% if perms.payroll.change_contract or perms.payroll.delete_contract %}
										<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
									{% endif %}
								</div>
						  </div>
						  <div class="oh-sticky-table__tbody">
							{% for contract in contract_list.list %}
							<div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target = "#objectDetailsModal" hx-get="{% url 'single-contract-view' contract.id %}?{{pd}}&instances_ids={{contract_ids}}" hx-target = "#objectDetailsModalTarget">
								<div class="oh-sticky-table__sd  {% if contract.contract_status == "active" %} row-status--yellow
									{% elif contract.contract_status == 'draft' %} row-status--purple
									{% elif contract.contract_status == 'expired' %} row-status--red
									{% elif contract.contract_status == 'terminated' %} row-status--black {% endif %}" onclick="event.stopPropagation()">
									<div class="centered-div">
										<input
										type="checkbox"
										id="{{contract.id}}"
										value="{{contract.id}}"
										onchange="highlightRow($(this));
										if (!$(this).is(':checked')) {
											$(this).closest('.oh-sticky-table').find('.Allcontract').prop('checked', false)
										}"
										class="oh-input payslip-checkbox oh-input__checkbox all-contract-row"
										/>
									</div>
								</div>
								<div class="oh-sticky-table__td">{{ contract.contract_name }}</div>
								<div class="oh-sticky-table__td">{{ contract.employee_id }}</div>
								<div class="oh-sticky-table__td dateformat_changer">{{ contract.contract_start_date}}</div>
								<div class="oh-sticky-table__td dateformat_changer">
									{% if contract.contract_end_date %}{{ contract.contract_end_date}}{% endif %}
								</div>
								<div class="oh-sticky-table__td">
									{{ contract.get_wage_type_display}}
								</div>
								<div class="oh-sticky-table__td">{{ contract.wage}}</div>
								<div class="oh-sticky-table__td">{{ contract.filing_status}}</div>
								{% if perms.payroll.change_contract %}
									<div data-cell-index="7" class="oh-sticky-table__td" onclick="event.stopPropagation();">
										<select name="status" hx-trigger="change" hx-post="{% url 'update-contract-status' contract.id %}?{{pd}}" hx-target="#payroll-contract-container" hx-vals='{"view":"table"}' class="oh-table__editable-input w-100" >
										{% for option in contract.CONTRACT_STATUS_CHOICES %}
										<option value="{{option.0}}"{% if option.0 == contract.contract_status %}selected{% endif %}>{{option.1}}</option>
										{% endfor %}
										</select>
									</div>
								{% else %}
									<div class="oh-sticky-table__td">
										{{ contract.get_contract_status_display}}
									</div>
								{% endif %}
								{% if perms.payroll.change_contract or perms.payroll.delete_contract %}
									<div class="oh-sticky-table__td oh-sticky-table__right">
										<div class="oh-btn-group">
											{% if perms.payroll.change_contract %}
												<a
												onclick="event.stopPropagation()"
													class="oh-btn oh-btn--light-bkg w-100"
													href="{% url 'update-contract' contract.id %}"
													title='{% trans "Update" %}'
												>
													<ion-icon
													name="create-outline"
													role="img"
													class="md hydrated"
													style="color: blue"
													aria-label="create outline"
													></ion-icon>
												</a>
											{% endif %}
											{% if perms.payroll.delete_contract %}
												<a
													onclick = "event.preventDefault();event.stopPropagation();"
													class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
													hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
													hx-post="{% url 'delete-contract' contract.id %}?{{pd}}"
													hx-target="#payroll-contract-container"
													hx-swap="innerHTML"
													title="{% trans 'Delete' %}"
													>
													<ion-icon
														name="trash-outline"
														role="img"
														class="md hydrated"
														aria-label="trash outline"
													></ion-icon>
												</a>
											{% endif %}
										</div>
									</div>
								{% endif %}
							</div>
							{% endfor %}
						  </div>
						</div>
					  </div>
        		</div>
				<div class="oh-pagination">
                    <span class="oh-pagination__page">
                        {% trans "Page" %} {{ contract_list.list.number }}
                        {%trans "of" %} {{contract_list.list.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="{{contract_list.dynamic_name}}"
                                class="oh-pagination__input"
                                value="{{contract_list.list.number}}"
                                hx-get="{% url 'contract-filter' %}?{{pd}}"
                                hx-target="#payroll-contract-container"
                                min="1"
                            />
                            <span class="oh-pagination__label"
                                >{% trans "of" %}
                                {{contract_list.list.paginator.num_pages}}</span
                            >
                        </div>
                        <ul class="oh-pagination__items">
                            {% if contract_list.list.has_previous %}
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#payroll-contract-container"
                                    hx-get="{% url 'contract-filter' %}?{{pd}}&{{contract_list.dynamic_name}}=1"
                                    class="oh-pagination__link"
                                    >{% trans "First" %}</a
                                >
                            </li>
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#payroll-contract-container"
                                    hx-get="{% url 'contract-filter' %}?{{pd}}&{{contract_list.dynamic_name}}={{ contract_list.list.previous_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Previous" %}</a
                                >
                            </li>
                            {% endif %} {% if contract_list.list.has_next %}
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#payroll-contract-container"
                                    hx-get="{% url 'contract-filter' %}?{{pd}}&{{contract_list.dynamic_name}}={{ contract_list.list.next_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Next" %}</a
                                >
                            </li>
                            <li
                                class="oh-pagination__item oh-pagination__item--wide"
                            >
                                <a
                                    hx-target="#payroll-contract-container"
                                    hx-get="{% url 'contract-filter' %}?{{pd}}&{{contract_list.dynamic_name}}={{ contract_list.list.paginator.num_pages }}"
                                    class="oh-pagination__link"
                                    >{% trans "Last" %}</a
                                >
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
			</div>
		</div>
		{% endfor %}

		<div class="oh-pagination">
			<span
			  class="oh-pagination__page"
			>
			  {% trans "Page" %} {{ contracts.number }} {% trans "of" %} {{ contracts.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="{{contracts.number}}"
					hx-get="{% url 'contract-filter' %}?{{pd}}"
					hx-target="#payroll-contract-container"
					min="1"
					/>
					<span class="oh-pagination__label">{% trans "of" %} {{contracts.paginator.num_pages}}</span>
				</div>
				<ul class="oh-pagination__items">
					{% if contracts.has_previous %}
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page=1" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "First" %}</a>
					</li>
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.previous_page_number }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Previous" %}</a>
					</li>
					{% endif %}
					{% if contracts.has_next %}
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.next_page_number }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Next" %}</a>
					</li>
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.paginator.num_pages }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Last" %}</a>
					</li>
					{% endif %}

				</ul>
			</nav>
		</div>
	</div>
</div>
