{% extends "base.html" %}

{% block title %}View Data Capsule{% endblock %}

{% block content_title %}Data Capsule Details{% endblock %}
{% block content_description %}View information about this EvAI Data Capsule and its content.{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- Basic Information Section -->
    <h4 class="mb-3">Basis Informatie</h4>
    <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <td>{{ data_capsule.id }}</td>
        </tr>
        <tr>
            <th>Type</th>
            <td>{{ data_capsule.type }}</td>
        </tr>
        <tr>
            <th>Type Version</th>
            <td>{{ data_capsule.type_version }}</td>
        </tr>
        <tr>
            <th>Created At</th>
            <td>{{ data_capsule.created_at }}</td>
        </tr>
        <tr>
            <th>Chat Session ID</th>
            <td>
                <a href="{{ url_for('interaction_bp.view_chat_session', chat_session_id=data_capsule.chat_session_id) }}">
                    {{ data_capsule.chat_session_id }}
                </a>
            </td>
        </tr>
    </table>

    <!-- Chat Session Information Section -->
    <h4 class="mb-3 mt-4">Chat Sessie Informatie</h4>
    <table class="table table-bordered">
        <tr>
            <th>Session ID</th>
            <td>{{ chat_session.session_id }}</td>
        </tr>
        <tr>
            <th>Session Start</th>
            <td>{{ chat_session.session_start }}</td>
        </tr>
        <tr>
            <th>Session End</th>
            <td>{{ chat_session.session_end }}</td>
        </tr>
    </table>

    <!-- Configuration Data Section -->
    {% if data_capsule.configuration %}
    <h4 class="mb-3 mt-4">Configuratie</h4>
    <div id="configuration-viewer" class="json-viewer" style="height: 300px; width: 100%; border: 1px solid #dee2e6;"></div>
    <div id="configuration-viewer-data" class="d-none">{{ data_capsule.configuration | tojson(indent=2) }}</div>
    {% endif %}

    <!-- Capsule Data Section -->
    {% if data_capsule.data %}
    <h4 class="mb-3 mt-4">Data</h4>
    <div id="data-viewer" class="json-viewer" style="height: 300px; width: 100%; border: 1px solid #dee2e6;"></div>
    <div id="data-viewer-data" class="d-none">{{ data_capsule.data | tojson(indent=2) }}</div>
    {% endif %}

    <!-- Navigation Buttons -->
    <div class="mt-5 mb-4">
        <a href="{{ url_for('interaction_bp.eveai_data_capsules') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left"></i> Back to Data Capsules
        </a>
        <a href="{{ url_for('interaction_bp.view_chat_session', chat_session_id=data_capsule.chat_session_id) }}" class="btn btn-secondary">
            <i class="fas fa-comments"></i> View Chat Session
        </a>
    </div>
</div>

<!-- Initialize JSON Editor for the data fields -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Configuration JSON Editor if available
        if (document.getElementById('configuration-viewer')) {
            const configurationData = JSON.parse(document.getElementById('configuration-viewer-data').textContent);
            const configurationViewer = new JSONEditor(document.getElementById('configuration-viewer'), {
                mode: 'view',
                mainMenuBar: false,
                navigationBar: false,
                statusBar: false,
                readOnly: true,
                onChangeJSON: function() { /* read only */ }
            }, configurationData);
        }

        // Initialize Data JSON Editor if available
        if (document.getElementById('data-viewer')) {
            const capsuleData = JSON.parse(document.getElementById('data-viewer-data').textContent);
            const dataViewer = new JSONEditor(document.getElementById('data-viewer'), {
                mode: 'view',
                mainMenuBar: false,
                navigationBar: false,
                statusBar: false,
                readOnly: true,
                onChangeJSON: function() { /* read only */ }
            }, capsuleData);
        }
    });
</script>
{% endblock %}