{% extends "admin/layout.html" %}
{% block content %}
<div class="flex justify-center mb-4">
  <img src="{{ url_for('static', filename='upload/profile_pics/'+user.gambar) }}" alt="avatar" class="h-32 w-32 rounded-full object-cover border-4 border-brand-100">
</div>
<form method="POST" action="" enctype="multipart/form-data">
  {{ form.hidden_tag() }}
  <div class="space-y-4 max-w-xl mx-auto">
    <div>
      <label class="label-field">Account Name</label>
      {% if form.username.errors %}{{ form.username(class="input-field border-red-400") }}
      {% else %}{{ form.username(class="input-field") }}{% endif %}
      {% for error in form.username.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>
      <label class="label-field">Email</label>
      {% if form.email.errors %}{{ form.email(class="input-field border-red-400") }}
      {% else %}{{ form.email(class="input-field") }}{% endif %}
      {% for error in form.email.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
    </div>
    <div>
      <label class="label-field">Role</label>
      {% if form.role.errors %}{{ form.role(class="input-field border-red-400") }}
      {% else %}{{ form.role(class="input-field") }}{% endif %}
    </div>
    <div>
      <label class="label-field">Biography</label>
      {% if form.biografi.errors %}{{ form.biografi(class="input-field border-red-400", rows="4") }}
      {% else %}{{ form.biografi(class="input-field", rows="4") }}{% endif %}
    </div>
    <div class="flex items-center gap-2">
      {{ form.active(class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500") }}
      {{ form.active.label(class="text-sm text-slate-700") }}
    </div>
    <div>
      <label class="label-field">Photo</label>
      {{ form.picture(class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100") }}
    </div>
    <div class="text-right">{{ form.submit(class="btn-primary") }}</div>
  </div>
</form>
{% endblock content %}