{% extends 'agent/base_agent.html' %}

{% block title %}Submission Details #{{ object.id }} | ChatLab{% endblock %}
{% block agent_submissions_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Submission Details #{{ object.id }}</h2>
        <p class="page-subtitle">Submitted for <strong>{{ object.form.title }}</strong> from visitor <strong>{{ object.visitor_id }}</strong></p>
    </div>
    <a href="{% url 'agent_submission_list' %}" class="btn btn-secondary" style="border-radius: 0;">
        &larr; Back to Submissions
    </a>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 1rem;">
    <!-- Answers Panel -->
    <div class="glass-card" style="padding: 2.5rem; border-radius: 0; display: flex; flex-direction: column; gap: 1.5rem;">
        <h3 style="font-family: var(--font-heading); font-size: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem;">Visitor Responses</h3>
        
        {% if object.answers %}
            <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                {% for question, answer in object.answers.items %}
                    <div class="glass-card" style="padding: 1.25rem; border-radius: 0; background: rgba(255, 255, 255, 0.02);">
                        <div style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 600; letter-spacing: 0.05em;">
                            {{ question }}
                        </div>
                        <div style="font-size: 1.1rem; color: var(--text-primary); font-weight: 500; word-wrap: break-word;">
                            {{ answer }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p style="color: var(--text-secondary);">No response data available.</p>
        {% endif %}
    </div>

    <!-- Status & Info Panel -->
    <div style="display: flex; flex-direction: column; gap: 2rem;">
        <div class="glass-card" style="padding: 2rem; border-radius: 0;">
            <h3 style="font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 1.25rem;">Details</h3>
            
            <div style="display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
                <div>
                    <span style="color: var(--text-muted);">Form Title:</span>
                    <div style="font-weight: 600; margin-top: 0.15rem;">{{ object.form.title }}</div>
                </div>
                <div>
                    <span style="color: var(--text-muted);">Trigger Keyword:</span>
                    <div style="font-family: monospace; margin-top: 0.15rem;">{{ object.form.keyword }}</div>
                </div>
                <div>
                    <span style="color: var(--text-muted);">Visitor Reference:</span>
                    <div style="font-family: monospace; margin-top: 0.15rem;">{{ object.visitor_id }}</div>
                </div>
                <div>
                    <span style="color: var(--text-muted);">Submitted At:</span>
                    <div style="margin-top: 0.15rem;">{{ object.created_at|date:"Y-m-d H:i:s" }}</div>
                </div>
            </div>
        </div>

        <div class="glass-card" style="padding: 2rem; border-radius: 0;">
            <h3 style="font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 1.25rem;">Workflow Status</h3>
            
            <form method="post" action="{% url 'agent_submission_update_status' object.pk %}">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_status" class="form-label">Submission Status</label>
                    <select name="status" id="id_status" class="form-select" style="border-radius: 0; width: 100%;">
                        {% for val, label in status_choices %}
                            <option value="{{ val }}" {% if object.status == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%; border-radius: 0; margin-top: 0.5rem;">
                    Update Status
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}