{% extends 'superuser/base_superuser.html' %}

{% block title %}Company-Wise AI Replies | Superuser{% endblock %}
{% block ai_replies_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Company-Wise AI Replies</h2>
        <p class="page-subtitle">Recent automated responses sent by the AI models, grouped by company.</p>
    </div>
</div>

<div class="glass-card" style="padding: 1.5rem;">
    {% if company_replies %}
        <div style="display:flex; flex-direction:column; gap:2rem;">
        {% for cr in company_replies %}
            <div>
                <h3 style="margin-top:0; margin-bottom:1rem; border-bottom:1px solid var(--border-color); padding-bottom:0.5rem; color:var(--primary);">
                    {{ cr.company.name }} 
                    <span style="font-size:0.8rem; color:var(--text-muted); font-weight:normal;">({{ cr.company.ai_provider|title }} - {{ cr.company.model_name }})</span>
                </h3>
                <div style="display:flex; flex-direction:column; gap:0.75rem;">
                    {% for reply in cr.replies %}
                        <div style="border:1px solid var(--border-color); border-radius:6px; padding:0.75rem; background:rgba(255,255,255,0.02);">
                            <div style="display:flex; justify-content:space-between; margin-bottom:0.4rem;">
                                <span style="font-size:0.8rem; color:var(--text-secondary);">To: <code>{{ reply.visitor_id }}</code></span>
                                <span style="font-size:0.75rem; color:var(--text-muted);">{{ reply.created_at|date:"M d, Y H:i:s" }}</span>
                            </div>
                            <div style="font-size:0.9rem; line-height:1.4; color:#e2e8f0; white-space:pre-wrap;">{{ reply.content }}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
        </div>
    {% else %}
        <p style="color:var(--text-muted); text-align:center; padding:2rem 0;">No AI replies found yet.</p>
    {% endif %}
</div>
{% endblock %}