{% extends 'layout.html' %}
{% block content %}
    <h1>Dosya Yükle</h1>
    <form method="POST" action="/upload" enctype="multipart/form-data">
    <div class="my-3">
        <label for="fileInput" class="form-label">Görüntüleri İçeren Klasöri Seçin</label>
        <input type="file" name="file[]" id="fileInput" multiple webkitdirectory directory required class="form-control w-auto">
        <small class="mt-2 text-warning"><strong>"Ana Klasör / Vaka Klasörü"</strong> şeklinde vakalara ait olan görselleri tutan klasörlerin içinde bulunduğu klasörü seçin.</small>
    </div>
        
        <button class="btn btn-outline-info" type="submit">Yükle</button>
    </form>
{% endblock content %}

{% block scripts %}
    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            // Seçilen dosyalardan ilk dosyanın yol bilgisini (webkitRelativePath) görebilirsiniz.
            // Bu bilgi, klasör yapısını Flask'a göndermek için kritik.
            const files = event.target.files;
            if (files.length > 0) {
                console.log("Seçilen ilk dosyanın göreceli yolu: " + files[0].webkitRelativePath);
            }
        });
    </script>
{% endblock scripts %}