<div class="my-2">
    {% include "core/basic_elements/label.html" %}
    {% if molecule is None %}
        {% if many_molecules %}
            {% alert theme="danger" message="This section assumes all individual components are their own molecule, which means it will incorrectly split up salts and make things like Na+ or Cl- their own entries. Until this is fixed, avoid using the create_many form for such compounds." %}
        {% endif %}
        {% if allow_custom_input %}
            {# Custom Text input #}
            <div class="px-3 py-1">
                {% htmx_text_input name=custom_input_name show_label=show_option_labels label=custom_input_label placeholder=custom_input_placeholder %}
            </div>
        {% endif %}
        {% if allow_reference_input %}
            {# Reference Text input (e.g. searching by ID or CAS number) #}
            <div class="px-3 py-1">
                {% htmx_text_input name=reference_input_name show_label=show_option_labels label=reference_input_label placeholder=reference_input_placeholder %}
            </div>
        {% endif %}
        {% if allow_text_input %}
            {# Text-based input for smiles/sdf/ichi/etc... #}
            <div class="px-3 py-1">
                {% htmx_text_area name=text_input_name show_label=show_option_labels label=text_input_label placeholder="Paste in SMILES, INCHI, MOL text, or any other supported format." %}
            </div>
        {% endif %}
        {% if allow_sketcher_input %}
            {# Molecule Sketcher (ChemDraw.js or Ketcher.js) #}
            <div id="{{ name }}-{{ component.component_id }}-sketcher-and-input-div"
                 class="px-3 py-1"
                 hx-preserve>
                {% if show_option_labels %}<label class="form-label">{{ sketcher_input_label }}</label>{% endif %}
                <div id="{{ name }}-{{ component.component_id }}"
                     style="width: 600px;
                            height: 400px"></div>
                <script>add_mol_sketcher("{{ name }}-{{ component.component_id }}");</script>
                <input type="hidden"
                    id="{{ name }}-{{ component.component_id }}-hidden"
                    name="{{ sketcher_input_name }}"
                    {# this defer works, but it is annoying because there is a loading bar every time you make an edit #}
                    {% if not defer %}{% htmx_post indicator=indicator %}{% endif %}>
                </input>
                <script>enable_mol_autowrite('{{ name }}-{{ component.component_id }}', '{{ name }}-{{ component.component_id }}-hidden', '{{ export_format }}');</script>
            </div>
        {% endif %}
        {% if load_button %}
            <div class="text-center pt-3">
                {% if many_molecules %}
                    {% htmx_button method_name="load_many_molecules" label="Load Molecules" input_name=name icon="upload" %}
                {% else %}
                    {% htmx_button method_name="load_molecule" label="Load Molecule" input_name=name icon="upload" %}
                {% endif %}
            </div>
        {% endif %}
    {% elif molecule == False %}
        {% alert theme="danger" message="Failed to load the Molecule. This typically happens due invalid chemistry, such as missing formal charges. Contact our team with your molecule so that we can help troubleshoot and prevent errors like this in the future." %}
        <div class="text-center">
            <b>Refresh the page to restart the form</b>
        </div>
    {% else %}
        {% if many_molecules %}
            {% alert theme="success" message="Molecules successfully loaded! Refresh this page if you wish to restart." %}
        {% else %}
            {% alert theme="success" message="Molecule successfully loaded! Refresh this page if you wish to restart." %}
            {# canvas #}
            <div class="text-center">
                <div hx-preserve
                     id="{{ name }}-{{ component.component_id }}-image"
                     width="{{ width }}"
                     height="{{ height }}"
                     hidden></div>
            </div>
            {% if molecule_matches %}
                <div>
                    <div class="alert alert-danger" role="alert">
                        <i class="mdi mdi-alert mx-2"></i>
                        <p>This compound is already registered! Jump to that entry to edit:</p>
                        {% for match in molecule_matches %}
                            <a type="button"
                               class="btn btn-primary btn-sm"
                               href="{{ match.table_entry_url }}"
                               target="_blank">
                                {{ match.table_name }} {{ match.table_entry_id }} <i class="bi bi-box-arrow-up-right"></i>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
        {# TODO: button name="unset_molecule" theme="secondary" icon="refresh" #}
    {% endif %}
</div>
