{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/deepsearch.css') }}">
{% endblock %}

{% block content %}
<div class="ds-session" data-deepsearch-session data-uid="{{ uid }}"
     {% if chat_ws_url %}data-chat-ws="{{ chat_ws_url }}"{% endif %}>
    <div class="ds-session-main">
        <header class="ds-session-head">
            <h1>{{ query }}</h1>
            <div class="ds-metrics" role="group" aria-label="Research metrics">
                <span class="ds-metric"><strong>{{ score }}</strong> score</span>
                <span class="ds-metric"><strong>{{ confidence }}</strong> confidence</span>
                <span class="ds-metric"><strong>{{ source_diversity }}</strong> diversity</span>
                <span class="ds-metric"><strong>{{ page_count }}</strong> sources</span>
                <span class="ds-metric"><strong>{{ chunk_count }}</strong> chunks</span>
            </div>
            {% if export_md_url %}
            <div class="ds-exports">
                <a class="btn ds-export" href="{{ export_md_url }}">Markdown</a>
                <a class="btn ds-export" href="{{ export_json_url }}">JSON</a>
                <a class="btn ds-export" href="{{ export_pdf_url }}">PDF</a>
            </div>
            {% endif %}
        </header>

        {% if summary %}
        <section class="ds-card">
            <h2>Summary</h2>
            <div class="ds-summary rendered-content">{{ render_content(summary) }}</div>
        </section>
        {% endif %}

        {% if findings %}
        <section class="ds-card">
            <h2>Findings</h2>
            <div class="ds-findings">
                {% for finding in findings %}
                <details class="ds-finding" open>
                    <summary>
                        <span class="ds-finding-title">{{ finding.title }}</span>
                        <span class="ds-finding-confidence">{{ finding.confidence }}</span>
                    </summary>
                    <div class="ds-finding-detail">{{ finding.detail }}</div>
                </details>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% if gaps %}
        <section class="ds-card">
            <h2>Open gaps</h2>
            <ul class="ds-gaps">
                {% for gap in gaps %}
                <li>{{ gap }}</li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if sources %}
        <section class="ds-card">
            <h2>Sources</h2>
            <ol class="ds-sources">
                {% for source in sources %}
                <li>
                    <a href="{{ source.url }}" target="_blank" rel="noopener nofollow">{{ source.title or source.url }}</a>
                    <span class="ds-source-tag">{{ source.source }}</span>
                </li>
                {% endfor %}
            </ol>
        </section>
        {% endif %}
    </div>

    <aside class="ds-chat-pane" aria-label="Ask the research">
        <div class="ds-chat-head" role="heading" aria-level="2">Ask the research</div>
        {% if chat_ws_url %}
        <dp-deepsearch-chat uid="{{ uid }}" chat-ws="{{ chat_ws_url }}"></dp-deepsearch-chat>
        {% else %}
        <p class="ds-chat-pending">Chat opens once the research finishes.</p>
        {% endif %}
    </aside>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    import "{{ static_url('/static/js/components/AppDeepsearchChat.js') }}";
</script>
{% endblock %}