{% extends "base.html" %}

{% load bootstrap5 %}

{% block content %}
    <h2>{{ list.name }}</h2>
    
    <div class="mb-3">
        <a href="{% url 'playground' %}" class="btn btn-secondary">
            <i class="bi bi-house"></i> Back to Home
        </a>
        <a href="{% url 'add_column' list.pk %}" class="btn btn-info">
            <i class="bi bi-columns"></i> Manage Columns
        </a>
        <a href="{% url 'add_row' list.pk %}" class="btn btn-success">
            <i class="bi bi-plus-circle"></i> Add New Row
        </a>
    </div>

    {% if not columns %}
        <div class="alert alert-warning">
            <strong>No columns defined yet!</strong> 
            <a href="{% url 'add_column' list.pk %}">Add columns</a> to this table first before adding data.
        </div>
    {% elif not rows %}
        <div class="alert alert-info">
            <strong>No data yet!</strong> 
            <a href="{% url 'add_row' list.pk %}">Add your first row</a> to populate this table.
        </div>
    {% else %}
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Row #</th>
                        {% for column in columns %}
                            <th>
                                {{ column.name }}
                                <br>
                                <small class="text-muted">({{ column.type }})</small>
                            </th>
                        {% endfor %}
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row_item in table_data %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            {% for entry_value in row_item.entries %}
                                <td>
                                    {% if entry_value == True %}
                                        <span class="badge bg-success">Yes</span>
                                    {% elif entry_value == False %}
                                        <span class="badge bg-danger">No</span>
                                    {% elif entry_value %}
                                        {{ entry_value }}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                            <td>
                                <a href="{% url 'delete_row' list.pk row_item.row.pk %}" 
                                   class="btn btn-sm btn-danger"
                                   onclick="return confirm('Are you sure you want to delete this row?');">
                                    Delete
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <div class="mt-3">
            <p class="text-muted">
                <strong>Total Rows:</strong> {{ rows.count }}
            </p>
        </div>
    {% endif %}

{% endblock content %}