<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-10 divide-y divide-gray-900/10">
    <div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3">
        <div class="px-4 sm:px-0">
            <h2 class="text-base font-semibold leading-7 text-gray-900">Update Tag</h2>
            <p class="mt-1 text-sm leading-6 text-gray-600">Update your user tag.</p>
        </div>
        <form action="{% url 'tag_me:edit-tag' usertag.id %}"
              method="post"
              class="mt-2 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
            {% csrf_token %}
            <div class="px-4 py-6 sm:p-8">
                <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="col-span-full">
                        <label for="id_user"
                               class="block text-sm font-medium leading-6 text-gray-900">User</label>
                        <div class="mt-1">
                            <span id="id_user"
                                  name="user"
                                  rows="3"
                                  class="block w-full rounded-md border-0 p-1.5 bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">{{ usertag.user }}</span>
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label for="id_model_verbose_name"
                               class="block text-sm font-medium leading-6 text-gray-900">Feature Name</label>
                        <div class="mt-1">
                            <span id="id_model_verbose_name"
                                  name="model_verbose_name"
                                  rows="3"
                                  class="block w-full rounded-md border-0 p-1.5 bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">{{ usertag.model_verbose_name }}</span>
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label for="id_field_verbose_name"
                               class="block text-sm font-medium leading-6 text-gray-900">Tagged Item</label>
                        <div class="mt-1">
                            <span id="id_field_verbose_name"
                                  name="field_verbose_name"
                                  rows="3"
                                  class="block w-full rounded-md border-0 p-1.5 bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">{{ usertag.field_verbose_name }}</span>
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label for="id_ui_display_name"
                               class="block text-sm font-medium leading-6 text-gray-900">UI Display Name</label>
                        <div class="mt-1">
                            <input id="id_ui_display_name"
                                   name="tags"
                                   value="{{ usertag.ui_display_name }}"
                                   rows="3"
                                   class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                        </input>
                    </div>
                </div>
                <div class="col-span-full">
                    <label for="id_tags"
                           class="block text-sm font-medium leading-6 text-gray-900">Tags</label>
                    <div class="mt-1">
                        <input id="id_tags"
                               name="tags"
                               value="{{ usertag.tags }}"
                               rows="3"
                               class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                    </input>
                </div>
            </div>
        </div>
    </div>
    <div class="flex items-center justify-start gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
        <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
        <button type="submit"
                class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            Save
        </button>
    </div>
    {% if form.errors %}
        <div class="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
             role="alert">
            <strong class="font-bold">Please correct the following errors:</strong>
            <ul class="list-disc list-inside mt-2">
                {% for field in form %}
                    {% if field.errors %}
                        {% for error in field.errors %}
                            <li>
                                {{ field.label_tag }}
                                {{ error }}
                            </li>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    {% endif %}
</form>
</div>
</div>
