{% extends 'base.html' %}

{% block title %}Recent Claims{% endblock %}

{% block content %}
<section class="content-section editorial-dashboard">
  <header class="editorial-dashboard__header">
    <div class="editorial-dashboard__actions">
      <form method="get" class="editorial-dashboard__toolbar-form">
        <input type="hidden" name="q" value="{{ query }}">
        <input type="hidden" name="date_from" value="{{ date_from }}">
        <input type="hidden" name="date_to" value="{{ date_to }}">
        <input type="hidden" name="doc_filter" value="{{ doc_filter }}">
        <input type="hidden" name="rejection_reason" value="{{ rejection_reason }}">
        <input type="hidden" name="sort" value="{{ sort }}">
        <label class="editorial-dashboard__toolbar-label" for="id_toolbar_page_size">Rows</label>
        <select id="id_toolbar_page_size" name="page_size" class="form-select form-select-sm editorial-dashboard__toolbar-select" data-auto-submit>
          {% for option in page_size_options %}
            <option value="{{ option }}" {% if page_size == option %}selected{% endif %}>{{ option }}</option>
          {% endfor %}
        </select>
      </form>

      <a href="{% url 'accounts:dashboard' %}?{{ export_querystring }}" class="btn btn-outline-secondary editorial-dashboard__secondary-action">
        <i class="bi bi-download me-1" aria-hidden="true"></i> Export CSV
      </a>

      <form method="get" class="queue-filter-form editorial-filter-form editorial-dashboard__filter-form mb-0">
        <div class="editorial-dashboard__filter-inline">
          <label class="visually-hidden" for="id_dashboard_q">Search</label>
          <div class="input-group editorial-dashboard__compact-group editorial-dashboard__compact-group--search">
            <span class="input-group-text">
              <i class="bi bi-search me-1" aria-hidden="true"></i> Search
            </span>
            <input
              id="id_dashboard_q"
              type="text"
              name="q"
              value="{{ query }}"
              class="form-control"
              placeholder="Claim or applicant"
            >
          </div>

          <label class="visually-hidden" for="id_date_from">Date From</label>
          <div class="input-group editorial-dashboard__compact-group editorial-dashboard__compact-group--date">
            <span class="input-group-text">Date From</span>
            <input id="id_date_from" type="date" name="date_from" value="{{ date_from }}" class="form-control">
          </div>

          <label class="visually-hidden" for="id_date_to">Date To</label>
          <div class="input-group editorial-dashboard__compact-group editorial-dashboard__compact-group--date">
            <span class="input-group-text">Date To</span>
            <input id="id_date_to" type="date" name="date_to" value="{{ date_to }}" class="form-control">
          </div>

          <input type="hidden" name="doc_filter" value="{{ doc_filter }}">
          <input type="hidden" name="rejection_reason" value="{{ rejection_reason }}">
          <input type="hidden" name="sort" value="{{ sort }}">
          <input type="hidden" name="page_size" value="{{ page_size }}">

          <div class="queue-filter-form__actions editorial-dashboard__filter-actions">
            <button class="btn btn-dark" type="submit">Apply</button>
            {% if has_active_filters %}
              <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-secondary">Clear</a>
            {% endif %}
          </div>
        </div>
      </form>
    </div>
  </header>

  <div class="editorial-dashboard__stats">
    <article class="editorial-stat-card">
      <p class="editorial-stat-card__label"><span class="editorial-stat-card__pip"></span>Total Claims</p>
      <p class="editorial-stat-card__value">{{ dashboard_summary.total_claims }}</p>
    </article>

    <article class="editorial-stat-card">
      <p class="editorial-stat-card__label"><span class="editorial-stat-card__pip"></span>Invoice Rows</p>
      <p class="editorial-stat-card__value">{{ dashboard_summary.total_invoices }}</p>
    </article>

    <article class="editorial-stat-card">
      <p class="editorial-stat-card__label"><span class="editorial-stat-card__pip"></span>Uploaded Files</p>
      <p class="editorial-stat-card__value">{{ dashboard_summary.total_documents }}</p>
    </article>

    <article class="editorial-stat-card">
      <p class="editorial-stat-card__label"><span class="editorial-stat-card__pip"></span>VAT Approved</p>
      <p class="editorial-stat-card__value editorial-stat-card__value--currency">{{ dashboard_summary.total_vat_approved|floatformat:2 }}</p>
    </article>
  </div>

  {% if draft_claims and display_mode != 'drafts' %}
    <article class="surface-card dashboard-panel editorial-panel editorial-draft-panel">
      <div class="editorial-panel__head">
        <div class="editorial-panel__title-wrap">
          <h2 class="editorial-panel__title">Drafts</h2>
          <span class="editorial-panel__count">{{ draft_count }}</span>
        </div>
      </div>

      <div class="table-responsive queue-table-wrap editorial-table-wrap d-none d-lg-block">
        <table class="table align-middle queue-table editorial-queue-table editorial-draft-table mb-0">
          <thead>
            <tr>
              <th>Claim</th>
              <th>Status</th>
              <th>Autosaved</th>
              <th class="text-end">Rows</th>
              <th class="text-end">Files</th>
              <th class="text-end">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for claim in draft_claims %}
              <tr class="editorial-draft-table__row">
                <td class="queue-table__claim editorial-queue-table__claim">
                  <div class="queue-table__claim-card queue-table__claim-card--inline">
                    <span class="queue-table__claim-ref">{{ claim.claim_reference_number }}</span>
                    <div class="claim-table__primary">{{ claim.applicant_name_english|default:"Draft" }}</div>
                  </div>
                </td>
                <td><span class="editorial-draft-pill">Draft</span></td>
                <td>
                  <div class="editorial-draft-status">
                    <span class="editorial-draft-status__pill">Saved</span>
                    <span class="queue-table__date">{{ claim.dashboard_draft_saved_at|date:'d M Y H:i' }}</span>
                  </div>
                </td>
                <td class="text-end queue-table__number">{{ claim.draft_invoice_count|default:0 }}</td>
                <td class="text-end queue-table__number">{{ claim.draft_document_count|default:0 }}</td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm queue-action-group editorial-action-group editorial-draft-action-group" role="group" aria-label="Draft actions">
                    <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark btn-sm editorial-draft-action">Resume</a>
                    <form method="post" action="{% url 'verification:claim_discard_draft' claim.pk %}" class="editorial-draft-discard-form">
                      {% csrf_token %}
                      <button type="submit" class="btn btn-outline-danger btn-sm editorial-draft-discard">Discard</button>
                    </form>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="queue-card-list d-grid d-lg-none editorial-draft-card-list">
        {% for claim in draft_claims %}
          <article class="surface-card queue-card editorial-mobile-card editorial-draft-card">
            <div class="queue-card__header">
              <div>
                <h4 class="h6 fw-semibold mb-1">{{ claim.claim_reference_number }}</h4>
                <p class="queue-card__subtle mb-0">{{ claim.applicant_name_english|default:"Draft" }}</p>
              </div>
            </div>

            <div class="queue-card__metrics editorial-draft-card__metrics">
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Status</span>
                <span class="queue-card__metric-value"><span class="editorial-draft-pill">Draft</span></span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Autosaved</span>
                <span class="queue-card__metric-value editorial-draft-card__saved">
                  <span class="editorial-draft-status__pill">Saved</span>
                  {{ claim.dashboard_draft_saved_at|date:'d M Y H:i' }}
                </span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Rows</span>
                <span class="queue-card__metric-value">{{ claim.draft_invoice_count|default:0 }}</span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Files</span>
                <span class="queue-card__metric-value">{{ claim.draft_document_count|default:0 }}</span>
              </div>
            </div>

            <div class="queue-card__actions">
              <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark btn-sm">Resume</a>
              <form method="post" action="{% url 'verification:claim_discard_draft' claim.pk %}" class="editorial-draft-discard-form">
                {% csrf_token %}
                <button type="submit" class="btn btn-outline-danger btn-sm">Discard</button>
              </form>
            </div>
          </article>
        {% endfor %}
      </div>
    </article>
  {% endif %}

  <article class="surface-card dashboard-panel editorial-panel">
    <div class="editorial-panel__head">
      <div class="editorial-panel__title-wrap">
        <h2 class="editorial-panel__title">{% if display_mode == 'drafts' %}Drafts{% else %}Recent Claims{% endif %}</h2>
        <span class="editorial-panel__count">{{ page_obj.paginator.count }} visible</span>
      </div>

      <div class="editorial-panel__tools" role="group" aria-label="Quick claim filters">
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.all %}?{{ filter_querystrings.all }}{% endif %}" class="editorial-filter-chip {% if doc_filter == 'all' %}is-active{% endif %}">
          <span>All Reports</span>
          <strong>{{ quick_filter_counts.all }}</strong>
        </a>
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.incomplete %}?{{ filter_querystrings.incomplete }}{% endif %}" class="editorial-filter-chip {% if doc_filter == 'incomplete' %}is-active{% endif %}">
          <span>Incomplete</span>
          <strong>{{ quick_filter_counts.incomplete }}</strong>
        </a>
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.complete %}?{{ filter_querystrings.complete }}{% endif %}" class="editorial-filter-chip {% if doc_filter == 'complete' %}is-active{% endif %}">
          <span>Completed</span>
          <strong>{{ quick_filter_counts.complete }}</strong>
        </a>
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.rejected %}?{{ filter_querystrings.rejected }}{% endif %}" class="editorial-filter-chip {% if doc_filter == 'rejected' %}is-active{% endif %}">
          <span>Rejected Docs</span>
          <strong>{{ quick_filter_counts.rejected }}</strong>
        </a>
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.draft %}?{{ filter_querystrings.draft }}{% endif %}" class="editorial-filter-chip {% if doc_filter == 'draft' %}is-active{% endif %}">
          <span>Draft</span>
          <strong>{{ quick_filter_counts.draft }}</strong>
        </a>
      </div>
    </div>

    {% if rejection_reason_filters and display_mode != 'drafts' %}
      <div class="editorial-panel__reason-tools" role="group" aria-label="Rejected document reasons">
        <a href="{% url 'accounts:dashboard' %}{% if filter_querystrings.rejected %}?{{ filter_querystrings.rejected }}{% endif %}" class="editorial-reason-chip {% if doc_filter == 'rejected' and not rejection_reason %}is-active{% endif %}">
          <span>All Reasons</span>
          <strong>{{ quick_filter_counts.rejected }}</strong>
        </a>
        {% for reason_filter in rejection_reason_filters %}
          <a href="{% url 'accounts:dashboard' %}?{{ reason_filter.querystring }}" class="editorial-reason-chip {% if rejection_reason == reason_filter.value %}is-active{% endif %}">
            <span>{{ reason_filter.label }}</span>
            <strong>{{ reason_filter.count }}</strong>
          </a>
        {% endfor %}
      </div>
    {% endif %}

    {% if has_active_filters %}
      <div class="queue-panel__meta editorial-panel__meta">
        <span class="queue-result-chip editorial-result-chip">
          <i class="bi bi-funnel-fill" aria-hidden="true"></i>
          Filters active
        </span>
      </div>
    {% endif %}

    {% if claims %}
      {% if display_mode == 'drafts' %}
        <div class="table-responsive queue-table-wrap editorial-table-wrap d-none d-xl-block">
          <table class="table align-middle queue-table editorial-queue-table editorial-draft-table mb-0">
            <thead>
              <tr>
                <th>Claim</th>
                <th>Status</th>
                <th>Saved</th>
                <th class="text-end">Rows</th>
                <th class="text-end">Files</th>
                <th class="text-end">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for claim in claims %}
                <tr class="editorial-draft-table__row">
                  <td class="queue-table__claim editorial-queue-table__claim">
                    <div class="queue-table__claim-card queue-table__claim-card--inline">
                      <span class="queue-table__claim-ref">{{ claim.claim_reference_number }}</span>
                      <div class="claim-table__primary">{{ claim.applicant_name_english|default:"Draft" }}</div>
                    </div>
                  </td>
                  <td><span class="editorial-draft-pill">Draft</span></td>
                  <td>
                    <div class="editorial-draft-status">
                      <span class="editorial-draft-status__pill">Saved</span>
                      <span class="queue-table__date">{{ claim.dashboard_draft_saved_at|date:'d M Y H:i' }}</span>
                    </div>
                  </td>
                  <td class="text-end queue-table__number">{{ claim.draft_invoice_count|default:0 }}</td>
                  <td class="text-end queue-table__number">{{ claim.draft_document_count|default:0 }}</td>
                  <td class="text-end">
                    <div class="btn-group btn-group-sm queue-action-group editorial-action-group editorial-draft-action-group" role="group" aria-label="Draft actions">
                      <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark btn-sm editorial-draft-action">Resume</a>
                      <form method="post" action="{% url 'verification:claim_discard_draft' claim.pk %}" class="editorial-draft-discard-form">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-outline-danger btn-sm editorial-draft-discard">Discard</button>
                      </form>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="queue-card-list d-grid d-xl-none editorial-draft-card-list">
          {% for claim in claims %}
            <article class="surface-card queue-card editorial-mobile-card editorial-draft-card">
              <div class="queue-card__header">
                <div>
                  <h4 class="h6 fw-semibold mb-1">{{ claim.claim_reference_number }}</h4>
                  <p class="queue-card__subtle mb-0">{{ claim.applicant_name_english|default:"Draft" }}</p>
                </div>
              </div>

              <div class="queue-card__metrics editorial-draft-card__metrics">
                <div class="queue-card__metric">
                  <span class="queue-card__metric-label">Status</span>
                  <span class="queue-card__metric-value"><span class="editorial-draft-pill">Draft</span></span>
                </div>
                <div class="queue-card__metric">
                  <span class="queue-card__metric-label">Saved</span>
                  <span class="queue-card__metric-value editorial-draft-card__saved">
                    <span class="editorial-draft-status__pill">Saved</span>
                    {{ claim.dashboard_draft_saved_at|date:'d M Y H:i' }}
                  </span>
                </div>
                <div class="queue-card__metric">
                  <span class="queue-card__metric-label">Rows</span>
                  <span class="queue-card__metric-value">{{ claim.draft_invoice_count|default:0 }}</span>
                </div>
                <div class="queue-card__metric">
                  <span class="queue-card__metric-label">Files</span>
                  <span class="queue-card__metric-value">{{ claim.draft_document_count|default:0 }}</span>
                </div>
              </div>

              <div class="queue-card__actions">
                <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark btn-sm">Resume</a>
                <form method="post" action="{% url 'verification:claim_discard_draft' claim.pk %}" class="editorial-draft-discard-form">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-outline-danger btn-sm">Discard</button>
                </form>
              </div>
            </article>
          {% endfor %}
        </div>
      {% else %}
      <div class="table-responsive queue-table-wrap editorial-table-wrap d-none d-xl-block">
        <table class="table align-middle queue-table editorial-queue-table mb-0">
          <thead>
            <tr>
              <th>
                <a href="{% url 'accounts:dashboard' %}?{{ sort_querystrings.claim }}" class="queue-sort-link {% if sort_states.claim %}is-active{% endif %}">
                  <span>Claim</span>
                  <i class="bi {% if sort_states.claim == 'asc' %}bi-arrow-up{% elif sort_states.claim == 'desc' %}bi-arrow-down{% else %}bi-arrow-down-up{% endif %}" aria-hidden="true"></i>
                </a>
              </th>
              <th>
                <a href="{% url 'accounts:dashboard' %}?{{ sort_querystrings.documents }}" class="queue-sort-link {% if sort_states.documents %}is-active{% endif %}">
                  <span>Documents</span>
                  <i class="bi {% if sort_states.documents == 'asc' %}bi-arrow-up{% elif sort_states.documents == 'desc' %}bi-arrow-down{% else %}bi-arrow-down-up{% endif %}" aria-hidden="true"></i>
                </a>
              </th>
              <th>Rejected Count</th>
              <th class="text-end">
                <a href="{% url 'accounts:dashboard' %}?{{ sort_querystrings.total_paid }}" class="queue-sort-link queue-sort-link--end {% if sort_states.total_paid %}is-active{% endif %}">
                  <span>Total Paid</span>
                  <i class="bi {% if sort_states.total_paid == 'asc' %}bi-arrow-up{% elif sort_states.total_paid == 'desc' %}bi-arrow-down{% else %}bi-arrow-down-up{% endif %}" aria-hidden="true"></i>
                </a>
              </th>
              <th class="text-end">
                <a href="{% url 'accounts:dashboard' %}?{{ sort_querystrings.vat_approved }}" class="queue-sort-link queue-sort-link--end {% if sort_states.vat_approved %}is-active{% endif %}">
                  <span>VAT Approved</span>
                  <i class="bi {% if sort_states.vat_approved == 'asc' %}bi-arrow-up{% elif sort_states.vat_approved == 'desc' %}bi-arrow-down{% else %}bi-arrow-down-up{% endif %}" aria-hidden="true"></i>
                </a>
              </th>
              <th>
                <a href="{% url 'accounts:dashboard' %}?{{ sort_querystrings.updated }}" class="queue-sort-link {% if sort_states.updated %}is-active{% endif %}">
                  <span>Updated</span>
                  <i class="bi {% if sort_states.updated == 'asc' %}bi-arrow-up{% elif sort_states.updated == 'desc' %}bi-arrow-down{% else %}bi-arrow-down-up{% endif %}" aria-hidden="true"></i>
                </a>
              </th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for claim in claims %}
              <tr
                class="queue-table__row queue-table__row--{{ claim.dashboard_document_state }} queue-table__row--clickable editorial-queue-table__row"
                data-row-link="{% url 'verification:claim_detail' claim.pk %}"
                tabindex="0"
                role="link"
                aria-label="Open {{ claim.claim_reference_number }}"
              >
                <td class="queue-table__claim editorial-queue-table__claim">
                  <div class="queue-table__claim-card queue-table__claim-card--inline">
                    <span class="queue-table__claim-ref">{{ claim.claim_reference_number }}</span>
                    <div class="claim-table__primary">{{ claim.applicant_name_english }}</div>
                    <div class="queue-table__secondary">Received {{ claim.date_received|date:'d M Y' }}</div>
                  </div>
                </td>
                <td class="queue-table__documents">
                  <div class="queue-doc-summary queue-doc-summary--inline">
                    <span class="queue-doc-state queue-doc-state--{{ claim.dashboard_document_state }}">{{ claim.dashboard_document_state_label }}</span>
                    <span class="queue-doc-count-badge">{{ claim.dashboard_document_count|default:0 }} files</span>
                    <span class="queue-doc-counter queue-doc-counter--invoice {% if claim.dashboard_invoice_review_complete %}queue-doc-counter--review-complete{% endif %}">
                      <strong class="queue-doc-counter__value">{{ claim.dashboard_invoice_document_count|default:0 }}</strong>
                      <span class="queue-doc-counter__label">invoice</span>
                    </span>
                    <span class="queue-doc-counter queue-doc-counter--proof {% if claim.dashboard_proof_review_complete %}queue-doc-counter--review-complete{% endif %}">
                      <strong class="queue-doc-counter__value">{{ claim.dashboard_payment_proof_count|default:0 }}</strong>
                      <span class="queue-doc-counter__label">proof</span>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="queue-doc-summary queue-doc-summary--inline">
                    <span class="queue-doc-counter queue-doc-counter--invoice">
                      <strong class="queue-doc-counter__value">{{ claim.dashboard_rejected_invoice_count|default:0 }}</strong>
                      <span class="queue-doc-counter__label">invoice</span>
                    </span>
                    <span class="queue-doc-counter queue-doc-counter--proof">
                      <strong class="queue-doc-counter__value">{{ claim.dashboard_rejected_proof_count|default:0 }}</strong>
                      <span class="queue-doc-counter__label">proof</span>
                    </span>
                  </div>
                </td>
                <td class="text-end queue-table__number">{{ claim.dashboard_total_amount_paid|default:0|floatformat:2 }}</td>
                <td class="text-end queue-table__number">{{ claim.dashboard_total_vat_approved|default:0|floatformat:2 }}</td>
                <td class="queue-table__date">{{ claim.updated_at|date:'d M Y H:i' }}</td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm queue-action-group editorial-action-group" role="group" aria-label="Queue actions">
                    <a href="{% url 'verification:claim_detail' claim.pk %}" class="btn btn-outline-secondary queue-action-group__view">View</a>
                    <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark">Edit</a>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="queue-card-list d-grid d-xl-none">
        {% for claim in claims %}
          <article
            class="surface-card queue-card queue-card--clickable editorial-mobile-card"
            data-row-link="{% url 'verification:claim_detail' claim.pk %}"
            tabindex="0"
            role="link"
            aria-label="Open {{ claim.claim_reference_number }}"
          >
            <div class="queue-card__header">
              <div>
                <p class="tiny-label mb-1">Claim Reference</p>
                <h4 class="h6 fw-semibold mb-1">{{ claim.claim_reference_number }}</h4>
                <p class="queue-card__subtle mb-0">Received {{ claim.date_received|date:'d M Y' }}</p>
              </div>
              <span class="queue-doc-state queue-doc-state--{{ claim.dashboard_document_state }}">{{ claim.dashboard_document_state_label }}</span>
            </div>

            <div class="queue-card__person">
              <div class="claim-table__primary">{{ claim.applicant_name_english }}</div>
            </div>

            <div class="queue-card__metrics">
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Invoice Rows</span>
                <span class="queue-card__metric-value">{{ claim.dashboard_invoice_count|default:0 }}</span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Files</span>
                <span class="queue-card__metric-value">{{ claim.dashboard_document_count|default:0 }}</span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">Total Paid</span>
                <span class="queue-card__metric-value">{{ claim.dashboard_total_amount_paid|default:0|floatformat:2 }}</span>
              </div>
              <div class="queue-card__metric">
                <span class="queue-card__metric-label">VAT Approved</span>
                <span class="queue-card__metric-value">{{ claim.dashboard_total_vat_approved|default:0|floatformat:2 }}</span>
              </div>
            </div>

            <div class="queue-card__documents">
              <div class="queue-doc-counters">
                <span class="queue-doc-counter queue-doc-counter--invoice {% if claim.dashboard_invoice_review_complete %}queue-doc-counter--review-complete{% endif %}">
                  <strong class="queue-doc-counter__value">{{ claim.dashboard_invoice_document_count|default:0 }}</strong>
                  <span class="queue-doc-counter__label">invoice</span>
                </span>
                <span class="queue-doc-counter queue-doc-counter--proof {% if claim.dashboard_proof_review_complete %}queue-doc-counter--review-complete{% endif %}">
                  <strong class="queue-doc-counter__value">{{ claim.dashboard_payment_proof_count|default:0 }}</strong>
                  <span class="queue-doc-counter__label">proof</span>
                </span>
              </div>
              <div class="queue-doc-counters">
                <span class="queue-doc-counter queue-doc-counter--invoice">
                  <strong class="queue-doc-counter__value">{{ claim.dashboard_rejected_invoice_count|default:0 }}</strong>
                  <span class="queue-doc-counter__label">rejected invoice</span>
                </span>
                <span class="queue-doc-counter queue-doc-counter--proof">
                  <strong class="queue-doc-counter__value">{{ claim.dashboard_rejected_proof_count|default:0 }}</strong>
                  <span class="queue-doc-counter__label">rejected proof</span>
                </span>
              </div>
            </div>

            <div class="queue-card__actions">
              <a href="{% url 'verification:claim_detail' claim.pk %}" class="btn btn-outline-secondary btn-sm">View</a>
              <a href="{% url 'verification:claim_update' claim.pk %}" class="btn btn-dark btn-sm">Edit</a>
            </div>
          </article>
        {% endfor %}
      </div>
      {% endif %}

      {% if page_obj.paginator.count %}
        <nav class="queue-pagination-wrap editorial-pagination-wrap" aria-label="Report queue pagination">
          <div class="queue-pagination__summary">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
          </div>
          <ul class="pagination pagination-sm mb-0 queue-pagination">
            <li class="page-item {% if not page_obj.has_previous %}disabled{% endif %}">
              {% if page_obj.has_previous %}
                <a class="page-link" href="{% url 'accounts:dashboard' %}?{% if pagination_querystring %}{{ pagination_querystring }}&{% endif %}page={{ page_obj.previous_page_number }}" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              {% else %}
                <span class="page-link" aria-hidden="true">&laquo;</span>
              {% endif %}
            </li>

            {% for page_number in pagination_range %}
              {% if page_number == page_obj.paginator.ELLIPSIS %}
                <li class="page-item disabled"><span class="page-link">{{ page_number }}</span></li>
              {% else %}
                <li class="page-item {% if page_obj.number == page_number %}active{% endif %}">
                  <a class="page-link" href="{% url 'accounts:dashboard' %}?{% if pagination_querystring %}{{ pagination_querystring }}&{% endif %}page={{ page_number }}">{{ page_number }}</a>
                </li>
              {% endif %}
            {% endfor %}

            <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
              {% if page_obj.has_next %}
                <a class="page-link" href="{% url 'accounts:dashboard' %}?{% if pagination_querystring %}{{ pagination_querystring }}&{% endif %}page={{ page_obj.next_page_number }}" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              {% else %}
                <span class="page-link" aria-hidden="true">&raquo;</span>
              {% endif %}
            </li>
          </ul>
        </nav>
      {% endif %}
    {% else %}
      <div class="dashboard-empty-state editorial-empty-state">
        <div class="dashboard-empty-state__icon"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></div>
        <div>
          {% if has_active_filters %}
            <h3 class="h6 fw-semibold mb-1">{% if display_mode == 'drafts' %}No drafts match the current filters{% else %}No reports match the current filters{% endif %}</h3>
            <p class="text-muted mb-3">{% if display_mode == 'drafts' %}Try widening the date range or clearing the search to find saved drafts.{% else %}Try widening the date range, changing the completion filter, or clearing the search.{% endif %}</p>
            <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-secondary btn-sm">Clear Filters</a>
          {% else %}
            <h3 class="h6 fw-semibold mb-1">No verification reports yet</h3>
            <p class="text-muted mb-3">Create the first claim verification report and start attaching invoice rows to it.</p>
            <a href="{% url 'verification:claim_create' %}" class="btn btn-brand btn-sm">
              <i class="bi bi-plus-circle me-1" aria-hidden="true"></i> Create First Report
            </a>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </article>
</section>
{% endblock %}