{% extends 'home/base.html' %}

{% block content %}
<script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<h1>Bienvenue 😍</h1>
<p>Bienvenue sur notre page d'Accueil. Ici, nous partageons notre volonté de vous aider...</p>
 <!-- Formulaire HTMX -->
<form id="scholarForm" hx-post="{% url 'scholar_api' %}" hx-target="#result" hx-swap="outerHTML">
    {% csrf_token %}
    <input type="text" name="query" placeholder="Entrez votre recherche">
    <button type="submit">Envoyer</button>
</form>

<!-- Résultat de la requête -->
<div id="result">
    {% for result in results %}
        <div>
            <a href="{{ result.link }}" target="_blank">{{ result.title }}</a>
            <p>{{ result.snippet }}</p>
        </div>
    {% endfor %}
</div>

<div class="container mt-5">
    <h2 class="mb-3">Formulaire d'analyse de données</h2>
    <!-- Formulaire avec HTMX pour soumettre les données via POST, gestion du fichier et de l'URL de manière optionnelle -->
    <form id="analyze-form" hx-post="/analyze/" hx-encoding="multipart/form-data" hx-target="#result1" hx-swap="beforeend" method="POST" enctype="multipart/form-data" class="form-group">
        {% csrf_token %}
        <div class="form-group">
            <label for="prompt">Prompt (obligatoire) :</label>
            <input type="text" id="prompt" name="prompt" class="form-control" placeholder="Entrez votre prompt ici" required>
        </div>
        
        <div class="form-group">
            <label for="file">Fichier (optionnel) :</label>
            <input type="file" id="file" name="file" class="form-control">
        </div>

        <div class="form-group">
            <label for="url">URL (optionnel) :</label>
            <input type="url" id="url" name="url" class="form-control" placeholder="URL pour télécharger les données">
        </div>

        <button type="submit" class="btn btn-primary">Analyser</button>
    </form>
    <!-- Conteneur où les résultats sont ajoutés à la fin -->
    <div id="result1" class="mt-4"></div>
</div>
<script>
document.addEventListener('htmx:afterSwap', function() {
    var chatContainer = document.getElementById('result1');
    chatContainer.scrollTop = chatContainer.scrollHeight;
});

// Fonction pour afficher les résultats dans le formulaire
function displayResult(jsonString) {
    var resultObj = JSON.parse(jsonString);
    var resultContent = resultObj.result;

    // Afficher le contenu dans le formulaire
    document.getElementById('result1').textContent = resultContent;

    // Vider le champ de prompt
    document.getElementById('prompt').value = '';
}
</script>




{% endblock %}