{% extends "base.html" %}
{% block title %}{{ title }} · {{ month_name }} · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Reports</div>
        <h1>{{ title }} &mdash; {{ month_name }}</h1>
    </div>
    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
        <a href="{{ url_for('reports_index') }}" class="btn btn-secondary">&larr; Back to Reports</a>
        {% if title == "Bank Transfer" and run %}
        <a href="{{ url_for('bank_slip_editor', run_id=run.id) }}" class="btn btn-secondary">&larr; Back to Bank Adjustment Sheet</a>
        {% endif %}
        {% for fmt, label in formats %}
        <a href="{{ download_base }}/{{ fmt }}" class="btn btn-primary" {% if fmt == 'pdf' %}target="wagewise_pdf_preview"{% endif %}>&#8659; {{ label }}</a>
        {% endfor %}
    </div>
</div>

<div class="panel" style="margin-bottom:16px;">
    <p style="margin:0;font-size:13px;">
        <strong>{{ total_label }}:</strong> {{ total_value }}
        &nbsp;&middot;&nbsp; {{ rows|length }} employee(s)
    </p>
</div>

<div class="panel" style="padding:0;overflow-x:auto;">
    <table class="ledger-table" style="font-size:12px;">
        <thead>
            <tr>
                {% for col in columns %}
                <th {% if not loop.first and not loop.index == 2 %}class="num"{% endif %}>{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
            <tr>
                {% for val in row %}
                <td {% if not loop.first and not loop.index == 2 %}class="num"{% endif %}
                    {% if loop.index == 2 %}class="name-cell"{% endif %}>{{ val }}</td>
                {% endfor %}
            </tr>
            {% else %}
            <tr><td colspan="{{ columns|length }}" style="text-align:center;color:var(--color-ink-faint);padding:20px;">
                No eligible employees for this run.
            </td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}