{% extends 'base.html.twig' %}
{% block body %}
    {% include 'iannotate-navigation.html.twig' %}


    {% if system_error %}
        <div class="main container-fluid error">
            {{ system_error }}
        </div>
    {% else %}
    <div  class="main container-fluid" >
       <div class="row" {{  stimulus_controller('image-search') }}>
           <div class="col-md-2">
               {{ form(form) }}
               <div class="hints">
                   (Details of these fields are explained in the HELP panel).
               </div>
           </div>
           {% if first_view == true %}
               <div id="loadingSpinner" style="display:none;margin-left:100px;margin-top:20px;" class="spinner-border col-md-10" role="status">
                   <span class="visually-hidden">Loading</span>
               </div>
           <div id="searchIntro"  class="col-md-10 hintText" >
               <h3>Image Search</h3>
               <p>Searching the NASA Image Library involves entering terms that will be applied to the various meta fields used by NASA.</p>
               <p><ul>
                   <li>Free form searches all meta fields</li>
                   <li>Description searches only description field</li>
                   <li>Keyword uses comma separated terms to search keyword fields</li>
                   <li>Asset ID requires the NASA identifier</li>
                   <li>AI Scored applies search terms to all meta fields, and returns 100 records with the highest score as determined by OpenAI</li>
               </ul></p>
               <h3>EPIC Search</h3>
              <p>Searching the Earth Polychromatic Imaging Camera (EPIC) images involves the selection of a desired image type along with the desired dates</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>
           {% else %}
               <div id="loadingSpinner" style="display:none;margin-left:100px;margin-top:20px;" class="spinner-border col-md-10" role="status">
                   <span class="visually-hidden">Loading</span>
               </div>
           <div id="searchResults" class="col-md-10" >

               {% if SearchResults %}
               <h3>Search Results</h3>
               {% if SearchResults.status == 3 %}
               <span>No results</span>
               {% else %}
               <span id="resultsMessage">{{ SearchResults.message }}</span>
               <div class="container-fluid" style="margin-top: 20px;" >
                   <div class="row">
                       <div class="col-xl-4">
                           <div id="resultsList" class="search-results" >
                           <select size="25"
                                   id="imageSelect"
                                   data-image-search-target = "image"
                                   class="form-select form-select-sm list-group"
                                   data-action="click->image-search#selectImage" >
                              {%  for img in SearchResults.content %}
                                     <option value="{{img.id}}">
                                   {{ img.label }} {{ img.properties['score'] ?? '' }}
                               </option>
                               {%  endfor %}
                           </select>
                       </div>
                           {% set prevDisabledString = page_number <= 1 ? "disabled" : "" %}
                           {% set nextDisabledString = not SearchResults.hasMore ? "disabled" : "" %}
                           <div id="paginationButtons" >
                               <label for="pageBtnGroup">Page:</label>
                               <input disabled id="pageNumber" size="2" value="{{ page_number }}"/>
                               <div  id="pageBtnGroup" class="btn-group" role="group" aria-label="Pagination">
                                   <button type="button"  class="btn btn-secondary prevBtn" {{ prevDisabledString }}>Previous</button>
                                   <button type="button"  class="btn btn-secondary nextBtn" {{ nextDisabledString }}>Next</button>
                               </div>
                           </div>

                       </div>
                       <div class=" col-xl-3" >

                           <div id="thumbnail">

                           </div>
                           <div id="annotateControls">
                           <a id="annotateButton" href="{{ path('image-annotate') }}?url=" class="btn btn-primary disabled" role="button" disabled="true">
                               Mark
                           </a>
                           </div>


                       </div>
                       <div class="col-xl-5">

                           <table id="imageProperties" style="display:none;">
                               <thead><tr><th>Property</th><th>Value</th></tr></thead>
                               <tbody>

                               <!-- prepopulate properties for all returned elements with javascript
                                    displaying only the properties for the selected image  -
                                    image attributes attached only to the first property row
                                    of a given image -->
                               {%  for img in SearchResults.content %}

                                   {% set firstProp = true %}
                                   {% for propKey, propVal in img.properties %}
                                       {% if firstProp %}
                                           <tr data-ebc-imgid="{{ img.id }}" class="hidden"
                                               data-ebc-thumbnail="{{ img.thumbnailURL }}"
                                               data-ebc-thumbwidth="{{ img.thumbnailWidth }}"
                                               data-ebc-thumbheight="{{ img.thumbnailHeight }}"
                                               data-ebc-serviceCode="{{ img.serviceCode }}"
                                               data-ebc-fullsize="{{ img.fullSizeURL }}"
                                               data-ebc-original="{{ img.originalURL }}">
                                               <td><div class="cellContent">{{ propKey }}</div></td>
                                               <td><div class="cellContent">{{ propVal }}</div></td>
                                               {% set firstProp = false %}
                                           </tr>
                                       {% else %}
                                           <tr data-ebc-imgid="{{ img.id }}"  class="hidden">
                                               <td><div class="cellContent">{{ propKey }}</div></td>
                                               <td><div class="cellContent">{{ propVal }}</div></td>
                                           </tr>
                                       {% endif %}
                                   {%  endfor %}
                               {%  endfor %}
                               </tbody>

                           </table>
                       </div>

                   </div>
               </div>
               {% endif %}
               {% endif %}
           </div>
               {% endif %}

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