{% extends 'base.html' %}

{% block title %}
    <div class="compound"><h1 id="title"> {{ compound.compound_name }}</h1></header>
{% endblock %}


{% block content %}
    <br></br>
        <div class="compound_information">
        <h3><strong>Pictograms</strong></h3>
        
        <div class="pictograms">
            {% for pictogram in compound.pictograms %}
                <img src="{{ pictogram.pictogram_url }}" alt="Pictogram">
            {% endfor %}
        </div>

            </div>
                <div class="center margin-top:50px;">
                <p><strong>Compound structure</strong></p>
                <iframe style="width: 500px; height: 300px;" frameborder="0" src="https://embed.molview.org/v1/?mode=balls&cid={{compound.pubchem_id}}"></iframe>
            </div>      

            <div class="compound_information">
                <h3><strong>Compound Information</strong></h3><br>
                <p><strong>Chemical Formula:</strong> {{ compound.chemical_formula }}</p>
                <p><strong>Molecular Weight:</strong> {{ compound.molecular_weight }}</p>
                <p><strong>InchiKey:</strong> {{ compound.inchi_key }}</p>
                <p><strong>Canonical SMILES:</strong> {{ compound.canonical_smiles}}</p>
                <p><strong>Isomeric SMILES:</strong> {{ compound.isomeric_smiles}}</p>
                <p><strong>Chembl id:</strong> {{ compound.chembl_id}}</p>
                <p><strong>Pubchem cid:</strong> {{ compound.pubchem_id }}</p><br>
            </div>
            <div class="descriptions">    
                <h3><strong>Compound Descriptions</strong></h3><br>
                <p><strong>Description:</strong> {{ compound.description }}</p><br>
                <p><strong>Description 2:</strong> {{ compound.description1 }}</p><br><br>
            </div>
            <div class="toxicity">    
                <h3><strong>Mechanism of toxicity</strong></h3><br>
                <p>{{compound.mechanism_of_toxicity}}</p><br>
                <h3><strong>Treatment</strong></h3><br>
                <p>{{compound.treatment}}</p><br>
            </div>
            <div class="compound_information">
                <h3><strong>Type Names</strong></h3><br>
                    <ul>
                        {% for type_name in compound.type_names %}
                            <li>&#9864;     {{ type_name.type_name }}</li>
                        {% endfor %}<br><br>
                    </ul>
            </div>

{% endblock %}

{% block scripts %}          
    <script>
        $(function() {
    $.widget("custom.autocomplete", $.ui.autocomplete, {
        _renderMenu: function(ul, items) {
            var self = this;
            $.each(items, function(index, item) {
                self._renderItemData(ul, item);
            });
            // Remove the message element
            ul.find("div.ui-menu-item:first").remove();
        }
    });

    $("#search_query").autocomplete({
        source: function(request, response) {
                    $("#fcb").autocomplete({
            //your source info
        messages: {
                noResults: '',
                results: function() {}
            }
        });

            // 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 %}