{% extends "base.html" %}
{% block title %}Profile — SimpleAudit{% endblock %}
{% block content %}
<h1 class="text-lg font-semibold text-gray-100 mb-6">Profile</h1>

{% if error %}
<div class="mb-4 px-4 py-3 rounded-lg text-sm bg-red-900/30 border border-red-800 text-red-300">{{ error }}</div>
{% endif %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
  <!-- Avatar (Gravatar) -->
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-5">
    <h2 class="text-sm font-semibold text-gray-300 mb-4">Profile image</h2>
    <div class="flex items-center gap-4">
      {% if gravatar_url %}
      <img src="{{ gravatar_url }}" alt="{{ profile_user.username }}" class="w-16 h-16 rounded-full" referrerpolicy="no-referrer">
      {% else %}
      <div class="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center text-xl font-bold text-accent">{{ profile_user.username|first|upper }}</div>
      {% endif %}
      <div class="text-sm">
        <p class="text-gray-400">
          {% if gravatar_url %}
          Your avatar comes from <a href="https://gravatar.com" target="_blank" rel="noopener" class="text-accent hover:underline">Gravatar</a>, matched to your email.
          {% else %}
          Add an email address to get a Gravatar avatar.
          {% endif %}
        </p>
        <a href="https://gravatar.com/profile/avatars" target="_blank" rel="noopener"
           class="inline-block mt-2 px-3 py-1.5 rounded-lg text-xs bg-surface-overlay border border-gray-700 text-gray-200 hover:border-accent/40 transition-colors">
          Update image on Gravatar ↗
        </a>
      </div>
    </div>
  </div>

  <!-- Account details -->
  <form method="post" action="/profile/" class="bg-surface-raised rounded-xl border border-gray-800 p-5">
    {% csrf_token %}
    <input type="hidden" name="form" value="details">
    <h2 class="text-sm font-semibold text-gray-300 mb-4">Account details</h2>
    <div class="space-y-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="username">Username</label>
        <input id="username" name="username" type="text" maxlength="150" value="{{ profile_user.username }}" required
               class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="email">Email</label>
        <input id="email" name="email" type="email" value="{{ profile_user.email }}"
               class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs text-gray-500 mb-1" for="first_name">First name</label>
          <input id="first_name" name="first_name" type="text" maxlength="150" value="{{ profile_user.first_name }}"
                 class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
        </div>
        <div>
          <label class="block text-xs text-gray-500 mb-1" for="last_name">Last name</label>
          <input id="last_name" name="last_name" type="text" maxlength="150" value="{{ profile_user.last_name }}"
                 class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
        </div>
      </div>
    </div>
    <div class="mt-4">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-accent text-white hover:bg-accent-hover transition-colors">Save details</button>
    </div>
  </form>

  <!-- Password -->
  <form method="post" action="/profile/" class="bg-surface-raised rounded-xl border border-gray-800 p-5">
    {% csrf_token %}
    <input type="hidden" name="form" value="password">
    {% if has_local_password %}
    <h2 class="text-sm font-semibold text-gray-300 mb-4">Change password</h2>
    <div class="space-y-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="current_password">Current password</label>
        <input id="current_password" name="current_password" type="password" autocomplete="current-password"
               class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="new_password">New password</label>
        <input id="new_password" name="new_password" type="password" autocomplete="new-password" required
               class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
    </div>
    <div class="mt-4">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-surface-overlay border border-gray-700 text-gray-200 hover:border-accent/40 transition-colors">Update password</button>
    </div>
    {% else %}
    <h2 class="text-sm font-semibold text-gray-300 mb-4">Set a password</h2>
    <div class="space-y-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1" for="new_password">New password</label>
        <input id="new_password" name="new_password" type="password" autocomplete="new-password"
               class="w-full px-3 py-2 rounded-lg text-sm bg-surface border border-gray-700 text-gray-200 focus:outline-none focus:border-accent/50">
      </div>
      {% if is_sso %}
      <p class="text-xs text-gray-600">You sign in with WorkOS. Optionally add a local password so you can also sign in with your username and password.</p>
      {% else %}
      <p class="text-xs text-gray-600">Set a password to sign in with your username and password.</p>
      {% endif %}
    </div>
    <div class="mt-4">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-surface-overlay border border-gray-700 text-gray-200 hover:border-accent/40 transition-colors">Set password</button>
    </div>
    {% endif %}
  </form>
</div>

<!-- Read-only info -->
<div class="mt-4 bg-surface-raised rounded-xl border border-gray-800 p-5">
  <h2 class="text-sm font-semibold text-gray-300 mb-3">Account info</h2>
  <dl class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
    <div>
      <dt class="text-xs text-gray-500">Member since</dt>
      <dd class="text-gray-300 mt-0.5">{{ profile_user.date_joined|date:"Y-m-d" }}</dd>
    </div>
    <div>
      <dt class="text-xs text-gray-500">Status</dt>
      <dd class="mt-0.5">
        {% if profile_user.is_active %}<span class="text-emerald-400">Active</span>{% else %}<span class="text-red-400">Inactive</span>{% endif %}
      </dd>
    </div>
    <div>
      <dt class="text-xs text-gray-500">Role</dt>
      <dd class="text-gray-300 mt-0.5">
        {% if profile_user.is_superuser %}<span class="text-[10px] bg-accent/20 text-accent rounded px-1.5 py-0.5">Super admin</span>{% else %}Member{% endif %}
      </dd>
    </div>
  </dl>
</div>
{% endblock %}