<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="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.field_verbose_name }}</span>
            </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>
            <p class="mt-3 text-sm leading-6 text-gray-600">Tags must be enclosed inside the "
              " and comma separated.</p>
          </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>

