{% extends "base.html" %}

{% block title %}{{ call.client_name }} — Pilot Call Detail{% endblock %}
{% block meta_description %}Detailed tax relief pilot call record with transcript, extracted intake fields, urgency rules, completion score, and integration readiness.{% endblock %}

{% block content %}
<section class="page-hero compact detail-hero">
  <div class="container">
    <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-lg-end">
      <div>
        <span class="eyebrow">Pilot call review</span>
        <h1 class="page-title">{{ call.client_name }}</h1>
        <p class="hero-copy mb-0">{{ call.phone }}{% if call.email %} · {{ call.email }}{% endif %}</p>
      </div>
      <div class="score-circle" aria-label="Completion score {{ call.completion_score }} percent"><strong>{{ call.completion_score }}%</strong><span>complete</span></div>
    </div>
  </div>
</section>

<section class="section-pad pt-4">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="detail-panel mb-4">
          <div class="panel-heading"><span>Transcript</span><h2>Conversation feed</h2></div>
          <div class="transcript-review">{{ call.transcript|linebreaks }}</div>
        </div>
        <div class="detail-panel">
          <div class="panel-heading"><span>Schema</span><h2>Extracted intake fields</h2></div>
          <div class="row g-3">
            {% for label, value in intake_fields %}
            <div class="col-md-6 col-xl-4">
              <div class="field-tile {% if not value %}missing{% endif %}">
                <span>{{ label }}</span>
                <strong>{% if value %}{{ value }}{% else %}Missing{% endif %}</strong>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <aside class="col-lg-4">
        <div class="detail-panel mb-4">
          <div class="panel-heading"><span>Readiness</span><h2>Integrations</h2></div>
          <ul class="readiness-list">
            <li><span>Call source</span><strong>{{ call.get_call_source_display }}</strong></li>
            <li><span>Ytel live audio</span><strong>{{ call.get_ytel_audio_status_display }}</strong></li>
            <li><span>Logics API</span><strong>{{ call.get_logics_api_status_display }}</strong></li>
          </ul>
        </div>
        <div class="detail-panel mb-4">
          <div class="panel-heading"><span>Rules</span><h2>Coach alerts</h2></div>
          {% if call.urgent_flags %}
          <div class="flag-stack">
            {% for flag in call.urgent_flags %}<span class="alert-flag">{{ flag }}</span>{% endfor %}
          </div>
          {% else %}
          <p class="text-muted-custom mb-0">No urgent rules triggered yet.</p>
          {% endif %}
        </div>
        <div class="detail-panel mb-4">
          <div class="panel-heading"><span>Missing</span><h2>Required fields</h2></div>
          {% if call.missing_required_labels %}
          <ul class="missing-list">
            {% for label in call.missing_required_labels %}<li>{{ label }}</li>{% endfor %}
          </ul>
          {% else %}
          <p class="text-muted-custom mb-0">All required fields are captured.</p>
          {% endif %}
        </div>
        <div class="detail-panel">
          <div class="panel-heading"><span>Notes</span><h2>Next steps</h2></div>
          <p>{{ call.agent_notes|default:'No notes yet.'|linebreaksbr }}</p>
          <div class="d-grid gap-2 mt-3">
            <a class="btn btn-signal" href="{% url 'call_create' %}">Create another call</a>
            <a class="btn btn-ghost" href="{% url 'call_list' %}">Back to history</a>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>
{% endblock %}