{% load static %}
{% firstof STATIC_CACHE_KEY VERSION "" as asset_version %}
<link rel="stylesheet" href="{% static 'progressmonitor/monitor.css' %}?v={{ asset_version|urlencode }}">
<div id="progress-monitor" class="{% if not progress_auto_expand %}collapsed{% endif %}"
     data-progress-endpoint="{{ progress_endpoint|default:'/progress.json' }}"
     data-progress-scope="{{ progress_scope|default:'global' }}"
     data-auto-expand="{% if progress_auto_expand %}1{% else %}0{% endif %}">
    <div class="header-bar">
        <div class="header-left">
            <div class="orchestrator-status">
                <span class="status-dot stopped" id="orchestrator-dot"></span>
                <span id="orchestrator-text">Runner stopped</span>
                <span class="pid-label compact" id="orchestrator-pid" style="display:none;"></span>
            </div>
            <div class="stats">
                <div class="stat">
                    <span class="stat-label">Crawls</span>
                    <span class="stat-value compact info"><span id="crawls-active-segment"><span id="crawls-active">0</span> active · </span><span id="crawls-queued">0</span> queued</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Snapshots</span>
                    <span class="stat-value compact info"><span id="snapshots-active-segment"><span id="snapshots-active">0</span> active · </span><span id="snapshots-queued">0</span> queued</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Downloads</span>
                    <span class="stat-value compact warning"><span id="downloads-active-segment"><span id="downloads-active">0</span> active · </span><span id="downloads-queued">0</span> queued</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Indexing</span>
                    <span class="stat-value compact success"><span id="indexing-active-segment"><span id="indexing-active">0</span> active · </span><span id="indexing-queued">0</span> queued</span>
                </div>
            </div>
        </div>
        <div class="header-right">
            <button class="toggle-btn" id="progress-collapse" title="Toggle details" aria-expanded="{% if progress_auto_expand %}true{% else %}false{% endif %}">
                {% if progress_auto_expand %}Hide{% else %}Details{% endif %}
            </button>
        </div>
    </div>

    <div class="progress-content">
        <div class="tree-container" id="tree-container">
            <div class="idle-message" id="idle-message">No active crawls</div>
            <div id="crawl-tree"></div>
        </div>
        <aside class="screencast-panel" id="screencast-panel" aria-label="Live browser screencast"></aside>
    </div>
</div>
<script src="{% static 'progressmonitor/monitor.js' %}?v={{ asset_version|urlencode }}"></script>