<div class="mb-6 text-center">
  <h1 class="text-2xl font-semibold text-white">Change Your Look</h1>
  <p class="text-sm text-gray-400 mt-1">Pick a new profile photo.</p>
</div>

<div class="bg-surface-light rounded-xl glow border border-white/[0.04] p-6 max-w-lg mx-auto">
  <div class="mb-6">
    <img src="/img/{{session.avatar}}" alt="avatar"
      class="w-20 h-20 rounded-full border border-white/10 bg-surface object-cover">
  </div>
  <div id="error" class="bg-red-500/10 text-red-400 text-sm p-3 rounded-lg mb-4 hidden"></div>

  <form id="avatarForm">
    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-300 mb-1">Pick a photo</label>
      <input type="file" id="avatar" name="avatar" accept="image/*" class="hidden">
      <div class="flex items-center gap-3">
        <button type="button" onclick="document.getElementById('avatar').click()"
          class="py-1 px-3 rounded-md text-sm bg-accent/10 text-accent hover:bg-accent/20 transition">
          Choose file
        </button>
        <span id="avatarFileName" class="text-sm text-gray-500">No file chosen</span>
      </div>
    </div>
    <div class="flex gap-3">
      <button type="submit"
        class="bg-accent-dim text-white px-4 py-2 rounded-lg hover:bg-accent text-sm transition btn-glow font-medium">
        Save
      </button>
      <a href="/" class="px-4 py-2 rounded-lg border border-white/10 text-gray-300 hover:text-gray-200 hover:border-white/20 text-sm transition">
        Cancel
      </a>
    </div>
  </form>
</div>

<script>
document.getElementById('avatar').addEventListener('change', (e) => {
  const file = e.target.files[0];
  document.getElementById('avatarFileName').textContent = file ? file.name : 'No file chosen';
});

document.getElementById('avatarForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const errorEl = document.getElementById('error');
  errorEl.classList.add('hidden');

  const formData = new FormData();
  const file = document.getElementById('avatar').files[0];
  if (file)
    formData.append('avatar', file);

  const res = await fetch('/profile/avatar', {
    method: 'POST',
    body: formData,
  });
  const data = await res.json();
  if (data.success)
    location.href = data.redirect;
  else {
    errorEl.textContent = data.message;
    errorEl.classList.remove('hidden');
  }
});
</script>
