{% extends "base.html" %}

{% block content %}
<div class="card shadow fade-in">
    <div class="card-header">
        <h3 class="mb-0">Image Translation</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="/translate" enctype="multipart/form-data" id="translation-form">
            <div class="mb-4">
                <label class="form-label">Select Translation Direction:(Download Sample Images from Sample Section)</label>
                <label class="form-label">Add Only Valid Brain Images</label>
                <select class="form-select" name="direction" required>
                    <option value="ct_to_mri">CT Scan to MRI</option>
                    <option value="mri_to_ct">MRI to CT Scan</option>
                </select>
            </div>
            
            <div class="mb-4">
                <div id="drop-zone" class="border-2 border-dashed p-5 text-center rounded">
                    <i class="fas fa-cloud-upload-alt fa-3x mb-3" style="color: var(--primary-color)"></i>
                    <h4>Drag & Drop Image Here</h4>
                    <p>or</p>
                    <input class="form-control" type="file" name="file" accept=".png,.jpg,.jpeg" required>
                </div>
            </div>

            <div id="preview-container" class="mb-4" style="display: none;">
                <h5>Preview:</h5>
                <img id="preview-image" class="img-fluid rounded" alt="Preview">
            </div>
            
            <div class="text-center">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-magic me-2"></i>
                    Translate Image
                </button>
                <div class="loading-spinner mx-auto mt-3" style="display: none;"></div>
            </div>
        </form>
    </div>
</div>
{% endblock %}