{% extends "base.html" %}
<!-- prettier-ignore -->
{% block body %}

<!-- component -->
<div class="bg-gray-50 dark:bg-gray-900 h-screen pt-20">
  <section>
    <div class="w-full lg:w-4/12 px-4 mx-auto pt-6">
      <div>
        <!-- prettier-ignore -->
        <div class="w-full lg:max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800">
          <!-- prettier-ignore -->
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Edit your profile</h2>

          <!-- prettier-ignore -->
          <form class="mt-8 space-y-6 from" role="form" action="{{ url_for('user.profile') }}" method="post">
            {{ form.hidden_tag() }}
            <div>
              <!-- prettier-ignore -->
              {{form.name.label(class='block mb-2 text-sm font-medium text-gray-900 dark:text-white')}}
              {{form.name(autocomplete="off", class='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500')}}
            </div>
            <!-- prettier-ignore -->
             <div class="mb-3">
              {{form.avatar_img.label(class='block mb-2 text-sm font-medium text-gray-900 dark:text-white')}}
              {{form.avatar_img(class='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', id="avatar_img",
              value=current_user.avatar_img)}}
            </div>
            <button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save changes</button>
          </form>
        </div>
      </div>
    </div>
  </section>
</div>
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}