{% extends "base.html" %}

{% load bootstrap5 %}

{% block content %}
    <h2>User Defined Tables</h2>
    <p>Create and manage your own custom tables with dynamic schemas.</p>
    
    <div class="container">
        <div class="mb-3">
            <a href="{% url 'add_table' %}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Create New Table
            </a>
        </div>
        
        {% if lists %}
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Table Name</th>
                        <th>Columns</th>
                        <th>Rows</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for list in lists %}
                        <tr>
                            <td><strong>{{ list.name }}</strong></td>
                            <td>{{ list.columns.count }}</td>
                            <td>{{ list.rows.count }}</td>
                            <td>
                                <a href='{% url "list_detail" list.pk %}' class="btn btn-sm btn-info">View Data</a>
                                <a href='{% url "add_column" list.pk %}' class="btn btn-sm btn-secondary">Manage Columns</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="alert alert-info">
                <p>No tables yet. Create your first table to get started!</p>
            </div>
        {% endif %}
    </div>

{% endblock content %}