{% extends 'base.html' %}

{% block title %}Edit Profile{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-lg shadow-lg border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-semibold text-gray-900">Edit Your Profile</h2>
        </div>
        <div class="px-6 py-6">
            <form method="post" enctype="multipart/form-data" class="space-y-6">
                {% csrf_token %}
                
                {% for field in form %}
                    <div>
                        <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-900 mb-1">
                            {{ field.label }}
                        </label>
                        
                        {% if field.field.widget.input_type == 'file' %}
                            <input type="file" 
                                   name="{{ field.name }}" 
                                   id="{{ field.id_for_label }}"
                                   class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100"
                                   {% if field.field.required %}required{% endif %}>
                        {% elif field.field.widget.input_type == 'textarea' %}
                            <textarea name="{{ field.name }}" 
                                      id="{{ field.id_for_label }}"
                                      rows="4"
                                      class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-black focus:border-black"
                                      {% if field.field.required %}required{% endif %}
                                      placeholder="{{ field.field.widget.attrs.placeholder|default:'' }}">{{ field.value|default:'' }}</textarea>
                        {% elif field.field.widget.input_type == 'date' %}
                            <input type="date" 
                                   name="{{ field.name }}" 
                                   id="{{ field.id_for_label }}"
                                   value="{{ field.value|default:'' }}"
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-black focus:border-black"
                                   {% if field.field.required %}required{% endif %}>
                        {% else %}
                            <input type="{{ field.field.widget.input_type|default:'text' }}" 
                                   name="{{ field.name }}" 
                                   id="{{ field.id_for_label }}"
                                   value="{{ field.value|default:'' }}"
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-black focus:border-black"
                                   {% if field.field.required %}required{% endif %}
                                   placeholder="{{ field.field.widget.attrs.placeholder|default:'' }}">
                        {% endif %}
                        
                        {% if field.help_text %}
                            <p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
                        {% endif %}
                        
                        {% if field.errors %}
                            {% for error in field.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>
                {% endfor %}
                
                <div class="flex justify-between pt-4">
                    <a href="{% url 'accounts:profile' %}" 
                       class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}