{% extends 'base_app.html' %}

{% block content %}
<div class="max-w-4xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Instellingen</h1>
        <p class="mt-1 text-sm text-gray-600">Beheer je persoonlijke gegevens en accountvoorkeuren.</p>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6 bg-gray-50">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Mijn Profiel</h3>
        </div>

        <form method="post" class="divide-y divide-gray-200">
            {% csrf_token %}
            <div class="px-4 py-6 sm:p-6 space-y-6">
                {% for field in form %}
                    <div>
                        <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
                            {{ field.label }}
                        </label>
                        <div class="mt-1">
                            {{ field }}
                        </div>
                        {% if field.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ field.errors.0 }}</p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                    Opslaan
                </button>
            </div>
        </form>

{#        <form method="post" class="divide-y divide-gray-200">#}
{#            {% csrf_token %}#}
{#            <div class="px-4 py-6 sm:p-6 space-y-6">#}
{##}
{#                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">#}
{#                    <div class="sm:col-span-3">#}
{#                        <label class="block text-sm font-medium text-gray-700">Voornaam</label>#}
{#                        <input type="text" name="first_name" value="{{ form.first_name.value|default:'' }}"#}
{#                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">#}
{#                    </div>#}
{##}
{#                    <div class="sm:col-span-3">#}
{#                        <label class="block text-sm font-medium text-gray-700">Achternaam</label>#}
{#                        <input type="text" name="last_name" value="{{ form.last_name.value|default:'' }}"#}
{#                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">#}
{#                    </div>#}
{##}
{#                    <div class="sm:col-span-4">#}
{#                        <label class="block text-sm font-medium text-gray-700">E-mailadres</label>#}
{#                        <input type="email" name="email" value="{{ form.email.value|default:'' }}"#}
{#                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{##}
{#            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">#}
{#                <button type="submit"#}
{#                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">#}
{#                    Wijzigingen opslaan#}
{#                </button>#}
{#            </div>#}
{#        </form>#}
    </div>
</div>
{% endblock %}