<div id="datastore-table-data-container">
    <div class="table-responsive">
        <div class="d-flex justify-content-between mb-3 align-items-center flex-wrap gap-2">
            <div class="fw-bold fs-5">
                <i class="fa fa-table me-2"></i>
                <span class="me-2">{{ _('Table') }}: 
                    {% if data.resource_url %}
                    <a href="{{ data.resource_url }}" target="_blank" class="text-primary text-decoration-none">
                        <code>{{ data.table_id }}</code>
                        <i class="fa fa-external-link ms-1" style="font-size: 0.8em;"></i>
                    </a>
                    {% else %}
                    <code class="text-primary">{{ data.table_id }}</code>
                    {% endif %}
                </span>
                {% if data.resource_name %}
                <span class="text-muted small">({{ data.resource_name }})</span>
                {% endif %}
            </div>
            <div class="d-flex align-items-center gap-2">
                <form class="d-flex align-items-center gap-2 flex-wrap" 
                      hx-post="{{ h.url_for('selftools_htmx.selftools_datastore_table_data') }}" 
                      hx-trigger="submit" 
                      hx-target="#datastore-table-data-container" 
                      hx-swap="innerHTML">
                    <input type="hidden" name="table_id" value="{{ data.table_id }}">

                    <div class="d-flex align-items-center gap-1">
                        <label for="filter-column" class="mb-0 text-nowrap small">{{ _('Column') }}</label>
                        <select id="filter-column" 
                                name="filter_column" 
                                class="form-select form-select-sm" 
                                style="width: 150px;">
                            <option value="">{{ _('-- Select column --') }}</option>
                            {% for field in data.fields %}
                            <option value="{{ field }}" {% if data.filter_column == field %}selected{% endif %}>
                                {{ field }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="d-flex align-items-center gap-1">
                        <label for="filter-value" class="mb-0 text-nowrap small">{{ _('Value') }}</label>
                        <input type="text" 
                               id="filter-value" 
                               name="filter_value" 
                               class="form-control form-control-sm" 
                               style="width: 120px;"
                               value="{{ data.filter_value or '' }}"
                               placeholder="e.g., 123">
                    </div>

                    <div class="d-flex align-items-center gap-1">
                        <label for="limit-input" class="mb-0 text-nowrap small">{{ _('Limit') }}</label>
                        <input type="number" 
                               id="limit-input" 
                               name="limit" 
                               class="form-control form-control-sm" 
                               style="width: 100px;"
                               min="1" 
                               max="100000" 
                               value="{{ data.total_records }}"
                               placeholder="100">
                    </div>
                    
                    <button type="submit" class="btn btn-dark btn-sm">
                        <i class="fa fa-refresh me-1"></i>{{ _('Apply') }}
                    </button>
                </form>
                
                <span class="px-2 py-1 rounded bg-secondary text-white text-center">{{ _('Records') }}: {{ data.results | length }}</span>
                <button class="btn btn-dark btn-sm" onclick="copyTableJsonToClipboard('selftools-datastore-table-results')">
                    <i class="fa fa-copy me-1"></i> Copy as JSON
                </button>
            </div>
        </div>

    <div class="accordion mb-3" id="columnInfoAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingColumnInfo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseColumnInfo" aria-expanded="false" aria-controls="collapseColumnInfo">
                    <i class="fa fa-info-circle me-2"></i>
                    {{ _('Column Information') }} ({{ data.fields | length }} {{ _('columns') }})
                </button>
            </h2>
            <div id="collapseColumnInfo" class="accordion-collapse collapse" aria-labelledby="headingColumnInfo" data-bs-parent="#columnInfoAccordion">
                <div class="accordion-body">
                    <div class="row g-2">
                        {% for field in data.fields %}
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="d-flex align-items-center">
                                <span class="px-2 py-1 rounded bg-light text-dark text-center me-2" style="min-width: 80px;">
                                    {{ data.field_types.get(field, 'unknown') }}
                                </span>
                                <code class="text-primary small">{{ field }}</code>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <table id="selftools-datastore-table-results" class="table table-striped table-bordered table-hover">
        <thead class="table-light">
            <tr>
                {% for field in data.fields %}
                <th scope="col">
                    {{ field }}
                    <br>
                    <small class="text-muted fw-normal">({{ data.field_types.get(field, 'unknown') }})</small>
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in data.results %}
            <tr>
                {% for val in row %}
                <td>{{ val }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <script>
        var dataTable = new DataTable('#selftools-datastore-table-results', {
            layout: {
                topStart: {
                    pageLength: {
                        menu: [ 10, 25, 50, 100, 1000 ]
                    },
                    buttons: [
                        'csv'
                    ],  
                },
                topEnd: {
                    searchBuilder: {},
                    search: {
                        placeholder: 'Search here'
                    }
                },
            }
        });
    </script>
</div>
