{% extends "scitex_sdk/app/app_shell.html" %}

{% load static scitex_project_picker %}

{% block title %}
    SciTeX Clew
    {% if current_project %}- {{ current_project.name }}{% endif %}
{% endblock %}
{% block extra_css %}
    <!-- Shared shell assets are owned by scitex_sdk.ui -->
    <!-- Clew specific styles -->
    <link rel="stylesheet" href="{% static 'clew_app/css/clew.css' %}" />
{% endblock %}
{% block scitex_app_content %}
    <div id="workspace-project-config" data-project-ref="{{ clew_project_id }}" data-mode="clew"></div>
    <div data-clew-config data-mount="{{ stx_mount }}"></div>
    <header class="clew-app-header">
        <h1>Clew <small>v{{ clew_version }}</small></h1>
        {% scitex_project_picker scope="project" current=clew_project_id %}
        <form id="clew-file-form">
            <label for="clew-file-path">Project file</label>
            <input id="clew-file-path" name="path" placeholder="output/figure.png" autocomplete="off">
            <button type="submit">Trace</button>
        </form>
    </header>
    {% if clew_project_error %}<p class="clew-project-message" role="status">{{ clew_project_error }}. Choose a project to inspect its records.</p>{% endif %}
    <div class="clew-workspace"
         data-ai-hint="Clew workspace: pipeline DAG editor, verification chain visualization, dependency tracking">
        <!-- CENTER - DAG VISUALIZATION WORKSPACE -->
        <main class="clew-main"
              data-ai-hint="DAG visualization area: displays verification chain as directed acyclic graph">
            <div class="pane-header" data-pane-type="module">
                <nav class="clew-tabs" id="clewModeSelector">
                    <button class="clew-tab active"
                            data-mode="project"
                            title="Full pipeline DAG — shows all tracked runs and their dependencies">
                        <i class="fas fa-diagram-project"></i> Project
                    </button>
                    <button class="clew-tab"
                            data-mode="file"
                            title="File trace — drop or select a file to trace its dependency chain back to source data">
                        <i class="fas fa-file-code"></i> File(s)
                    </button>
                    <button class="clew-tab"
                            data-mode="claims"
                            title="Claims — link manuscript assertions to the scripts that produced them">
                        <i class="fas fa-list-check"></i> Claims
                    </button>
                </nav>
                <div class="pane-header-actions"></div>
            </div>
            <div id="clewModeInfo" class="clew-mode-info"></div>
            <div class="dag-visualization-area">
                <div class="dag-placeholder">
                    <img src="{% static 'clew_app/clew-icon.svg' %}"
                         alt="Clew"
                         class="dag-placeholder-icon" />
                    <h3>DAG Visualization</h3>
                    <p>Verification chain will appear here</p>
                    <p class="text-muted">
                        Trace manuscript claims back to recorded data and analysis
                    </p>
                </div>
            </div>
        </main>
        <!-- Details resizer (auto-initialized via data attributes) -->
        <div class="panel-resizer"
             id="details-resizer"
             data-panel-resizer
             data-storage-prefix="scitex-clew-"
             data-target=".clew-details"
             data-direction="right"
             data-min-width="48"
             data-default-width="280"
             data-storage-key="details-width"
             data-collapse-key="clew-details-collapsed"
             data-toggle-btn="details-toggle"></div>
        <!-- RIGHT SIDEBAR - DETAILS -->
        <aside class="clew-details collapsible-panel" id="clew-details">
            <div class="details-header">
                <button class="details-toggle panel-toggle-btn right-panel-toggle"
                        id="details-toggle"
                        title="Toggle details (Ctrl+Shift+D)">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <span class="panel-title">
                    <i class="fas fa-sliders-h"></i> Details
                </span>
            </div>
            <div class="details-content" id="clew-details-content">
                <div class="details-placeholder">
                    <i class="fas fa-info-circle"></i>
                    <p>Select a node to view verification details</p>
                </div>
            </div>
        </aside>
    </div>
{% endblock %}
{% block extra_js %}
    <script type="module" src="{% static 'clew_app/js/clew-init.js' %}"></script>
{% endblock %}