{% extends "base.html" %}

{% block title %}Profile{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
  <div class="rounded-xl border border-gray-300 bg-white p-6">

    <div class="flex items-center gap-6 mb-8">

      <div class="flex flex-col items-center gap-3">

        <img
          id="profileAvatar"
          src="{{ profile_picture }}"
          alt="Profile picture"
          class="w-32 h-32 rounded-full border-2 border-[#1a26c9] object-cover bg-slate-100"
        />

        <div id="svgRenderZone" class="hidden"></div>

        {% if is_owner %}
        <form
          method="POST"
          action="/profile/avatar"
          enctype="multipart/form-data"
          class="flex flex-col items-center gap-2"
        >
          <input
            type="file"
            name="avatar"
            accept=".svg,image/svg+xml"
            class="text-sm"
          >

          <button
            type="submit"
            class="rounded-lg bg-[#1a26c9] px-4 py-2 text-white font-medium hover:bg-[#3b4de0] transition-colors"
          >
            Upload
          </button>
        </form>

        {% if has_custom_avatar %}
        <form method="POST" action="/profile/avatar/delete">
          <button
            id="deleteAvatarBtn"
            type="submit"
            class="rounded-lg bg-red-600 px-4 py-2 text-white font-medium hover:bg-red-500 transition-colors"
          >
            Delete picture
          </button>
        </form>
        {% endif %}
        {% endif %}

      </div>

      <div>
        <p class="text-xs uppercase tracking-widest text-gray-500 mb-1">
          User
        </p>

        <h1 class="text-3xl font-bold text-[#1a26c9]">
          {{ viewed_user }}
        </h1>

        <p class="text-sm text-gray-500 mt-2">
          Role: {{ viewed_role }}
        </p>
      </div>

    </div>

    <div>
      <p class="text-xs uppercase tracking-widest text-gray-500 mb-2">
        Biography
      </p>

      <form method="POST" action="/profile" class="space-y-4">

        <div
          id="bioDisplay"
          class="rounded-lg border border-gray-300 bg-slate-50 p-4 text-gray-800 whitespace-pre-wrap min-h-[120px]"
        >
          {{ profile if profile else 'No biography yet.' }}
        </div>

        {% if is_owner %}
        <textarea
          id="bioInput"
          name="profile"
          class="hidden w-full rounded-lg border border-gray-300 p-4 text-gray-800 focus:outline-none focus:ring-2 focus:ring-[#1a26c9]"
          rows="6"
        >{{ profile if profile else '' }}</textarea>

        <div class="flex gap-3">
          <button
            id="changeProfileBtn"
            type="button"
            class="rounded-lg bg-[#1a26c9] px-4 py-2 text-white font-medium hover:bg-[#3b4de0] transition-colors"
          >
            Change
          </button>
        </div>
        {% endif %}

      </form>
    </div>

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

{% block scripts %}
<script src="/static/js/profile.js"></script>
{% endblock %}