<div class="accordion-content">
    <ul>
        <h3>Search Files</h3>
        <form id="queryAll" action="query_by_euids" method="post" enctype="multipart/form-data">
            <input type=hidden id="file_euids" name="file_euids" >
            <button type="submit" id="queryByEuidsButton">return all records</button>
        </form> ... or SEARCH 
        <hr>
        <table>
            <tr style="vertical-align: top;">
                <td style="align:top; width:22%;">
                    <!-- New form for querying by EUIDs -->
                    <form id="queryByEuidsForm" action="query_by_euids" method="post" enctype="multipart/form-data">
                        <label for="file_euids">by EUIDs (one per line):</label>
                        <textarea id="file_euids" name="file_euids" rows="10" cols="25" style="resize: both;"></textarea><br>
                        <button type="submit" id="queryByEuidsButton">Query by EUIDs</button>
                    </form>
                </td>
                <td style="align:top;">
                    <!-- Existing search form -->
                    <form id="searchFileForm" data-form="search" action="search_files" method="post" enctype="multipart/form-data">
                        <label for="file_euids">by METADATA</label>
<br>
                        <input type="hidden" value="" id="euid" name="euid"><br>

                        <label for="is_greedy">Greedy Search: </label>
                        <select name="is_greedy">
                            <option value="yes" selected>yes</option>
                            <option value="no">no</option>
                        </select>
                           
                        <!-- Additional search fields from metadata form -->

                        <br>
                        <hr>
                        {% for field in ui_search_fields %}
                        <div>
                            {% if field.type == "select" and field.multiple %}
                            <label for="{{ field.name }}">{{ field.label }}</label>          
                            <div class="option-buttons" data-select-id="{{ field.name }}">
                                <select class="no-selectize" name="{{ field.name }}" id="{{ field.name }}" multiple style="display: none;">
                                    <option value="" selected></option> <!-- Placeholder for blank state -->
                                    <option value=".na">isnull</option>
                                    {% for option in field.options %}
                                        <option value="{{ option }}">{{ option }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% elif field.type == "select" %}
                            <label for="{{ field.name }}">{{ field.label }}</label>          
                              <select class="no-selectize" name="{{ field.name }}" id="{{ field.name }}">
                                    <option value="" selected></option> <!-- Placeholder for blank state -->
                                    <option value=".na">isnull</option>
                                    {% for option in field.options %}
                                        <option value="{{ option }}">{{ option }}</option>
                                    {% endfor %}
                                </select>
                            {% else %}
                                {% if not field.name.endswith('_datetime') %}
                                <label for="{{ field.name }}">{{ field.label }}</label>
                                <input type="{{ field.type }}" name="{{ field.name }}" id="{{ field.name }}" />
                                {% endif %}
                            {% endif %}
                        </div>
                        {% endfor %}
                        <hr>
                        <br>

                        <label for="record_datetime_start">Relevant Date Start: </label>
                        <input type="date" name="record_datetime_start" id="record_datetime_start"><br><br>

                        <label for="record_datetime_end">Relevant Date End: </label>
                        <input type="date" name="record_datetime_end" id="record_datetime_end"><br><br>

                        <hr>

                        <label for="created_datetime_start">Dewey Created Date Start: </label>
                        <input type="date" name="created_datetime_start" id="created_datetime_start"><br><br>

                        <label for="created_datetime_end">Dewey Created Date End: </label>
                        <input type="date" name="created_datetime_end" id="created_datetime_end"><br><br>

                        <button type="submit" id="searchFilesButton">Search Files</button>
                    </form>
                </td>
                <td style="align:top;">
                  
                </td>
            </tr>
        </table>
    </ul>
</div>

<script>
    document.getElementById('queryByEuidsButton').addEventListener('click', function(event) {
        const euidsTextarea = document.getElementById('file_euids');
        if (!euidsTextarea.value.trim()) {
            event.preventDefault(); // Prevent the default form submission
            document.getElementById('searchFileForm').submit(); // Submit the search form instead
        }
    });
</script>
