{% extends "base.html" %}

{% block title %}{{ project_name }}{% endblock %}

{% block content %}
<main>
  <div class="header">
    <h1>Brand <span>Guardian</span></h1>
    <p>Your AI-powered sentinel against brand impersonation, counterfeit products, and negative sentiment.</p>
    <a href="{% url 'incident-add' %}" class="btn btn-review">Report New Incident</a>
    <a href="{% url 'incident-autofill' %}" class="btn btn-secondary">Auto-fill from URL</a>
  </div>

  <div class="stats-grid">
    <div class="stat-card">
      <h3>Total Incidents</h3>
      <p>{{ total_incidents }}</p>
    </div>
    <div class="stat-card">
      <h3>New Incidents</h3>
      <p>{{ new_incidents }}</p>
    </div>
    <div class="stat-card">
      <h3>In Review</h3>
      <p>{{ in_review_incidents }}</p>
    </div>
    <div class="stat-card">
      <h3>Resolved</h3>
      <p>{{ resolved_incidents }}</p>
    </div>
    <div class="stat-card">
      <h3>Dismissed</h3>
      <p>{{ dismissed_incidents }}</p>
    </div>
  </div>

  <div class="incidents-grid">
    {% for incident in incidents %}
    <div class="incident-card">
      <div class="card-header">
        <h3>{{ incident.get_incident_type_display }}</h3>
        <span class="status {{ incident.status }}">{{ incident.get_status_display }}</span>
      </div>
      <div class="card-body">
        <p><strong>Source:</strong> <a href="{{ incident.source_url }}" target="_blank" rel="noopener noreferrer">{{ incident.source_url }}</a></p>
        <p>{{ incident.content }}</p>
      </div>
      <div class="card-footer">
        <a href="{% url 'article_detail' incident.id %}" class="btn btn-review">Review</a>
        <a href="{% url 'dismiss_incident' incident.id %}" class="btn btn-secondary">Dismiss</a>
      </div>
    </div>
    {% empty %}
    <div class="incident-card empty-state">
        <div class="card-body">
            <p>No incidents reported yet. The system is monitoring for new issues.</p>
        </div>
    </div>
    {% endfor %}
  </div>
</main>
{% endblock %}
