{% extends 'base.html' %}
{% block content %}
        <section 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 text-end">
                            <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 width="2%"><input type="checkbox" id="checkAllData" onclick="checkAllCheckboxes('dataFilesTable', 'checkAllData')"></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>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for file in files.data %}
                        <tr>
                            <td><input type="checkbox" name="fileCheckbox" value="{{ url_for('download_data_file', filename=file.name_display) }}"{{ ' disabled' if file.active }}></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-sm btn-warning" onclick="deleteFiles(['{{ file.name }}'])"{{ ' disabled' if file.active }}>Delete</button>
                            </td>
                            <td>
                                <span id="status-{{ file.name_display }}" class="badge {{ 'bg-danger' if file.active else 'bg-success' }}">
                                    {{ 'In Use' if file.active else 'Available' }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
        <section 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>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>
                </div>
                <table id="logFilesTable" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="2%"><input type="checkbox" id="checkAllLog" onclick="checkAllCheckboxes('logFilesTable', 'checkAllLog')"></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>
                            <th>Status</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) }}"{{ ' disabled' if file.active }}></td>
                            <td><a href="{{ url_for('download_log_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-sm btn-warning" onclick="deleteFiles(['{{ file.name }}'])"{{ ' disabled' if file.active }}>Delete</button>
                            </td>
                            <td>
                                <span id="status-{{ file.name_display }}" class="badge {{ 'bg-danger' if file.active else 'bg-success' }}">
                                    {{ 'In Use' if file.active else 'Available' }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
        {% block scripts %}
        {{ bootstrap.load_js() }}
        <script src="{{url_for('.static', filename='download_results.js')}}"></script>
{% endblock %}
{% endblock content %}