{% load i18n widget_tweaks %}

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
    <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2 mb-6">
        <i data-lucide="users" class="w-5 h-5 text-temple-red"></i> {% trans "Interview Participants" %}
    </h3>

    <form method="post" class="space-y-6">
        {% csrf_token %}

        {% for field in form %}
            <div>
                <label for="{{ field.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                    {% if field.name == 'participants' %}
                        <i data-lucide="user-plus" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                    {% endif %}
                    {{ field.label }}
                </label>
                {{ field|attr:"class: w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                {% if field.errors %}
                    <div class="mt-1 text-sm text-red-600">{{ field.errors }}</div>
                {% endif %}
                {% if field.help_text %}
                    <p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
                {% endif %}
            </div>
        {% endfor %}

        <div class="flex gap-3 pt-4">
            <button type="submit" 
                    class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-medium text-white transition-all duration-200 bg-temple-red hover:bg-[#7a1a29] shadow-sm hover:shadow-md">
                <i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Participants" %}
            </button>
        </div>
    </form>
</div>

<script>
if (typeof lucide !== 'undefined') {
    lucide.createIcons();
}
</script>