{% extends "base.html" %}
{% block title %}
    
{% endblock %}

{% block header %}
<header>
    <div class="center" style="margin-top: 150px;">
        <h1>Toxic Browser</h1>
    </div>
</header>
{% endblock %}

{% block content %}

<div class="center">
    <form action="/get_toxic" method="GET">
        <input type="text" name="search_query" id="search_query" placeholder="Enter compound name, ID, or InChIKey">
        <button type="submit">Search</button>
    </form>
</div>
    <div class="center">
        <button class="collapsible">Other search options</button>
        <div class="content">
            <div class="submenu">
                <div class="nav">
                    <ul>
                        <li><a href="#">Pictogram</a>
                            <ul>
                                {% for pictogram in pictograms %}
                                    <li><a href="{{ url_for('filtered_compounds_by_pictogram', pictogram_id=pictogram.id) }}"><img src="{{ pictogram.pictogram_url }}" alt="Pictogram"></a></li>
                                {% endfor %}
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<script src="../static/js/scripts.js"></script>
{% endblock %}

{% block scripts %}        
<script>
    $(function() {
        $("#search_query").autocomplete({
            source: function(request, response) {
                // Send an AJAX request to your Flask backend
                $.ajax({
                    url: "/autocomplete", // Update with your Flask endpoint for autocomplete
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: 3 // Minimum characters before autocomplete kicks in
        });
     });
</script>
{% endblock %}