{% extends "base.html" %}
{% from "components/page_header.html" import page_header %}
{% from "components/empty_state.html" import empty_state %}

{% block title %}My Reports · CampusCart{% endblock %}

{% set status_badge = {'pending': 'warning', 'under_review': 'info', 'resolved': 'success', 'dismissed': 'secondary'} %}

{% block content %}
<div class="dashboard-page my-reports-page">
  {{ page_header('My Reports', 'Reports you submitted and their current status.') }}

  {% if reports %}
    <div class="card border-0 shadow-sm">
      <div class="table-responsive">
        <table class="table align-middle mb-0 my-reports-table">
          <thead>
            <tr>
              <th scope="col">Reported item</th>
              <th scope="col">Reason</th>
              <th scope="col">Status</th>
              <th scope="col">Submitted</th>
              <th scope="col">Updated</th>
            </tr>
          </thead>
          <tbody>
            {% for r in reports %}
              <tr>
                <td>
                  {% if r.listing_public_id %}
                    <a href="{{ url_for('marketplace.listing_detail', public_id=r.listing_public_id) }}" class="fw-semibold text-decoration-none">{{ r.listing_title }}</a>
                  {% elif r.listing_title %}
                    <span class="fw-semibold">{{ r.listing_title }}</span>
                    <span class="badge text-bg-light ms-1">Removed</span>
                  {% else %}
                    <span class="text-muted text-capitalize">{{ r.entity_type }}</span>
                  {% endif %}
                  <div class="text-muted small"><code>{{ r.short_id }}</code></div>
                </td>
                <td>{{ r.reason }}</td>
                <td><span class="badge text-bg-{{ status_badge.get(r.status, 'secondary') }}">{{ r.status_label }}</span></td>
                <td class="text-muted small">{{ r.created_at.strftime('%d %b %Y') }}</td>
                <td class="text-muted small">{{ r.resolved_at.strftime('%d %b %Y') if r.resolved_at else '—' }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <p class="text-muted small mt-3 mb-0">
      <i class="bi bi-shield-lock me-1"></i>
      To protect everyone's privacy, we don't share the specific action taken against another user.
    </p>
  {% else %}
    {{ empty_state('bi-flag', "You haven't reported anything",
         "If you come across a listing that breaks our guidelines, use the Report button on the listing and it will show up here.",
         cta_label='Browse marketplace', cta_url=url_for('main.marketplace'), cta_icon='bi-shop') }}
  {% endif %}
</div>
{% endblock %}