{% extends "base.html" %}

{% load bootstrap5 %}

{% block content %}
    <h3>Add New Row to "{{ 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>
    </div>

    {% if not columns_with_types %}
        <div class="alert alert-warning">
            <strong>No columns defined!</strong> 
            <a href="{% url 'add_column' list.pk %}">Add columns</a> to this table first before adding data.
        </div>
    {% else %}
        <form action="" method="post" class="form">
            {% csrf_token %}
            
            <div class="card">
                <div class="card-body">
                    {% for col_info in columns_with_types %}
                        <div class="mb-3">
                            <label for="column_{{ col_info.column.pk }}" class="form-label">
                                <strong>{{ col_info.column.name }}</strong>
                                {% if col_info.column.required %}<span class="text-danger">*</span>{% endif %}
                                <br>
                                <small class="text-muted">Type: {{ col_info.type_name }}</small>
                                {% if col_info.column.description %}
                                    <br>
                                    <small class="text-muted">{{ col_info.column.description }}</small>
                                {% endif %}
                            </label>
                            
                            {% if col_info.type_name == "BinaryColumn" %}
                                <select name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-select" {% if col_info.column.required %}required{% endif %}>
                                    <option value="">-- Select --</option>
                                    <option value="true">Yes</option>
                                    <option value="false">No</option>
                                </select>
                            {% elif col_info.type_name == "MultipleLineTextColumn" %}
                                <textarea name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-control" rows="3" {% if col_info.column.required %}required{% endif %}></textarea>
                            {% elif col_info.type_name == "DateTimeColumn" %}
                                <input type="datetime-local" name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-control" {% if col_info.column.required %}required{% endif %}>
                            {% elif col_info.type_name == "NumberColumn" or col_info.type_name == "CurrencyColumn" %}
                                <input type="number" step="0.01" name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-control" {% if col_info.column.required %}required{% endif %}>
                            {% elif col_info.type_name == "URLColumn" %}
                                <input type="url" name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-control" {% if col_info.column.required %}required{% endif %}>
                            {% else %}
                                <input type="text" name="column_{{ col_info.column.pk }}" id="column_{{ col_info.column.pk }}" class="form-control" {% if col_info.column.required %}required{% endif %}>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Save Row</button>
                <a href="{% url 'list_detail' list.pk %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    {% endif %}

{% endblock content %}