<!-- Workflow name and descriptoin header -->
<section class="pt-5 jumbotron text-center">
    <div class="container">
        <h1 class="jumbotron-heading">Searching Third-Party Databases</h1>
        <p class="lead text-muted">Explore some of the most popular material databases and immediately jump to the
            provider's website for more data</p>
    </div>
</section>

<div class="container p-4">
    <form action="{% url 'home' %}#search-results" method="post">
        {% csrf_token %}

        <!-- To customize the order of fields as well as how they render, we manually
     write out this form. If I were to change anything for the form, I would
     need to look at the formatting here again. To gauge what the form should
     look like (without Bootstrap), this line is all you need:
     { chemical_system_form } -->


        {{ chemical_system_form.non_field_errors }}
        <div class="fieldWrapper">
            {{ chemical_system_form.chemical_system.errors }}
            <label for="id_chemical_system" class="form-label"><b>Search by Chemical System:</b></label>
            <input type="text" name="chemical_system" maxlength="20" required="" id="id_chemical_system"
                class="form-control" placeholder="Li-Co-O">
        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <label for="id_include_subsystems" class="form-check-label">include subsystems</label>
            <input type="checkbox" name="include_subsystems" id="id_include_subsystems" class="form-check-input">
            <div id="include_subsystems_help" class="form-text">
                <i>subsystems of Li-Co-O would be Li, Co, O, Li-Co, Li-O, and Co-O.</i>
            </div>
        </div>

        <br>

        <b>Databases to Search:</b>
        <br>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="aflow" id="id_aflow" class="form-check-input" disabled>
            <label for="id_aflow" class="form-check-label">AFLOW</label>
        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="cod" id="id_cod" class="form-check-input" checked>
            <label for="id_cod" class="form-check-label">COD</label>
        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="jarvis" id="id_jarvis" class="form-check-input" checked>
            <label for="id_jarvis" class="form-check-label">JARVIS</label>
        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="materials_project" id="id_materials_project" class="form-check-input" checked>
            <label for="id_materials_project" class="form-check-label">Materials Project</label>
        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="simmate" id="id_simmate" class="form-check-input" disabled>
            <label for="id_simmate" class="form-check-label">Simmate</label>

        </div>
        <div class="fieldWrapper form-check">
            {{ chemical_system_form.include_subsystems.errors }}
            <input type="checkbox" name="oqmd" id="id_oqmd" class="form-check-input" checked>
            <label for="id_oqmd" class="form-check-label">OQMD</label>
        </div>


        <br>
        <b>Advanced filtering criteria is coming soon!</b>
        <br><br>

        <button class="btn btn-outline-primary" type="submit">Search</button>

    </form>

</div>