{% extends "base.html" %}

{% load legacy_filters %}
{% load tailwind_filters %}
{% load crispy_forms_filters %}

{% block title %}
    {% if view.title %}
        {{ view.title }}
    {% else %}
        {{ view|class_name }}
    {% endif %}
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold mb-6">
        {% if view.title %}
            {{ view.title }}
        {% elif view|class_name == "CreateViewClass" %}
            Create {{ model_verbose_name }}
        {% else %}
            Update {{ model_verbose_name }}
        {% endif %}
    </h1>

    <!-- Render the Form -->
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="flex flex-wrap items-center space-x-4">
            <!-- Show profile_picture -->
            <div class=" mb-4">
                {% if form.instance.profile and form.instance.profile.profile_picture %}
                    <div class="mb-2">
                        <img src="{{ form.instance.profile.profile_picture.url }}" alt="Profile Picture" class="max-w-xs border rounded" width=100>
                    </div>
                {% endif %}
                {{ form.profile_picture|as_crispy_field }}
            </div>

            <!-- Show signed_picture -->
            <div class=" mb-4">
                {% if form.instance.profile and form.instance.profile.signed_picture %}
                    <div class="mb-2">
                        <img src="{{ form.instance.profile.signed_picture.url }}" alt="Signed Picture" class="max-w-xs border rounded" width=100>
                    </div>
                {% endif %}
                {{ form.signed_picture|as_crispy_field }}
            </div>

            <!-- Render other form fields -->
            {% for field in form %}
                {% if field.name not in "profile_picture signed_picture" %}
                    <div class=" mb-4">
                        {{ field|as_crispy_field }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <div class="mt-4">
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                Save
            </button>
            <a href="{% url list_url_name %}" class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400">
                Cancel
            </a>
        </div>
    </form>
</div>
{% endblock %}
