{% extends 'layouts/box.html' %} {% block content %}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card" style="border-width: 0px">
        <div class="card-body">
          {% if onboarding %}
          <h1 class="card-title mb-4">Complete your Profile</h1>
          {% else %}
          <h1 class="card-title mb-4">Edit your Profile</h1>
          {% endif %}

          <div class="text-center mb-4">
            <img
              id="avatar"
              class="rounded-circle object-cover border"
              src="{{ user.profile.avatar }}"
              alt="Avatar"
              style="width: 150px; height: 150px"
            />
            <div class="mt-2">
              <h2 id="displayname" class="fw-bold">
                {{ user.profile.displayname|default:"" }}
              </h2>
              <div class="text-muted">@{{ user.username }}</div>
            </div>
          </div>

          <form method="POST" enctype="multipart/form-data">
            {% csrf_token %} {% for field in form %}
            <div class="mb-3">
              <label for="{{ field.id_for_label }}" class="form-label"
                >{{ field.label_tag }}</label
              >
              {{ field }} {% if field.errors %}
              <div class="invalid-feedback">
                {% for error in field.errors %} {{ error }} {% endfor %}
              </div>
              {% endif %}
            </div>
            {% endfor %}
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">Submit</button>
              {% if onboarding %}
              <a class="btn btn-secondary" href="{% url 'home' %}">Skip</a>
              {% else %}
              <a
                class="btn btn-secondary"
                href="{{ request.META.HTTP_REFERER }}"
                >Cancel</a
              >
              {% endif %}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Update avatar preview
  const fileInput = document.querySelector('input[type="file"]');
  const avatarImage = document.getElementById("avatar");

  fileInput.addEventListener("change", (event) => {
    const file = event.target.files[0];
    if (file && file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = (e) => {
        avatarImage.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  });

  // Update display name preview
  const displayNameInput = document.getElementById("id_displayname");
  const displayNameOutput = document.getElementById("displayname");

  displayNameInput.addEventListener("input", (event) => {
    displayNameOutput.textContent = event.target.value || "{{ user.username }}"; // Fallback to username if empty
  });
</script>

{% endblock %}