{% extends "base.html" %}
{% from "macros.html" import render_field %}

{% block title %}Session Overview{% endblock %}

{% block content_title %}Session Overview{% endblock %}
{% block content_description %}An overview of the chat session.{% endblock %}

{% block content %}
<div class="container mt-5">
    <h2>Chat Session Details</h2>
    <div class="card mb-4">
        <div class="card-header">
            <h5>Session Information</h5>
        </div>
        <div class="card-body">
            <p><strong>Session ID:</strong> {{ chat_session.session_id }}</p>
            <p><strong>User:</strong> {{ chat_session.user.user_name if chat_session.user else 'Anonymous' }}</p>
            <p><strong>Start:</strong> {{ chat_session.session_start | to_local_time(chat_session.timezone) }}</p>
            <p><strong>End:</strong> {{ chat_session.session_end | to_local_time(chat_session.timezone) if chat_session.session_end else 'Ongoing' }}</p>
        </div>
    </div>

    <h3>Interactions</h3>
    <div class="accordion" id="interactionsAccordion">
        {% for interaction in interactions %}
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{ loop.index }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse{{ loop.index }}" aria-expanded="false"
                        aria-controls="collapse{{ loop.index }}">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <span class="interaction-question">{{ interaction.question | truncate(50) }}</span>
                        <span class="interaction-icons">
                            <i class="material-icons algorithm-icon {{ interaction.algorithm_used | lower }}">fingerprint</i>
                            <i class="material-icons thumb-icon {% if interaction.appreciation == 100 %}filled{% else %}outlined{% endif %}">thumb_up</i>
                            <i class="material-icons thumb-icon {% if interaction.appreciation == 0 %}filled{% else %}outlined{% endif %}">thumb_down</i>
                        </span>
                    </div>
                </button>
            </h2>
            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}"
                 data-bs-parent="#interactionsAccordion">
                <div class="accordion-body">
                    <h6>Detailed Question:</h6>
                    <p>{{ interaction.detailed_question }}</p>
                    <h6>Answer:</h6>
                    <div class="markdown-content">{{ interaction.answer | safe }}</div>
                    {% if embeddings_dict.get(interaction.id) %}
                    <h6>Related Documents:</h6>
                    <ul>
                        {% for embedding in embeddings_dict[interaction.id] %}
                        <li>
                            {% if embedding.url %}
                            <a href="{{ embedding.url }}" target="_blank">{{ embedding.url }}</a>
                            {% else %}
                            {{ embedding.file_name }}
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var markdownElements = document.querySelectorAll('.markdown-content');
        markdownElements.forEach(function(el) {
            el.innerHTML = marked.parse(el.textContent);
        });
    });
</script>
{% endblock %}