{% extends "base.html" %}

{% load bootstrap5 %}

{% block content %}
    <h3>Manage Columns for "{{ list.name }}"</h3>
    
    <div class="mb-3">
        <a href="{% url 'list_detail' list.pk %}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Table Data
        </a>
        <a href="{% url 'playground' %}" class="btn btn-secondary">
            <i class="bi bi-house"></i> Back to Home
        </a>
    </div>
    
    {% if columns %}
        <h4>Existing Columns:</h4>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Data Type</th>
                    <th>Required</th>
                    <th>Unique</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for column in columns %}
                    <tr>
                        <td>{{ column.name }}</td>
                        <td><span class="badge bg-primary">{{ column.type }}</span></td>
                        <td>{% if column.required %}<span class="badge bg-warning">Required</span>{% else %}<span class="badge bg-secondary">Optional</span>{% endif %}</td>
                        <td>{% if column.unique %}<span class="badge bg-info">Unique</span>{% endif %}</td>
                        <td>
                            <a href="{% url 'delete_column' list.pk column.pk %}" 
                               class="btn btn-sm btn-danger"
                               onclick="return confirm('Are you sure you want to delete this column? This will delete all data in this column.');">
                                Delete
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="alert alert-info">
            No columns yet. Add your first column below!
        </div>
    {% endif %}

    <hr>
    <h4>Add New Column:</h4>
    <form action="" method="post" class="form">
        {% csrf_token %}
        {% bootstrap_form form %}

        {% buttons %}
            <button type="submit" class="btn btn-primary">Add Column</button>
        {% endbuttons %}
    </form>
{% endblock content %}