{% extends "base.html" %}
{% block title %}{{ table_name }} - SQLite Admin{% endblock %}
{% block content %}
<div class="table-view">
    <div class="page-header">
        <h1>📋 Table: {{ table_name }}</h1>
        <a href="/admin/dashboard" class="btn-secondary">← Back to Dashboard</a>
    </div>
    
    <!-- Columns Info -->
    <div class="card">
        <h2>Columns</h2>
        <table class="data-table">
            <thead>
                <tr>
                    <th>CID</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Not Null</th>
                    <th>Default</th>
                    <th>PK</th>
                </tr>
            </thead>
            <tbody>
                {% for col in columns %}
                <tr>
                    <td>{{ col.cid }}</td>
                    <td class="code">{{ col.name }}</td>
                    <td>{{ col.type }}</td>
                    <td>{{ col.notnull }}</td>
                    <td class="code">{{ col.dflt_value or '-' }}</td>
                    <td>{{ col.pk }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Indexes -->
    {% if indexes %}
    <div class="card">
        <h2>Indexes</h2>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Sequence</th>
                    <th>Name</th>
                    <th>Unique</th>
                    <th>Origin</th>
                </tr>
            </thead>
            <tbody>
                {% for idx in indexes %}
                <tr>
                    <td>{{ idx.seq }}</td>
                    <td class="code">{{ idx.name }}</td>
                    <td>{{ idx.unique }}</td>
                    <td>{{ idx.origin }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
    
    <!-- Data -->
    <div class="card">
        <h2>Data ({{ total }} rows)</h2>
        {% if rows %}
        <div class="table-scroll">
            <table class="data-table">
                <thead>
                    <tr>
                        {% for col in columns %}
                        <th>{{ col.name }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    <tr>
                        {% for col in columns %}
                        <td class="code">{{ row[col.name]|truncate(100) if row[col.name] else '<span class="null">NULL</span>' }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if total_pages > 1 %}
        <div class="pagination">
            <span>Page {{ page }} of {{ total_pages }}</span>
            {% if page > 1 %}
            <a href="?page={{ page - 1 }}" class="btn-small">← Prev</a>
            {% endif %}
            {% if page < total_pages %}
            <a href="?page={{ page + 1 }}" class="btn-small">Next →</a>
            {% endif %}
        </div>
        {% endif %}
        {% else %}
        <p class="empty-state">No data in this table</p>
        {% endif %}
    </div>
</div>
{% endblock %}