{% extends "base.html" %}

{% block title %}Upload - {{ mode|title }} Analysis{% endblock %}

{% block content %}
<div class="container">
    <div class="upload-section">
        <h2 class="page-title">
            {% if mode == 'fundus' %}
                👁️ Fundus Image Analysis
            {% elif mode == 'oct' %}
                📊 OCT Scan Analysis
            {% else %}
                🔬 Multimodal Fusion Analysis
            {% endif %}
        </h2>

        <div class="upload-container">
            <form id="uploadForm" enctype="multipart/form-data">
                {% if mode == 'multimodal' %}
                    <div class="upload-group">
                        <label class="upload-label">Fundus Image</label>
                        <div class="upload-box" id="fundusUploadBox">
                            <input type="file" id="fundusImage" name="fundus_image" accept="image/*" required>
                            <div class="upload-placeholder">
                                <span class="upload-icon">📁</span>
                                <p>Click or drag fundus image here</p>
                                <small>Supported: JPG, PNG</small>
                            </div>
                            <img id="fundusPreview" class="image-preview" style="display:none;">
                        </div>
                    </div>

                    <div class="upload-group">
                        <label class="upload-label">OCT Image</label>
                        <div class="upload-box" id="octUploadBox">
                            <input type="file" id="octImage" name="oct_image" accept="image/*" required>
                            <div class="upload-placeholder">
                                <span class="upload-icon">📁</span>
                                <p>Click or drag OCT image here</p>
                                <small>Supported: JPG, PNG</small>
                            </div>
                            <img id="octPreview" class="image-preview" style="display:none;">
                        </div>
                    </div>
                {% elif mode == 'fundus' %}
                    <div class="upload-group">
                        <label class="upload-label">Fundus Image</label>
                        <div class="upload-box" id="fundusUploadBox">
                            <input type="file" id="fundusImage" name="fundus_image" accept="image/*" required>
                            <div class="upload-placeholder">
                                <span class="upload-icon">📁</span>
                                <p>Click or drag fundus image here</p>
                                <small>Supported: JPG, PNG</small>
                            </div>
                            <img id="fundusPreview" class="image-preview" style="display:none;">
                        </div>
                    </div>
                {% else %}
                    <div class="upload-group">
                        <label class="upload-label">OCT Image</label>
                        <div class="upload-box" id="octUploadBox">
                            <input type="file" id="octImage" name="oct_image" accept="image/*" required>
                            <div class="upload-placeholder">
                                <span class="upload-icon">📁</span>
                                <p>Click or drag OCT image here</p>
                                <small>Supported: JPG, PNG</small>
                            </div>
                            <img id="octPreview" class="image-preview" style="display:none;">
                        </div>
                    </div>
                {% endif %}

                <button type="submit" class="btn btn-large btn-primary" id="analyzeBtn">
                    <span id="btnText">🔍 Analyze Images</span>
                    <span id="btnLoader" class="loader" style="display:none;"></span>
                </button>
            </form>

            <div id="errorMessage" class="error-message" style="display:none;"></div>
        </div>

        <div id="resultsSection" class="results-section" style="display:none;">
            <!-- Results will be dynamically inserted here -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const mode = '{{ mode }}';
</script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}