{% extends 'base.html.twig' %}
{% block body %}
    {% include 'iannotate-navigation.html.twig' %}
    <div class="main container-fluid">
        <div class="row">
            <div class="col-4">
                <form style="padding:10px;" method="POST" action="/sites" >
                    <div class="form-group">

                        {%  for key,api in apis %}
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="selectedApi" id="selectedApi-{{ key }}" value="{{ api.code }}" checked>
                                <label class="form-check-label" for="selectedApi-{{ key }}">{{  api.label}}</label>
                            </div>
                        {% endfor %}

                    </div>
                    <input class="btn btn-primary" type="submit" style="margin-top:10px;" value="Submit">
                </form>

            </div>
            <div class="col-8 hintText">
                <h3>Select the Site</h3>
                <p>The iAnnotate application supports two NASA image sources:
                <ul>
                    <li>NASA General Image Search</li>
                    <li>Earth Polychromatic Imaging Camera (EPIC) Search</li>
                </ul>
                </p>
                <p>Image search searches the various meta-data fields (description, keywords) available from the database to conduct searches.</p>
                <p>
                    EPIC search searches a number of different types of images (natural, cloud cover, etc...) by data fields.
                </p>
                <p style="font-weight:bold">
                    Details describing use of these fields are found under the 'HELP' option at the top right corner of the page.
                </p>
            </div>
        </div>


    </div>
    {% include 'footer.html.twig' %}
{% endblock %}