{% load i18n %}

<style>
    .height-adj{
        height:420px;
        overflow-y:auto
    }
</style>
{% if contracts %}
    <div class="oh-sticky-table height-adj">
        <div class="oh-sticky-table__table">
            <div class="oh-sticky-table__thead">
                <div class="oh-sticky-table__tr">
                <div class="oh-sticky-table__th">{% trans "Contract" %}</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 %}
                    <div class="oh-sticky-table__th  oh-sticky-table__right"></div>
                {% endif %}
                </div>
            </div>
            <div class="oh-sticky-table__tbody">
                {% for contract in contracts %}

                <div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target = "#objectDetailsModal" hx-get="{% url 'single-contract-view' contract.id %}" 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 %}">{{ contract.contract_name }}</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>
                    <div class="oh-sticky-table__td">
                        {{ contract.get_contract_status_display}}
                    </div>
					{% if perms.payroll.change_contract %}
                        <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"
                                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>
                            <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-modal' contract.id %}?{{pd}}"
                                hx-target="#personal_target"
                                title="{% trans 'Delete' %}"
                            >
                                <ion-icon
                                name="trash-outline"
                                role="img"
                                class="md hydrated"
                                aria-label="trash outline"
                                ></ion-icon>
                            </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
{% else %}
    <div class="d-flex justify-content-center align-items-center" style="height:40vh">
        <h5 class="oh-404__subtitle">{% trans "There are no contracts at the moment." %}</h5>
    </div>
{% endif %}