{# === _adjustment_row.html — row partial for the Adjustments tab === #}
{% comment %}
Single table row used by BOTH the flat Adjustments view and (later) the grouped view.
Context:
  - adj               a PayrollAdjustment instance
  - additive_types    list of type labels that are additive (used to decide
                      whether the amount should be prefixed with + or - in the display)
Row actions differ by paid status:
  - Paid   -> single View Payslip icon button
  - Unpaid -> three buttons: Preview, Edit, Delete
              (these reuse the existing modals on the dashboard -- no new JS)
{% endcomment %}
{% load format_tags %}

<tr data-adj-id="{{ adj.id }}" class="{% if adj.payroll_record %}adj-row-paid{% else %}adj-row-unpaid{% endif %}">
    {# --- Bulk-select checkbox --- #}
    {# Paid rows show a disabled checkbox so the column stays aligned; #}
    {# only unpaid rows can be bulk-selected for deletion (feature comes in Task 6). #}
    <td class="bulk-select-cell">
        {% if adj.payroll_record %}
            <input type="checkbox" class="form-check-input" disabled title="Paid rows cannot be bulk-deleted">
        {% else %}
            <input type="checkbox" class="form-check-input adj-bulk-checkbox" value="{{ adj.id }}">
        {% endif %}
    </td>

    {# --- Date --- #}
    <td>{{ adj.date|date:"d M Y" }}</td>

    {# --- Worker name (class="worker-lookup-link" opens the Worker Lookup modal) --- #}
    <td>
        <a href="#" class="worker-lookup-link text-decoration-none"
           data-worker-id="{{ adj.worker.id }}">{{ adj.worker.name }}</a>
    </td>

    {# --- Type badge (colour comes from the .badge-type-<slug> CSS class) --- #}
    <td><span class="badge-type-{{ adj.type|type_slug }}">{{ adj.type }}</span></td>

    {# --- Amount (sign reflects additive vs deductive) --- #}
    <td class="text-end" style="font-variant-numeric: tabular-nums;">
        {% if adj.type in additive_types %}
            <span style="color: var(--text-primary);">+R {{ adj.amount|money }}</span>
        {% else %}
            <span style="color: var(--text-primary);">&minus;R {{ adj.amount|money }}</span>
        {% endif %}
    </td>

    {# --- Project (clickable if present, dash if missing) --- #}
    <td>
        {% if adj.project %}
            {# Link lands on the History tab of the project detail page — the #}
            {# most useful landing for a user who clicked a historical        #}
            {# adjustment. Tab activation is driven by the #history fragment  #}
            {# via a small helper in projects/detail.html.                    #}
            <a href="{% url 'project_detail' adj.project.id %}#history"
               class="text-decoration-none">{{ adj.project.name }}</a>
        {% else %}<span class="text-muted">&mdash;</span>{% endif %}
    </td>

    {# --- Team (worker's first team, if any — many workers are unteamed) --- #}
    {# Uses `teams.all` (NOT `teams.first`) because the view's              #}
    {# .prefetch_related('worker__teams') populates `_prefetched_objects_cache` #}
    {# for `.all()` calls — `.first()` would ignore the cache and fire a   #}
    {# fresh `ORDER BY ... LIMIT 1` SQL query per row (up to ~50 per page). #}
    <td>
        {% with teams=adj.worker.teams.all %}
            {% if teams %}{{ teams.0.name }}{% else %}<span class="text-muted">&mdash;</span>{% endif %}
        {% endwith %}
    </td>

    {# --- Description (truncated; full text shown in a hover tooltip) --- #}
    <td>
        {% if adj.description %}
            <span title="{{ adj.description }}" data-bs-toggle="tooltip">
                {{ adj.description|truncatechars:40 }}
            </span>
        {% else %}<span class="text-muted">&mdash;</span>{% endif %}
    </td>

    {# --- Status: Paid #N (links to the payslip) or Unpaid badge --- #}
    <td>
        {% if adj.payroll_record %}
            <a href="{% url 'payslip_detail' adj.payroll_record.id %}" class="badge bg-success text-decoration-none">
                Paid #{{ adj.payroll_record.id }}
            </a>
        {% else %}
            <span class="badge bg-warning text-dark">Unpaid</span>
        {% endif %}
    </td>

    {# --- Row actions (eye + pen + x for unpaid; eye only for paid) --- #}
    <td class="text-end">
        {% if adj.payroll_record %}
            {# Eye icon on paid rows opens the same Payslip Preview modal used on #}
            {# the Pending tab (instead of navigating to the payslip detail page). #}
            {# The "Paid #N" badge in the Status column still links to the         #}
            {# historical payslip for users who want to jump to the PDF view.      #}
            <button type="button"
                    class="btn btn-sm btn-outline-info preview-payslip-btn"
                    data-worker-id="{{ adj.worker.id }}"
                    data-worker-name="{{ adj.worker.name }}"
                    title="Preview payslip" data-bs-toggle="tooltip">
                <i class="fas fa-eye"></i>
            </button>
        {% else %}
            {# UNPAID row: Preview + Edit only. Single-row delete happens   #}
            {# inside the Edit Adjustment modal; bulk delete uses the row   #}
            {# checkboxes + floating action bar (shared entry point).       #}
            <button type="button"
                    class="btn btn-sm btn-outline-info preview-payslip-btn"
                    data-worker-id="{{ adj.worker.id }}"
                    data-worker-name="{{ adj.worker.name }}"
                    title="Preview payslip" data-bs-toggle="tooltip">
                <i class="fas fa-eye"></i>
            </button>
            <button type="button"
                    class="btn btn-sm btn-outline-primary adjustment-badge"
                    data-adj-id="{{ adj.id }}"
                    data-adj-type="{{ adj.type }}"
                    data-adj-amount="{{ adj.amount }}"
                    data-adj-date="{{ adj.date|date:'Y-m-d' }}"
                    data-adj-description="{{ adj.description|default:'' }}"
                    data-adj-project="{{ adj.project_id|default:'' }}"
                    data-adj-worker="{{ adj.worker.name }}"
                    title="Edit" data-bs-toggle="tooltip">
                <i class="fas fa-pen"></i>
            </button>
        {% endif %}
    </td>
</tr>