{% extends "base.html" %}
{% block title %}جزئیات تماس — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('calls.index') }}">‹ بازگشت</a>
  <h1 class="title">جزئیات تماس</h1>
  <div class="spacer"></div>
  <a class="btn btn-gold" href="{{ url_for('customer_profile.show', customer_id=call.customer_id) }}">👤 مشاهده پرونده مشتری</a>
</div>

<div class="glass-panel" style="padding:20px 24px; display:flex; flex-direction:column; gap:14px; max-width:700px;">
  <div style="display:flex; gap:12px;"><span class="field-label" style="width:140px;">مشتری</span><span class="field-value">{{ call.customer.first_name }} {{ call.customer.last_name }}</span></div>
  <div style="display:flex; gap:12px;"><span class="field-label" style="width:140px;">فروشنده</span><span class="field-value">{{ call.salesperson.full_name if call.salesperson else "-" }}</span></div>
  <div style="display:flex; gap:12px;"><span class="field-label" style="width:140px;">تاریخ و ساعت تماس</span><span class="field-value">{{ jalali.to_jalali_str(call.call_date, with_time=true) }}</span></div>
  <div style="display:flex; gap:12px;"><span class="field-label" style="width:140px;">پاسخ داده شد؟</span><span class="field-value">{{ "بله" if call.answered == true else ("خیر" if call.answered == false else "-") }}</span></div>
</div>

<div class="glass-panel" style="padding:16px 24px; max-width:700px;">
  <span class="field-label">نتیجه تماس / توضیحات</span>
  <div class="field-value">{{ call.result_text or "-" }}</div>
</div>

<div class="glass-panel" style="padding:16px 24px; max-width:700px;">
  <span class="field-label">تگ‌های ثبت‌شده برای این تماس</span>
  <div style="display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;">
    {% for name in tag_names %}<span class="tag-chip">{{ name }}</span>{% else %}<span class="muted">تگی ثبت نشده</span>{% endfor %}
  </div>
</div>
{% endblock %}