{% extends "base.html" %}

{% block title %}Research in Progress - Deep Research System{% endblock %}

{% block content %}
<div class="ldr-page active" id="research-progress">
    <div class="ldr-page-header" id="research-progress-header">
        <h1>Research in Progress</h1>
    </div>
    <div class="ldr-card" id="research-progress-card">
        <div class="ldr-card-content">
            <div class="ldr-progress-info">
                <div class="ldr-current-query-container">
                    <div class="ldr-current-query-label">Current Query:</div>
                    <div id="current-query" class="ldr-current-query"></div>
                </div>
                <div class="ldr-progress-container">
                    <div class="ldr-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Research progress">
                        <div id="progress-bar" class="ldr-progress-fill"></div>
                    </div>
                    <div id="progress-percentage" class="ldr-progress-percentage" aria-hidden="true">0%</div>
                </div>
                <div class="ldr-status-container">
                    <div class="ldr-status-label">Status:</div>
                    <div id="status-text" class="ldr-status-indicator" aria-live="polite" aria-atomic="true">Initializing</div>
                </div>
                <div class="ldr-task-container">
                    <div class="ldr-task-label">Current Task:</div>
                    <div id="current-task" class="ldr-task-text">Starting research...</div>
                </div>

                <!-- Agent Thinking Panel - Shows ReAct reasoning for MCP strategy -->
                <div id="agent-thinking-panel" class="ldr-agent-thinking-panel" style="display: none;">
                    <div class="ldr-agent-thinking-header">
                        <i aria-hidden="true" class="fas fa-brain"></i> Agent Reasoning
                    </div>
                    <div id="agent-thinking-content" class="ldr-agent-thinking-content">
                        <!-- ReAct steps will be added here -->
                    </div>
                </div>
                <div class="ldr-progress-actions">
                    <button id="cancel-research-btn" class="btn ldr-btn-outline ldr-terminate-btn">
                        <i aria-hidden="true" class="fas fa-stop-circle"></i> Cancel Research
                    </button>
                    <a id="view-results-btn" class="btn btn-primary" style="display: none;">
                        <i aria-hidden="true" class="fas fa-eye"></i> View Results
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% include "components/log_panel.html" %}
</div>
{% endblock %}

{% block page_scripts %}
<!-- formatting.js, api.js, socket.js already loaded by base.html -->
<script defer src="/static/js/services/audio.js"></script>
<script defer src="/static/js/components/progress.js"></script>
{% endblock %}
