{% extends "base.html" %}
{% block title %}{{ table_name }} - SQLite DBaaS{% endblock %}
{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">{{ table_name }}</h1>
        <p class="page-subtitle">{{ total }} rows</p>
    </div>
    <a href="/admin/dashboard" class="m3-button m3-button--text">
        <span class="material-symbols-outlined">arrow_back</span>
        Dashboard
    </a>
</div>

<!-- Columns -->
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">view_column</span>
        </div>
        <div>
            <div class="m3-card-title">Columns</div>
            <div class="m3-card-subtitle">{{ columns|length }} columns</div>
        </div>
    </div>
    
    <div class="m3-table-container">
        <table class="m3-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Nullable</th>
                    <th>Default</th>
                    <th>PK</th>
                </tr>
            </thead>
            <tbody>
                {% for col in columns %}
                <tr>
                    <td>{{ col.cid }}</td>
                    <td class="mono">{{ col.name }}</td>
                    <td>{{ col.type }}</td>
                    <td>{% if col.notnull %}No{% else %}Yes{% endif %}</td>
                    <td class="mono">{{ col.dflt_value or '-' }}</td>
                    <td>{% if col.pk %}✓{% else %}-{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Indexes -->
{% if indexes %}
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">key</span>
        </div>
        <div>
            <div class="m3-card-title">Indexes</div>
        </div>
    </div>
    
    <div class="m3-table-container">
        <table class="m3-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Unique</th>
                    <th>Origin</th>
                </tr>
            </thead>
            <tbody>
                {% for idx in indexes %}
                <tr>
                    <td class="mono">{{ idx.name }}</td>
                    <td>{% if idx.unique %}Yes{% else %}No{% endif %}</td>
                    <td>{{ idx.origin }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- Data -->
<div class="m3-card">
    <div class="m3-card-header">
        <div class="m3-card-icon">
            <span class="material-symbols-outlined">table_rows</span>
        </div>
        <div>
            <div class="m3-card-title">Data</div>
            <div class="m3-card-subtitle">Page {{ page }} of {{ total_pages }}</div>
        </div>
    </div>
    
    {% if rows %}
    <div class="m3-table-container" style="max-height: 500px; overflow: auto;">
        <table class="m3-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="mono">{{ (row[col.name] or 'NULL')|truncate(100) }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="m3-pagination">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}" class="m3-button m3-button--outlined">
            <span class="material-symbols-outlined">chevron_left</span>
        </a>
        {% endif %}
        
        <span class="m3-pagination-info">Page {{ page }} of {{ total_pages }}</span>
        
        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}" class="m3-button m3-button--outlined">
            <span class="material-symbols-outlined">chevron_right</span>
        </a>
        {% endif %}
    </div>
    {% endif %}
    
    {% else %}
    <div class="empty-state">
        <span class="material-symbols-outlined empty-icon">table_rows</span>
        <div class="empty-title">No data</div>
        <div class="empty-description">This table is empty</div>
    </div>
    {% endif %}
</div>
{% endblock %}