{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "My Profile" %}{% endblock %}

{% block content %}
<div class="container">
  <h1 class="h1">{% trans "My Profile" %}</h1>

  <div class="card-grid">
    <div class="card">
      <h2 class="h2">{% trans "Account" %}</h2>
      <form method="post" enctype="multipart/form-data" class="form">
        {% csrf_token %}
        <input type="hidden" name="action" value="profile" />

        <div class="grid-3">
          <div>
            <label for="id_username">{% trans "Username" %}</label>
            {{ u_form.username }}
            {% if u_form.username.errors %}<div class="error">{{ u_form.username.errors|striptags }}</div>{% endif %}
          </div>
          <div>
            <label for="id_first_name">{% trans "First name" %}</label>
            {{ u_form.first_name }}
            {% if u_form.first_name.errors %}<div class="error">{{ u_form.first_name.errors|striptags }}</div>{% endif %}
          </div>
          <div>
            <label for="id_last_name">{% trans "Last name" %}</label>
            {{ u_form.last_name }}
            {% if u_form.last_name.errors %}<div class="error">{{ u_form.last_name.errors|striptags }}</div>{% endif %}
          </div>
        </div>

        <div>
          <label for="id_email">{% trans "Email" %}</label>
          {{ u_form.email }}
          {% if u_form.email.errors %}<div class="error">{{ u_form.email.errors|striptags }}</div>{% endif %}
        </div>

        <div class="grid-2" style="align-items:flex-end; gap:24px;">
          <div>
            <label for="id_phone">{% trans "Phone" %}</label>
            {{ p_form.phone }}
            {% if p_form.phone.errors %}<div class="error">{{ p_form.phone.errors|striptags }}</div>{% endif %}
          </div>
          <div>
            <label for="id_language">{% trans "Preferred Language" %}</label>
            {{ p_form.language }}
            {% if p_form.language.errors %}<div class="error">{{ p_form.language.errors|striptags }}</div>{% endif %}
          </div>
        </div>

        <div class="grid-2" style="align-items:flex-end; gap:24px;">
          <div>
            <label for="id_timezone">{% trans "Timezone" %}</label>
            {{ p_form.timezone }}
            {% if p_form.timezone.errors %}<div class="error">{{ p_form.timezone.errors|striptags }}</div>{% endif %}
          </div>
          <div>
            <label for="id_address">{% trans "Address" %}</label>
            {{ p_form.address }}
            {% if p_form.address.errors %}<div class="error">{{ p_form.address.errors|striptags }}</div>{% endif %}
          </div>
        </div>

        <div class="grid-2" style="align-items:center; gap:24px;">
          <div>
            <label for="id_avatar">{% trans "Avatar" %}</label>
            {{ p_form.avatar }}
            {% if p_form.avatar.errors %}<div class="error">{{ p_form.avatar.errors|striptags }}</div>{% endif %}
          </div>
          <div>
            {% if request.user.profile and request.user.profile.avatar %}
              <img src="{{ request.user.profile.avatar.url }}" alt="avatar" style="height:64px; width:64px; border-radius:50%; object-fit:cover;" />
            {% endif %}
          </div>
        </div>

        <div class="actions">
          <button type="submit" class="btn">{% trans "Save Changes" %}</button>
        </div>
      </form>
    </div>

    <div class="card">
      <h2 class="h2">{% trans "Change Password" %}</h2>
      <form method="post" class="form">
        {% csrf_token %}
        <input type="hidden" name="action" value="password" />
        <div>
          <label for="id_old_password">{% trans "Current password" %}</label>
          {{ pwd_form.old_password }}
          {% if pwd_form.old_password.errors %}<div class="error">{{ pwd_form.old_password.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label for="id_new_password1">{% trans "New password" %}</label>
          {{ pwd_form.new_password1 }}
          {% if pwd_form.new_password1.errors %}<div class="error">{{ pwd_form.new_password1.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label for="id_new_password2">{% trans "Confirm new password" %}</label>
          {{ pwd_form.new_password2 }}
          {% if pwd_form.new_password2.errors %}<div class="error">{{ pwd_form.new_password2.errors|striptags }}</div>{% endif %}
        </div>
        <div class="actions">
          <button type="submit" class="btn">{% trans "Update Password" %}</button>
        </div>
      </form>
    </div>

  </div>
</div>
{% endblock %}