<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi EscuelApp</title>
    <link rel="stylesheet" href="/css/estilo.css">
</head>
<body>

<header>
    <span class="header-icon">🏫</span>
    <span>Mi EscuelApp</span>
</header>

<main>
    <p class="seccion-label">Tarea</p>

    <div class="panel-tarea">
        <div class="icono-barrio">
            <span class="casa">🏠</span>
            <span class="pie-icono">Mi Barrio</span>
        </div>
        <p class="descripcion">
            Agrega una foto de tu barrio que te sirva para hacer una poesía que lo describa.
        </p>
    </div>

    <div class="subir-foto">
        <form action="/sitemap.xml/subir" method="post" enctype="multipart/form-data">
            <input type="text" name="nombre" placeholder="Tu nombre" required>
            <input type="text" name="apellido" placeholder="Tu apellido" required>
            <div class="dropzone" id="dropzone">
                <span>📷 Arrastrá la foto aquí o hacé clic para seleccionarla</span>
                <input type="file" name="foto" id="foto" accept="image/*" required>
            </div>
            <button type="submit">Subir foto</button>
        </form>
    </div>

    <div class="link-galeria">
        <a href="/sitemap.xml/galeria">📸 Galeria </a>
    </div>
    <div class="link-galeria" style="margin-top: 0.75rem;">
        <a href="/recursos">📚 Recursos</a>
    </div>
</main>

<script>
    const dropzone = document.getElementById('dropzone');
    const input = document.getElementById('foto');
    dropzone.addEventListener('click', () => input.click());
    dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.classList.add('drag-over'); });
    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
    dropzone.addEventListener('drop', e => {
        e.preventDefault();
        dropzone.classList.remove('drag-over');
        input.files = e.dataTransfer.files;
        dropzone.querySelector('span').textContent = '✅ ' + e.dataTransfer.files[0].name;
    });
    input.addEventListener('change', () => {
        if (input.files[0]) dropzone.querySelector('span').textContent = '✅ ' + input.files[0].name;
    });
</script>

</body>
</html>