{# === _adjustment_row.html ===
   Single <tr> 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 based on whether the adjustment has already been paid:
     - Paid   -> single [View Payslip] icon button
     - Unpaid -> three buttons: [Preview][Edit][x]
                 (these reuse the existing modals on the dashboard — no new JS)
#}
{% 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 (clickable link to the worker profile page) --- #}
    <td>
        <a href="{% url 'worker_detail' adj.worker.id %}" class="text-decoration-none">
            {{ 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 %}
            <a href="{% url 'project_detail' adj.project.id %}" 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) --- #}
    <td>
        {% with team=adj.worker.teams.first %}
            {% if team %}{{ team.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 %}
            {# PAID: view payslip only #}
            <a href="{% url 'payslip_detail' adj.payroll_record.id %}"
               class="btn btn-sm btn-outline-secondary"
               title="View payslip" data-bs-toggle="tooltip">
                <i class="fas fa-eye"></i>
            </a>
        {% else %}
            {# UNPAID: preview + edit + delete #}
            {# Preview button — class .preview-payslip-btn is already wired up in the
               main dashboard JS (opens the preview modal for this worker). #}
            <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>
            {# Edit button — class .adjustment-badge is already wired up in the
               main dashboard JS (populates + opens #editAdjustmentModal). We reuse
               it here so no new JS is needed for editing. #}
            <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>
            {# Delete button — opens the existing #deleteConfirmModal directly
               (short-circuits the edit modal's usual two-step flow). #}
            <button type="button"
                    class="btn btn-sm btn-outline-danger adj-delete-btn"
                    data-adj-id="{{ adj.id }}"
                    data-adj-type="{{ adj.type }}"
                    data-adj-worker="{{ adj.worker.name }}"
                    title="Delete" data-bs-toggle="tooltip">
                <i class="fas fa-times"></i>
            </button>
        {% endif %}
    </td>
</tr>