{% extends "layouts/base.html" %}
{% block title %}Call Transcript{% endblock %}
{% block extra_css %}
<style>
    .chat-transcript {
        max-width: 700px;
        margin: 30px auto 0 auto;
        padding: 20px;
        background: #f7f7fa;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

    .chat-message {
        display: flex;
        margin-bottom: 18px;
    }

    .user-message {
        justify-content: flex-end;
    }

    .user-message span{
        color: white;
    }

    .ai-message {
        font-size: 14px;
        justify-content: flex-start;
    }

    .chat-bubble {
        max-width: 70%;
        padding: 12px 18px;
        border-radius: 18px;
        position: relative;
        font-size: 1.08em;
        background: #e0e7ff;
        color: #222;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .user-message .chat-bubble {
        background: #4f8cff;
        color: #fff;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 14px;
        align-self: flex-end;
        font-size: 14px;
    }

    .ai-message .chat-bubble {
        background: #e0e7ff;
        color: #222;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 14px;
        align-self: flex-start;
    }

    .chat-timestamp {
        display: block;
        font-size: 0.85em;
        color: #888;
        margin-top: 6px;
        text-align: right;
    }

    .action-button{
        text-decoration: none;
    }
</style>
{% endblock %}
{% block content %}
<h2>Call Transcript for {{ call[1] }} ({{ call[2] }})</h2>
<p>Status: {{ call[3] }}</p>
<div class="header-actions" style="margin-bottom: 20px;text-align: right;">
    <a class="action-button primary" href="{{ url_for('company.view_call_campaign', campaign_id=campaign_id) }}">Back to Campaign</a>
</div>
<hr>
<div class="chat-transcript">
    {% for entry in transcript %}
    {% if entry[0] %}
    <div class="chat-message user-message">
        <div class="chat-bubble">
            <strong>User:</strong> {{ entry[0] }}
            <span class="chat-timestamp">{{ entry[2] }}</span>
        </div>
    </div>
    {% endif %}
    {% if entry[1] %}
    <div class="chat-message ai-message">
        <div class="chat-bubble">
            <strong>AI:</strong> {{ entry[1] }}
            <span class="chat-timestamp">{{ entry[2] }}</span>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endblock %}