{% extends 'base.html' %}
{% load static %}
{% load form_tags %}

{% block title %}{{ form.title }} - Form Builder{% endblock %}

{% block extra_css %}
<style>
    .field-group {
        margin-bottom: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h2 class="mb-0">{{ form.title }}</h2>
                {% if form.description %}
                    <p class="mb-0 mt-2">{{ form.description|render_markdown }}</p>
                {% endif %}
            </div>
            
            <div class="card-body">
                {% if not form.can_accept_submissions %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {% if form.is_expired %}
                            This form has expired and is no longer accepting submissions.
                        {% elif form.is_submission_limit_reached %}
                            This form has reached its submission limit.
                        {% else %}
                            This form is currently inactive.
                        {% endif %}
                    </div>
                {% else %}
                    <form method="post" action="{% url 'form_submit' form.pk %}" enctype="multipart/form-data" id="dynamic-form">
                        {% csrf_token %}
                        
                        {% for field in dynamic_form %}
                            <div class="field-group" data-field-id="{{ field.name|extract_field_id }}" >
                                
                                 <label for="{{ field.id_for_label }}" class="form-label">
                                     {{ field.label }}
                                     {% if field.field.required %}
                                     <span class="text-danger">*</span>
                                     {% endif %}
                                </label>
                                {% if field.field.widget.input_type == 'checkbox' or field.field.widget.input_type == 'radio' %}
                                    {% for option in field %}
                                        <div class="form-check">
                                            <input type="{{ option.data.type }}" class="form-check-input" id="{{ option.id_for_label }}" name="{{ option.data.name }}" value="{{ option.data.value }}" {% if option.data.selected %}checked{% endif %}>
                                            <label class="form-check-label" for="{{ option.id_for_label }}">{{ option.choice_label }}</label>
                                        </div>
                                    {% endfor %}
                                {% elif field.field.widget.input_type == 'select' %}
                                    {{ field|add_class:"form-select" }}
                                {% else %}
                                    {{ field|add_class:"form-control" }}
                                {% endif %}
                                
                                {% if field.help_text %}
                                    <div class="form-text">{{ field.help_text }}</div>
                                {% endif %}
                                
                                {% if field.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in field.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i>Submit Form
                            </button>
                        </div>
                    </form>
                {% endif %}
            </div>
            
            <div class="card-footer text-muted">
                <small>
                    <i class="fas fa-info-circle me-1"></i>
                    Fields marked with <span class="text-danger">*</span> are required
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}