{% include "header.html" %}
    <main>
        <section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
            <div class="container-md my-5 mx-2 shadow-lg p-4 ">
                <div class="container-sm">
                    <div class="row">
                        <div class="col">
                            <h2>Data Files</h2>
                        </div>
                        <div class="col">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-warning" onclick="deleteSelectedFiles()">Delete Selected Files</button>
                                <button class="btn btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="dataFilesTable" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAllData" onclick="checkAllCheckboxes('dataFilesTable', 'checkAllData')"> Select</th>
                            <th onclick="sortTable(1, 'dataFilesTable')">File Name</th>
                            <th onclick="sortTable(2, 'dataFilesTable')">Last Modified</th>
                            <th onclick="sortTable(3, 'dataFilesTable')">Created</th>
                            <th onclick="sortTable(4, 'dataFilesTable')">Size</th>
                            <th>Action</th>
                        </tr>
                    </thead>    
                    <tbody>
                        {% for file in files.data %}                
                        <tr>
                            <td class="d-sm-table-cell"><input type="checkbox" name="fileCheckbox" value="{{ url_for('download_data_file', filename=file.name_display) }}"></td>
                            <td><a href="{{ url_for('download_data_file', filename=file.name_display) }}" target="_blank">{{ file.name_display }}</a></td>
                            <td>{{ file.last_modified | datetimeformat }}</td>
                            <td>{{ file.created | datetimeformat }}</td>
                            <td>{{ file.size }}</td>
                            <td>
                                <button class="btn btn-warning" onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="container-sm">
                    <div class="row">
                        <div class="col">
                            <h2>Log Files</h2>
                        </div>
                        <div class="col">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-warning" onclick="deleteSelectedFiles()">Delete Selected Files</button>
                                <button class="btn btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
                            </div>
                        </div>
                </div>                <table id="logFilesTable" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAllLog" onclick="checkAllCheckboxes('logFilesTable', 'checkAllLog')"> Select</th>
                            <th onclick="sortTable(1, 'logFilesTable')">File Name</th>
                            <th onclick="sortTable(2, 'logFilesTable')">Last Modified</th>
                            <th onclick="sortTable(3, 'logFilesTable')">Created</th>
                            <th onclick="sortTable(4, 'logFilesTable')">Size</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for file in files.log %}
                            <tr>
                                <td><input type="checkbox" name="fileCheckbox" value="{{ url_for('download_log_file', filename=file.name_display) }}"></td>
                                <td><a href="{{ url_for('download_log_file', filename=file.name_display) }}" target="_blank">{{ file.name }}</a></td>
                                <td>{{ file.last_modified | datetimeformat }}</td>
                                <td>{{ file.created | datetimeformat }}</td>
                                <td>{{ file.size }}</td>
                                <td>
                                    <button class="btn btn-warning" onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>
    {% block scripts %}
         {{ bootstrap.load_js() }}
        <script src="{{url_for('.static', filename='download_results.js')}}"></script>
    {% endblock %}
    {% include "footer.html" %}