{% extends "base.html" %}

{% block title %}Pilot Call History — ReliefSignal{% endblock %}
{% block meta_description %}Review saved tax relief pilot calls with source, completion score, CRM readiness, and urgency flags.{% endblock %}

{% block content %}
<section class="page-hero compact">
  <div class="container d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-lg-end">
    <div>
      <span class="eyebrow">History</span>
      <h1 class="page-title">Pilot call records</h1>
      <p class="hero-copy mb-0">Every saved call becomes evidence for what the MVP captures and what integrations still need validation.</p>
    </div>
    <a class="btn btn-signal" href="{% url 'call_create' %}">New pilot call</a>
  </div>
</section>

<section class="section-pad pt-4">
  <div class="container">
    {% if calls %}
    <div class="history-shell">
      <div class="table-responsive">
        <table class="table align-middle history-table">
          <thead>
            <tr>
              <th>Client</th>
              <th>Source</th>
              <th>Completion</th>
              <th>Readiness</th>
              <th>Flags</th>
              <th class="text-end">Open</th>
            </tr>
          </thead>
          <tbody>
            {% for call in calls %}
            <tr>
              <td><strong>{{ call.client_name }}</strong><br><span>{{ call.phone }}</span></td>
              <td>{{ call.get_call_source_display }}<br><span>{{ call.created_at|date:"M j, Y g:i A" }}</span></td>
              <td><span class="score-badge">{{ call.completion_score }}%</span></td>
              <td><span>Ytel: {{ call.get_ytel_audio_status_display }}</span><br><span>Logics: {{ call.get_logics_api_status_display }}</span></td>
              <td>
                {% if call.urgent_flags %}
                  {% for flag in call.urgent_flags %}<span class="mini-flag">{{ flag }}</span>{% endfor %}
                {% else %}
                  <span class="text-muted-custom">None</span>
                {% endif %}
              </td>
              <td class="text-end"><a class="btn btn-outline-signal btn-sm" href="{% url 'call_detail' call.pk %}">Review</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="empty-state">
      <h2>No call history yet</h2>
      <p>Save your first pilot call to confirm the workflow from transcript capture to scored intake review.</p>
      <a class="btn btn-signal" href="{% url 'call_create' %}">Create first call</a>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}