{% extends "base.html" %}
{% block title %}{{ project_name }} - Annotation{% endblock %}
{% block content %}
<script>
    // Show spinner immediately
    const spinnerStyles = `
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .vf-loader {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    `;
    const styleElement = document.createElement('style');
    styleElement.textContent = spinnerStyles;
    document.head.appendChild(styleElement);
    const loadingOverlay = document.createElement('div');
    loadingOverlay.id = 'loading-overlay';
    loadingOverlay.className = 'loading-overlay';
    loadingOverlay.innerHTML = `
        <div class="vf-loader" id="vf-loader">
            <!-- Your spinner content here (dots, rings, etc.) -->
            <div class="dot dot-1"></div>
            <div class="dot dot-2"></div>
            <div class="dot dot-3"></div>
            <div class="dot dot-4"></div>
            <div class="dot dot-5"></div>
            <div class="dot dot-6"></div>
            <div class="dot dot-7"></div>
            <div class="dot dot-8"></div>
            <p style="color: white; margin-top: 20px;">Loading Project...</p>
        </div>
    `;
    document.body.appendChild(loadingOverlay);
</script>
<style>
    .avatar {
        width: 30px;
        height: 30px;
        background: linear-gradient(45deg, #007bff, #00c4ff);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin: 0 auto;
    }
    .image-status, .list-table td[data-annotated] {
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 4px;
        align-self: flex-start;
        margin-top: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .image-status[data-annotated="true"], .list-table td[data-annotated="true"] {
        background: rgba(76, 201, 240, 0.1);
        color: #4cc9f0;
    }
    .image-status[data-annotated="false"][data-preannotated="true"], .list-table td[data-annotated="false"][data-preannotated="true"] {
        background: rgba(139, 69, 19, 0.1);
        color: #8B4513;
    }
    .image-status[data-annotated="false"][data-preannotated="false"], .list-table td[data-annotated="false"][data-preannotated="false"] {
        background: rgba(255, 165, 0, 0.1);
        color: #e67e22;
    }
    .control-btn img {
        width: 2em;
        height: 2em;
        vertical-align: middle;
    }
    .save-options {
        margin-top: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    .save-options h3 {
        margin-bottom: 10px;
    }
    .radio-group {
        margin-bottom: 10px;
    }
    .radio-group input[type="radio"] {
        margin-right: 5px;
    }
    .radio-group label {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 5px;
    }
    #export-path-container, #dl-path-container {
        margin-top: 10px;
    }
    #export-path-input, #dl-path-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    small {
        display: block;
        color: #666;
        font-size: 0.9em;
        margin-top: 5px;
    }
    #export-warning {
        color: #ff9800;
        font-size: 0.875rem;
        margin: 8px 0;
        padding: 8px;
        background: rgba(255, 152, 0, 0.1);
        border-radius: 4px;
        border-left: 4px solid #ff9800;
        flex: 1;
        max-width: 70%;
    }
    .thumbnail-row[data-annotated="true"] {
        background: rgba(76, 201, 240, 0.5); 
    }

    .thumbnail-row[data-annotated="false"][data-preannotated="true"] {
        background: rgba(139, 69, 19, 0.5);
    }

    .thumbnail-row[data-annotated="false"][data-preannotated="false"] {
        background: rgba(255, 166, 0, 0.5);
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        left: 0;
        top: 100%;
        border-radius: 4px;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #eee;
    }

    .dropdown-content a:last-child {
        border-bottom: none;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    /* Make labeling area scrollable */
    .labeling-area {
        min-height: 100vh-50px; /* Minimum height to fill viewport - the top bar from the base_labeler.html */
        display: flex;
        flex-direction: column; /* Stack children vertically */
        overflow-y: auto; /* Allow scrolling if content overflows */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    .control-panel {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    max-height: 30vh; /* Adjust to fit within labeling-area; prevents overflow */
    width: 100%; /* Ensure it takes full available width */
}

/* Make class-selector scrollable and take 90% width */
.class-selector {
    width: 85%; /* 90% of control-panel width */
    max-height: 30vh; /* Constrain height to fit viewport; adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling for tags */
    overflow-x: hidden; /* Prevent horizontal overflow */
    display: flex;
    flex-direction: column;
}

#class-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    height: calc(3 * 2em); /* ~2 rows tall */
    overflow-y: auto;
}

.classes-left {
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    gap: 5px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
}

.classes-right {
    width: 20%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 100%;
    overflow-y: auto;
    background-color: #ddd;
}

.class-tag {
    position: relative;
    padding: 0px 5px 2px 2px;
    margin: 4px 0;
    border-radius: 4px;
    color: black;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: default;
    transition: opacity 0.2s ease;
    min-width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 30px;
}

.class-tag.selected {
    border: 2px solid black;
}

.approve-btn {
    width: 80px; 
    align-self: flex-start;
    padding: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    background-color: #4cc9f0;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.approve-btn:hover {
    background-color: #3aa8d0; /* Darker shade on hover */
}

    .class-tag:hover {
        opacity: 0.9; /* Subtle hover effect */
    }

    .add-btn, .remove-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: rgb(185, 185, 185);
        color: rgb(0, 0, 0);
        font-size: 14px;
        cursor: pointer;
        border: none;
        margin-left: 6px; /* space between text and button */
        flex-shrink: 0;
        position: static; /* ❌ remove absolute positioning */
        transform: none;  /* ❌ reset */
    }


    .add-btn:hover, .remove-btn:hover {
        background-color: rgba(255, 255, 255, 0.4); /* Brighter on hover */
    }

    .classes-right .class-tag {
        font-size: 1.1em; /* Slightly toned down from 1.2em for balance */
        font-weight: 600; /* Bolder for selected */
        padding: 8px 35px 8px 12px; /* Same padding for consistency */
    }
    
    .class-search {
        width: 5%; 
        display: flex;
        align-items: flex-start;
    }

    .class-search input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.875rem;
    }

    /* AI Preannotator Modal Styles */
    #ai-preannotator-modal .modal-content.ai-modal-content {
        max-width: 600px;
        width: 90%;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        padding: 40px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    #ai-preannotator-modal h2 {
        color: #2c3e50;
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 30px;
        text-align: center;
        letter-spacing: -0.5px;
    }

    #ai-preannotator-modal .form-group {
        margin-bottom: 25px;
    }

    #ai-preannotator-modal .form-group label {
        display: block;
        color: #34495e;
        font-weight: 500;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

    #ai-preannotator-modal .mode-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    #ai-preannotator-modal .mode-btn {
        flex: 1;
        padding: 12px 20px;
        background: white;
        border: 2px solid #e0e6ed;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
        color: #5a6c7d;
    }

    #ai-preannotator-modal .mode-btn.active,
    #ai-preannotator-modal .mode-btn:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    #ai-preannotator-modal select,
    #ai-preannotator-modal input[type="number"],
    #ai-preannotator-modal input[type="text"] {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e0e6ed;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
    }

    #ai-preannotator-modal select:focus,
    #ai-preannotator-modal input[type="number"]:focus,
    #ai-preannotator-modal input[type="text"]:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    #ai-preannotator-modal p {
        color: #7f8c8d;
        font-size: 0.9rem;
        margin-top: 6px;
        line-height: 1.4;
    }

    #ai-preannotator-modal .create-btn {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 10px;
    }

    #ai-preannotator-modal .create-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    }

    /* Custom Model Input with Dropdown */
    #custom-model-input-container {
        display: flex;
        gap: 10px;
        align-items: end;
    }

    #model-path-input {
        flex: 1;
    }

    #custom-model-dropdown {
        position: relative;
        min-width: 200px;
    }

    #custom-model-select {
        width: 100%;
        padding: 12px 40px 12px 16px;
        border: 2px solid #e0e6ed;
        border-radius: 12px;
        background: white url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"%3e%3cpolyline points="6,9 12,15 18,9"%3e%3c/polyline%3e%3c/svg%3e') no-repeat right 12px center;
        background-size: 16px;
        cursor: pointer;
        font-size: 1rem;
        appearance: none;
        transition: all 0.3s ease;
    }

    #custom-model-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    #custom-model-select option {
        padding: 10px;
        background: white;
        color: #34495e;
    }

    #custom-model-select option:hover {
        background: #f8f9fa;
    }

    /* Grouped optgroups for better UX */
    #custom-model-select optgroup {
        font-weight: 600;
        color: #5a6c7d;
        background: #f8f9fa;
    }

    #custom-model-select optgroup label {
        display: block;
        padding: 8px 10px;
        font-style: italic;
    }
</style>
    <!-- Grid View -->
    <div id="grid-view" class="view-container grid-view">
        <div class="grid-header">
            <div class="bulk-actions">
                <button class="grid-btn" id="select-all-btn" title="Select All">
                    <i class="fas fa-check-square"></i> Select All
                </button>
                <button class="grid-btn" id="download-btn" title="Download Unlabeled" disabled>
                    <i class="fas fa-download"></i> Download
                </button>
                <button class="grid-btn" id="delete-images-btn" title="Delete Selected" disabled>
                    <i class="fas fa-trash"></i> Delete
                </button>
                <button class="grid-btn" id="import-images-btn" title="Import More Images">
                    <i class="fas fa-upload"></i> Import
                </button>
                <button class="grid-btn" id="export-btn" title="Export Annotations">
                    <i class="fas fa-file-export"></i> Export
                </button>
            </div>
            <div class="grid-controls">
                <div class="dropdown">
                    <button id="sort-btn" class="layout-btn" title="Rearrange List">
                        <i class="fas fa-sort"></i> Sort
                    </button>
                    <div class="dropdown-content">
                        <a href="#" data-sort="name-asc">Name (A-Z)</a>
                        <a href="#" data-sort="name-desc">Name (Z-A)</a>
                        <a href="#" data-sort="date-asc">Date (Oldest First)</a>
                        <a href="#" data-sort="date-desc">Date (Newest First)</a>
                        <a href="#" data-sort="status-asc">Completion (Annotated First)</a>
                        <a href="#" data-sort="status-desc">Completion (Unannotated First)</a>
                    </div>
                </div>
                <button id="grid-toggle-btn" class="layout-btn active" title="Grid View" data-view="grid">
                    <i class="fas fa-th"></i> Grid
                </button>
                <button id="list-toggle-btn" class="layout-btn" title="List View" data-view="list">
                    <i class="fas fa-list"></i> List
                </button>
            </div>
            <button id="ai-preannotator-btn" class="layout-btn ai-preannotator-btn" title="AI Pre-annotator">
                <i class="fas fa-robot"></i> AI Pre-annotator
            </button>
            <button id="ai-blind-trust" class="layout-btn ai-blind-trust" title="Blind Trust">
                <i class="fa-solid fa-fingerprint"></i> Blind Trust
            </button>
            <button id="viewport-btn-grid" class="layout-btn" title="Switch to Viewport Mode">
                <i class="fas fa-desktop"></i> Annotate
            </button>
        </div>
        <div class="grid-content">
            <div id="grid-thumbnails" class="grid-thumbnails">
                {% for image in images %}
                    <div class="grid-card" 
                        data-id="{{ image.filename }}" 
                        data-image-id="{{ image.id }}" 
                        data-date="2023-01-01" 
                        data-annotated="{{ 'true' if image.annotated else 'false' }}" 
                        data-preannotated="{{ 'true' if image.preannotated else 'false' }}">
                        <div class="card-checkbox">
                            <input type="checkbox" class="image-checkbox" data-path="{{ image.url }}">
                        </div>
                        <div class="card-image-container">
                            <img data-src="{{ image.url }}" alt="Thumbnail" class="lazy-load">
                            {% if image.annotated %}
                                <span class="annotated-check"><i class="fas fa-check"></i></span>
                            {% endif %}
                        </div>
                        <div class="card-info">
                            <span class="image-id">{{ image.id }}</span>
                            <span class="image-date">{{ '2023-01-01' }}</span>
                            <span class="image-status" 
                                data-annotated="{{ 'true' if image.annotated else 'false' }}" 
                                data-preannotated="{{ 'true' if image.preannotated else 'false' }}">
                                {% if image.annotated %}
                                    Annotated
                                {% elif image.preannotated %}
                                    Pre-Annotated
                                {% else %}
                                    Not Annotated
                                {% endif %}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <table id="list-table" class="list-table" style="display: none;">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>ID</th>
                    <th>Preview</th>
                    <th>Date of Annotation</th>
                    <th>Completion</th>
                    <th>Annotator</th>
                </tr>
            </thead>
            <tbody>
                {% for image in images %}
                    <tr data-id="{{ image.filename }}" 
                        data-image-id="{{ image.id }}" 
                        data-date="2023-01-01" 
                        data-annotated="{{ 'true' if image.annotated else 'false' }}" 
                        data-preannotated="{{ 'true' if image.preannotated else 'false' }}" 
                        data-annotator="{% if image_annotators.get(image.url) %}{{ image_annotators[image.url] }}{% else %}null{% endif %}">
                        <td>
                            <input type="checkbox" class="image-checkbox" data-path="{{ image.url }}">
                        </td>
                        <td>{{ image.id }}</td>
                        <td class="thumbnail-cell">
                            <div class="list-thumbnail-container">
                                <img data-src="{{ image.url }}" alt="Thumbnail" class="lazy-load">
                            </div>
                        </td>
                        <td>{{ '2023-01-01' }}</td>
                        <td class="image-status" 
                            data-annotated="{{ 'true' if image.annotated else 'false' }}" 
                            data-preannotated="{{ 'true' if image.preannotated else 'false' }}">
                            {% if image.annotated %}
                                Annotated
                            {% elif image.preannotated %}
                                Pre-Annotated
                            {% else %}
                                    Not Annotated
                                {% endif %}
                        </td>
                        <td class="annotator-cell">
                            {% if image_annotators.get(image.url) %}
                                <div class="avatar">{{ image_annotators[image.url] }}</div>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- Annotation View -->
    <div id="annotation-view" class="view-container annotation-container hide">
        <div class="images-list">
            <div class="images-header">
                <div class="dropdown">
                    <button id="sort-btn-annotation" class="layout-btn" title="Rearrange List">
                        <i class="fas fa-sort"></i> Sort
                    </button>
                    <div class="dropdown-content">
                        <a href="#" data-sort="name-asc">Name (A-Z)</a>
                        <a href="#" data-sort="name-desc">Name (Z-A)</a>
                        <a href="#" data-sort="date-asc">Date (Oldest First)</a>
                        <a href="#" data-sort="date-desc">Date (Newest First)</a>
                        <a href="#" data-sort="status-asc">Completion (Annotated First)</a>
                        <a href="#" data-sort="status-desc">Completion (Unannotated First)</a>
                    </div>
                </div>
                <button id="viewport-btn-annotation" class="layout-btn" title="Switch to Grid View">
                    <i class="fas fa-th-large"></i> Grid View
                </button>
            </div>
            <div class="thumbnails">
                <table class="thumbnail-table">
                    <tbody>
                        {% for image in images %}
                            <tr class="thumbnail-row" 
                                data-index="{{ loop.index0 }}" 
                                data-id="{{ image.filename }}" 
                                data-image-id="{{ image.id }}" 
                                data-date="2023-01-01" 
                                data-annotated="{{ 'true' if image.annotated else 'false' }}" 
                                data-preannotated="{{ 'true' if image.preannotated else 'false' }}">
                                <td class="thumbnail-id">{{ image.id }}</td>
                                <td class="thumbnail-image">
                                    <img data-src="{{ image.url }}" alt="Thumbnail" class="lazy-load">
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="labeling-area">
            <div class="image-workspace">
                <div class="image-container">
                    <div class="image-info"></div>
                    <canvas id="labeling-canvas"></canvas>
                    <div class="shortcuts-sidebar">
                        <button class="shortcuts-toggle" title="Toggle Shortcuts">
                            <i class="fas fa-keyboard"></i> Shortcuts
                        </button>
                        <div class="shortcuts-content">
                            <div class="shortcuts-legend"></div>
                            <div class="shortcuts-list"></div>
                        </div>
                    </div>
                    <div class="canvas-controls">
                        {% if setup_type != 'Classification' %}
                        <button class="control-btn" id="rect-mode" title="Draw Rectangle"><img src="/static/img/logos/rect-mode.svg" alt="Draw Rectangle"></button>
                        <button class="control-btn" id="polygon-mode" title="Draw Polygon"><img src="/static/img/logos/polygon-mode.svg" alt="Draw Polygon"></button>
                        <button class="control-btn" id="magic-mode" title="One Click Annotation"><img src="/static/img/logos/magic-mode.svg" alt="One Click Annotation"></button>
                        <button class="control-btn" id="select-mode" title="Select Labels"><img src="/static/img/logos/select-mode.svg" alt="Select Labels"></button>
                        <button class="control-btn" id="undo-btn" title="Undo Last Action"><img src="/static/img/logos/undo-btn.svg" alt="Undo Last Action"></button>
                        <button class="control-btn" id="delete-btn" title="Delete Selected Annotation"><img src="/static/img/logos/delete-btn.svg" alt="Delete Selected Annotation"></button>
                        <button class="control-btn" id="duplicate-btn" title="Duplicate Selected Annotation"><img src="/static/img/logos/duplicate-btn.svg" alt="Duplicate Selected Annotation"></button>
                        <button class="control-btn" id="grid-btn" title="Toggle Grid"><img src="/static/img/logos/grid-btn.svg" alt="Toggle Grid"></button>
                        {% endif %}
                        <button class="control-btn" id="reset-view" title="Reset View"><img src="/static/img/logos/reset-view.svg" alt="Reset View"></button>
                        <button class="control-btn" id="zoom-in-btn" title="Zoom In"><img src="/static/img/logos/zoom-in-btn.svg" alt="Zoom In"></button>
                        <button class="control-btn" id="zoom-out-btn" title="Zoom Out"><img src="/static/img/logos/zoom-out-btn.svg" alt="Zoom Out"></button>
                        <button class="control-btn" id="save-btn" title="Save Annotations"><img src="/static/img/logos/save-btn.svg" alt="Save Annotations"></button>
                        <button class="control-btn" id="prev-image-btn" title="Previous Image"><img src="/static/img/logos/prev-image-btn.svg" alt="Previous Image"></button>
                        <button class="control-btn" id="next-image-btn" title="Next Image"><img src="/static/img/logos/next-image-btn.svg" alt="Next Image"></button>
                    </div>
                </div>
                {% if setup_type != 'Classification' %}
                <div class="ai-options">
                    <button id="hide-prediction-btn">Hide Pred.</button>
                    <div class="confidence-slider">
                        <label for="confidence-slider">Conf.: <span id="confidence-value">0.4</span></label>
                        <input type="range" id="confidence-slider" min="0" max="1" step="0.01" value="0.4" style="-webkit-appearance: slider-vertical; writing-mode: bt-lr; width: 8px; height: 100%;">
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="control-panel">
                <div class="class-search">
                    <input type="text" id="class-search-input" placeholder="Search classes...">
                </div>
                <div class="class-selector">
                    <div id="class-tags-container"></div>
                </div>
                <button class="approve-btn" id="approve-btn">Approve</button>
            </div>
        </div>
    </div>
    <!-- Modals -->
    <div id="save-modal" class="modal">
        <div class="modal-content">
            <div class="save-icon">
                <svg class="checkmark" viewBox="0 0 52 52">
                    <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                    <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                </svg>
            </div>
            <p class="save-message">Annotations saved successfully!</p>
        </div>
    </div>
    <div class="modal" id="import-images-modal">
        <div class="modal-content">
            <button class="close-btn import-close-btn">×</button>
            <h2 class="modal-title">Import More Images</h2>
            <form id="import-images-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="import-label">Import Images for <span class="project-name-highlight">{{ project_name }}</span></label>
                    <div class="drop-zone" id="import-images-drop-zone">
                        <i class="fa-solid fa-file-arrow-down drop-icon"></i>
                        <p>Drag and drop images/folders/archives here.</p>
                        <p><strong>Accepted file formats:</strong></p>
                        <p>Image: .webp, .jpg, .jpeg, .png, .avif</p>
                        <p>Compressed file with images: .zip, .tar, .rar</p>
                        <p>Folder of images</p>
                        <p id="import-images-compress-message" class="compress-message" style="display: none;">Compressed file detected! It will be extracted on submission.</p>
                    </div>
                    <input type="file" id="import-images-file-input" name="files" multiple
                        accept=".webp,.WEBP,.jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.avif,.AVIF,.zip,.ZIP,.tar,.TAR,.rar,.RAR"
                        style="display: none;" webkitdirectory directory>
                    <div id="import-images-file-list" class="file-list" style="display: none; max-height: 200px; overflow-y: auto; margin-top: 10px;"></div>
                </div>
                <div id="import-images-progress-container" style="margin-top: 10px;"></div>
                <button type="submit" class="create-btn" disabled>Import Files</button>
            </form>
        </div>
    </div>
    <div class="modal" id="download-modal">
        <div class="modal-content">
            <button class="close-btn">×</button>
            <h2 class="modal-title">Download Options</h2>
            <p class="modal-subtitle">Choose how to download the selected images.</p>
            <div class="download-options">
                <div class="radio-group">
                    <input type="radio" id="download-direct" name="dl_option" value="direct" checked>
                    <label for="download-direct">Download ZIP file to browser</label>
                    <input type="radio" id="download-path" name="dl_option" value="path">
                    <label for="download-path">Save ZIP file to local path (Cloud users)</label>
                </div>
                <div id="dl-path-container" style="display: none;">
                    <label for="dl-path-input">Absolute folder path:</label>
                    <input type="text" id="dl-path-input" placeholder="/absolute/path/to/save/folder">
                    <small>If folder does not exist, it will be created. Please do not enter root priviliged paths.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button class="cancel-btn" id="cancel-download">Cancel</button>
                <button class="download-btn" id="confirm-download">Confirm Download</button>
            </div>
        </div>
    </div>
    <div class="modal" id="delete-images-confirm-modal">
        <div class="modal-content danger-modal">
            <div class="modal-header danger-header">
                <div class="header-content">
                    <i class="fas fa-exclamation-triangle danger-icon"></i>
                    <h2>Confirm Image Deletion</h2>
                </div>
                <button class="close-btn" id="cancel-delete-images" title="Close">×</button>
            </div>
            <div class="modal-body">
                <p id="delete-images-message">Are you sure you want to delete the selected images? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button class="cancel-btn" id="cancel-delete-images-footer">Cancel</button>
                <button class="delete-btn" id="confirm-delete-images">Delete</button>
            </div>
        </div>
    </div>
    <div class="modal" id="export-modal">
        <div class="modal-content export-modal-content">
            <button class="close-btn export-close-btn">×</button>
            <div class="export-tabs">
                <!-- Tab Navigation -->
                <div class="tab-nav">
                    <button class="tab-link active" data-tab="format-tab">Format</button>
                    <button class="tab-link" data-tab="split-tab">Split Configuration</button>
                </div>
              
                <!-- Format Selection Tab -->
                <div id="format-tab" class="tab-content active">
                    <h2 class="modal-title">Export Annotations</h2>
                    <p class="modal-subtitle">Select an export format for your annotated images.</p>
                    <div class="format-options">
                        {% if setup_type in ("Bounding Box", "Segmentation") %}
                        <div class="format-card" data-format="COCO">
                            <img src="/static/img/coco_logo.png" alt="COCO Format">
                            <h3>COCO</h3>
                            <p>JSON file with images, ideal for object detection and segmentation.</p>
                        </div>
                        <div class="format-card" data-format="PASCAL_VOC">
                            <img src="/static/img/pascal_voc_logo.png" alt="Pascal VOC Format">
                            <h3>Pascal VOC</h3>
                            <p>XML files with images, widely used for object detection.</p>
                        </div>
                        {% endif %}
                        {% if setup_type == "Segmentation" %}
                        <div class="format-card" data-format="MASK">
                            <img src="/static/img/mask_logo.gif" alt="Pascal VOC Format">
                            <h4>MASK PNG</h4>
                            <p>PNG mask files with images, for semantic segmentation.</p>
                        </div>
                        {% endif %}
                        {% if setup_type != 'Classification' %}
                        <div class="format-card" data-format="YOLO">
                            <img src="/static/img/yolo_logo.png" alt="YOLO Format">
                            <h3>YOLO</h3>
                            <p>YAML and TXT files with images, optimized for YOLO models.</p>
                        </div>
                        {% endif %}
                        <div class="format-card" data-format="CSV">
                            <img src="/static/img/csv_logo.png" alt="CSV Format">
                            <h3>CSV</h3>
                            <p>Tabular data with images, great for custom analysis.</p>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: flex; align-items: center; justify-content: space-between;">
                        <div id="export-warning" style="display: none;"></div>
                        <button class="cancel-btn" id="cancel-export">Cancel</button>
                        <button class="next-btn" id="next-export-button">Next</button>
                    </div>
                </div>
              
                <!-- Split Configuration Tab -->
                <div id="split-tab" class="tab-content">
                    <h2 class="modal-title">Dataset Split Configuration</h2>
                    <p class="modal-subtitle">Configure how to split your dataset between train, test, and validation sets.</p>
                  
                    <div class="split-options">
                        <div class="split-toggle">
                            <label class="switch">
                                <input type="checkbox" id="enable-splitting" checked>
                                <span class="slider round"></span>
                            </label>
                            <span>Enable Dataset Splitting</span>
                        </div>
                      
                        <div class="split-selection">
                            <div class="split-choice">
                                <input type="checkbox" id="train-split" name="split" value="train" checked disabled>
                                <label for="train-split">Train</label>
                            </div>
                            <div class="split-choice">
                                <input type="checkbox" id="test-split" name="split" value="test">
                                <label for="test-split">Test</label>
                            </div>
                            <div class="split-choice">
                                <input type="checkbox" id="val-split" name="split" value="val">
                                <label for="val-split">Validation</label>
                            </div>
                        </div>
                      
                        <div class="split-ratios">
                            <div class="ratio-control" data-split="train">
                                <label for="train-ratio">Train:</label>
                                <input type="range" id="train-ratio" min="0" max="100" value="70" step="5">
                                <input type="number" id="train-ratio-value" min="0" max="100" value="70">
                                <span>%</span>
                            </div>
                            <div class="ratio-control" data-split="test" style="display: none;">
                                <label for="test-ratio">Test:</label>
                                <input type="range" id="test-ratio" min="0" max="100" value="15" step="5">
                                <input type="number" id="test-ratio-value" min="0" max="100" value="15">
                                <span>%</span>
                            </div>
                            <div class="ratio-control" data-split="val" style="display: none;">
                                <label for="val-ratio">Validation:</label>
                                <input type="range" id="val-ratio" min="0" max="100" value="15" step="5">
                                <input type="number" id="val-ratio-value" min="0" max="100" value="15">
                                <span>%</span>
                            </div>
                        </div>
                      
                        <div class="ratio-summary">
                            <div class="ratio-total">
                                <strong>Total:</strong>
                                <span id="ratio-total-value">100</span>
                                <span>%</span>
                            </div>
                            <div class="ratio-error" id="ratio-error" style="display: none;">
                                <i class="fas fa-exclamation-circle"></i>
                                <span>Ratios must sum to 100%</span>
                            </div>
                        </div>
                        <div class="save-options">
                            <h3>Save Options</h3>
                            <div class="radio-group">
                                <input type="radio" id="export-download" name="export_option" value="download" checked>
                                <label for="export-download">Download ZIP file to browser</label>
                                <input type="radio" id="export-path" name="export_option" value="path">
                                <label for="export-path">Save ZIP file to local path (Cloud users)</label>
                            </div>
                            <div id="export-path-container" style="display: none;">
                                <label for="export-path-input">Absolute folder path:</label>
                                <input type="text" id="export-path-input" placeholder="/absolute/path/to/export/folder">
                                <small>If folder does not exist, it will be created. Please do not enter root priviliged paths.</small>
                            </div>
                        </div>
                    </div>
                  
                    <div class="modal-footer">
                        <button class="back-btn" id="back-export-button">Back</button>
                        <button class="export-btn" id="confirm-export" disabled>Export</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="ai-preannotator-modal">
        <div class="modal-content ai-modal-content">
            <button class="close-btn">×</button>
            <h2>AI Pre-annotator Configuration</h2>
            <form id="ai-preannotator-form">
                <div class="form-group">
                    <label>Annotation Mode</label>
                    <div class="mode-buttons">
                        {% if setup_type == 'Classification' %}
                        <button type="button" class="mode-btn active" data-mode="clip">CLIP Zero-shot Classification</button>
                        {% else %}
                        <button type="button" class="mode-btn active" data-mode="zero-shot">Zero-shot Detection</button>
                        <button type="button" class="mode-btn" data-mode="custom-model">Ultralytics Model</button>
                        {% endif %}
                    </div>
                    <input type="hidden" id="mode" name="mode" value="{% if setup_type == 'Classification' %}clip{% else %}zero-shot{% endif %}">
                </div>
                {% if setup_type != 'Classification' %}
                <div id="zero-shot-options" class="form-group">
                    <label>Grounding Dino Model</label>
                    <select id="dino-model">
                        <optgroup label="Grounding Dino">
                            <option value="tiny">Tiny</option>
                            <option value="base">Base</option>
                        </optgroup>
                    </select>
                </div>
                {% endif %}
                <div id="custom-model-path" class="form-group" style="display: none;">
                    <label>Model Path</label>
                    <div id="custom-model-input-container">
                        <input type="text" id="model-path-input" name="model_path" placeholder="Enter absolute path to .pt model">
                        <div id="custom-model-dropdown">
                            <select id="custom-model-select">
                                <option value="">Select Preset Model</option>
                                <optgroup label="YOLOv5">
                                    <option value="yolov5nu.pt">YOLOv5 Nano</option>
                                    <option value="yolov5su.pt">YOLOv5 Small</option>
                                    <option value="yolov5mu.pt">YOLOv5 Medium</option>
                                    <option value="yolov5lu.pt">YOLOv5 Large</option>
                                    <option value="yolov5xu.pt">YOLOv5 Extra Large</option>
                                    <option value="yolov5n6u.pt">YOLOv5 Nano v6</option>
                                    <option value="yolov5s6u.pt">YOLOv5 Small v6</option>
                                    <option value="yolov5m6u.pt">YOLOv5 Medium v6</option>
                                    <option value="yolov5l6u.pt">YOLOv5 Large v6</option>
                                    <option value="yolov5x6u.pt">YOLOv5 Extra Large v6</option>
                                </optgroup>
                                <optgroup label="YOLOv8">
                                    <option value="yolov8n.pt">YOLOv8 Nano</option>
                                    <option value="yolov8s.pt">YOLOv8 Small</option>
                                    <option value="yolov8m.pt">YOLOv8 Medium</option>
                                    <option value="yolov8l.pt">YOLOv8 Large</option>
                                    <option value="yolov8x.pt">YOLOv8 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv9">
                                    <option value="yolov9t.pt">YOLOv9 Tiny</option>
                                    <option value="yolov9s.pt">YOLOv9 Small</option>
                                    <option value="yolov9m.pt">YOLOv9 Medium</option>
                                    <option value="yolov9c.pt">YOLOv9 Compact</option>
                                    <option value="yolov9e.pt">YOLOv9 Extended</option>
                                </optgroup>
                                <optgroup label="YOLOv10">
                                    <option value="yolov10n.pt">YOLOv10 Nano</option>
                                    <option value="yolov10s.pt">YOLOv10 Small</option>
                                    <option value="yolov10m.pt">YOLOv10 Medium</option>
                                    <option value="yolov10b.pt">YOLOv10 Base</option>
                                    <option value="yolov10l.pt">YOLOv10 Large</option>
                                    <option value="yolov10x.pt">YOLOv10 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv11">
                                    <option value="yolo11n.pt">YOLOv11 Nano</option>
                                    <option value="yolo11s.pt">YOLOv11 Small</option>
                                    <option value="yolo11m.pt">YOLOv11 Medium</option>
                                    <option value="yolo11l.pt">YOLOv11 Large</option>
                                    <option value="yolo11x.pt">YOLOv11 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv12">
                                    <option value="yolo12n.pt">YOLOv12 Nano</option>
                                    <option value="yolo12s.pt">YOLOv12 Small</option>
                                    <option value="yolo12m.pt">YOLOv12 Medium</option>
                                    <option value="yolo12l.pt">YOLOv12 Large</option>
                                    <option value="yolo12x.pt">YOLOv12 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLO Segmentation">
                                    <option value="yolo8n-seg.pt">YOLOv8 Nano Seg</option>
                                    <option value="yolo8s-seg.pt">YOLOv8 Small Seg</option>
                                    <option value="yolo8m-seg.pt">YOLOv8 Medium Seg</option>
                                    <option value="yolo8l-seg.pt">YOLOv8 Large Seg</option>
                                    <option value="yolo8x-seg.pt">YOLOv8 Extra Large Seg</option>
                                    <option value="yolo11n-seg.pt">YOLOv11 Nano Seg</option>
                                    <option value="yolo11s-seg.pt">YOLOv11 Small Seg</option>
                                    <option value="yolo11m-seg.pt">YOLOv11 Medium Seg</option>
                                    <option value="yolo11l-seg.pt">YOLOv11 Large Seg</option>
                                    <option value="yolo11x-seg.pt">YOLOv11 Extra Large Seg</option>
                                    <option value="yolo12n-seg.pt">YOLOv12 Nano Seg</option>
                                    <option value="yolo12s-seg.pt">YOLOv12 Small Seg</option>
                                    <option value="yolo12m-seg.pt">YOLOv12 Medium Seg</option>
                                    <option value="yolo12l-seg.pt">YOLOv12 Large Seg</option>
                                    <option value="yolo12x-seg.pt">YOLOv12 Extra Large Seg</option>
                                </optgroup>
                                                                <optgroup label="YOLOv5">
                                    <option value="yolov5nu.pt">YOLOv5 Nano</option>
                                    <option value="yolov5su.pt">YOLOv5 Small</option>
                                    <option value="yolov5mu.pt">YOLOv5 Medium</option>
                                    <option value="yolov5lu.pt">YOLOv5 Large</option>
                                    <option value="yolov5xu.pt">YOLOv5 Extra Large</option>
                                    <option value="yolov5n6u.pt">YOLOv5 Nano v6</option>
                                    <option value="yolov5s6u.pt">YOLOv5 Small v6</option>
                                    <option value="yolov5m6u.pt">YOLOv5 Medium v6</option>
                                    <option value="yolov5l6u.pt">YOLOv5 Large v6</option>
                                    <option value="yolov5x6u.pt">YOLOv5 Extra Large v6</option>
                                </optgroup>
                                <optgroup label="YOLOv8">
                                    <option value="yolov8n.pt">YOLOv8 Nano</option>
                                    <option value="yolov8s.pt">YOLOv8 Small</option>
                                    <option value="yolov8m.pt">YOLOv8 Medium</option>
                                    <option value="yolov8l.pt">YOLOv8 Large</option>
                                    <option value="yolov8x.pt">YOLOv8 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv9">
                                    <option value="yolov9t.pt">YOLOv9 Tiny</option>
                                    <option value="yolov9s.pt">YOLOv9 Small</option>
                                    <option value="yolov9m.pt">YOLOv9 Medium</option>
                                    <option value="yolov9c.pt">YOLOv9 Compact</option>
                                    <option value="yolov9e.pt">YOLOv9 Extended</option>
                                </optgroup>
                                <optgroup label="YOLOv10">
                                    <option value="yolov10n.pt">YOLOv10 Nano</option>
                                    <option value="yolov10s.pt">YOLOv10 Small</option>
                                    <option value="yolov10m.pt">YOLOv10 Medium</option>
                                    <option value="yolov10b.pt">YOLOv10 Base</option>
                                    <option value="yolov10l.pt">YOLOv10 Large</option>
                                    <option value="yolov10x.pt">YOLOv10 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv11">
                                    <option value="yolo11n.pt">YOLOv11 Nano</option>
                                    <option value="yolo11s.pt">YOLOv11 Small</option>
                                    <option value="yolo11m.pt">YOLOv11 Medium</option>
                                    <option value="yolo11l.pt">YOLOv11 Large</option>
                                    <option value="yolo11x.pt">YOLOv11 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLOv12">
                                    <option value="yolo12n.pt">YOLOv12 Nano</option>
                                    <option value="yolo12s.pt">YOLOv12 Small</option>
                                    <option value="yolo12m.pt">YOLOv12 Medium</option>
                                    <option value="yolo12l.pt">YOLOv12 Large</option>
                                    <option value="yolo12x.pt">YOLOv12 Extra Large</option>
                                </optgroup>
                                <optgroup label="YOLO Segmentation">
                                    <option value="yolo8n-seg.pt">YOLOv8 Nano Seg</option>
                                    <option value="yolo8s-seg.pt">YOLOv8 Small Seg</option>
                                    <option value="yolo8m-seg.pt">YOLOv8 Medium Seg</option>
                                    <option value="yolo8l-seg.pt">YOLOv8 Large Seg</option>
                                    <option value="yolo8x-seg.pt">YOLOv8 Extra Large Seg</option>
                                    <option value="yolo11n-seg.pt">YOLOv11 Nano Seg</option>
                                    <option value="yolo11s-seg.pt">YOLOv11 Small Seg</option>
                                    <option value="yolo11m-seg.pt">YOLOv11 Medium Seg</option>
                                    <option value="yolo11l-seg.pt">YOLOv11 Large Seg</option>
                                    <option value="yolo11x-seg.pt">YOLOv11 Extra Large Seg</option>
                                    <option value="yolo12n-seg.pt">YOLOv12 Nano Seg</option>
                                    <option value="yolo12s-seg.pt">YOLOv12 Small Seg</option>
                                    <option value="yolo12m-seg.pt">YOLOv12 Medium Seg</option>
                                    <option value="yolo12l-seg.pt">YOLOv12 Large Seg</option>
                                    <option value="yolo12x-seg.pt">YOLOv12 Extra Large Seg</option>
                                </optgroup>
                                <optgroup label="YOLO-World">
                                    <option value="yolov8s-world.pt">YOLOv8 Small World</option>
                                    <option value="yolov8m-world.pt">YOLOv8 Medium World</option>
                                    <option value="yolov8l-world.pt">YOLOv8 Large World</option>
                                    <option value="yolov8x-world.pt">YOLOv8 Extra Large World</option>
                                </optgroup>
                                <optgroup label="YOLO-World v2">
                                    <option value="yolov8s-worldv2.pt">YOLOv8 Small World v2</option>
                                    <option value="yolov8m-worldv2.pt">YOLOv8 Medium World v2</option>
                                    <option value="yolov8l-worldv2.pt">YOLOv8 Large World v2</option>
                                    <option value="yolov8x-worldv2.pt">YOLOv8 Extra Large World v2</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <p>Leave empty to use default YOLOv10x. Select a preset to auto-fill the path.</p>
                </div>
                <div class="form-group">
                    <label>Processing Unit</label>
                    <select id="processing-unit">
                        <option value="cpu">CPU</option>
                        <option value="cuda">GPU</option>
                    </select>
                    <p id="cpu-warning" style="display: none; color: orange;">Warning: CPU processing may take longer.</p>
                </div>
                <div class="form-group">
                    <label>Box Threshold</label>
                    <input type="number" id="box-threshold" name="box_threshold" min="0" max="1" step="0.01" value="0.2">
                    <p>Adjust detection sensitivity (0 to 1)</p>
                </div>
                <button type="submit" class="create-btn">Apply</button>
            </form>
        </div>
    </div>
    <div class="modal" id="blind-trust-modal">
        <div class="modal-content ai-modal-content">
            <button class="close-btn">×</button>
            <h2>Blind Trust Configuration</h2>
            <form id="blind-trust-form">
                <div class="form-group">
                    <label>Confidence Threshold</label>
                    <input type="number" id="confidence-threshold" name="confidence_threshold" min="0" max="1" step="0.01" value="0.5">
                    <p>Minimum confidence for pre-annotations to be accepted as official annotations (0 to 1)</p>
                </div>
                <button type="submit" class="create-btn">Apply</button>
            </form>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/setup.css">
    <script id="app-config" type="application/json" data-current-user-avatar="{{ current_user_avatar }}">
        {
            "setupType": "{{ setup_type }}",
            "projectName": "{{ project_name }}",
            "classes": {{ classes|tojson }}
        }
    </script>
    <script>
        console.log('app-config content:', document.getElementById('app-config').textContent);
    </script>
    <script type="module" src="/static/js/main.js"></script>
{% endblock %}