{% extends "base.html" %}
{% block title %}Profile — The Shooter's Network{% endblock %}
{% block content %}
<h1>Profile</h1>

{# ---- Avatar + display name ---- #}
<h2>Account</h2>
<form method="post" action="{{ url_for('auth.profile') }}"
      enctype="multipart/form-data"
      style="max-width:480px;">
  <input type="hidden" name="action" value="update_profile">

  <div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;">
    {% set av = current_user.effective_avatar_url %}
    {% if av %}
      <img src="{{ av }}" alt="Avatar"
           style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0;">
    {% else %}
      <div style="width:80px;height:80px;border-radius:50%;background:#e0e6f0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#888;">
        &#128100;
      </div>
    {% endif %}
    <div>
      <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">
        Profile picture
      </label>
      <input type="file" name="avatar" accept="image/*" style="font-size:0.9rem;">
      <div style="font-size:0.78rem;color:#aaa;margin-top:.2rem;">JPEG/PNG, max 1200 px, auto-resized.</div>
    </div>
  </div>

  <div style="margin-bottom:1rem;">
    <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">Display name</label>
    <input type="text" name="display_name"
           value="{{ current_user.display_name or '' }}"
           required
           style="width:100%;padding:.55rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
  </div>

  <div style="margin-bottom:1rem;">
    <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">Bio</label>
    <textarea name="bio" rows="4" placeholder="Tell others a bit about yourself…"
              style="width:100%;padding:.55rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;resize:vertical;">{{ current_user.bio or '' }}</textarea>
  </div>

  <div style="margin-bottom:1rem;">
    <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">Email</label>
    <input type="text" value="{{ current_user.email }}" disabled
           style="width:100%;padding:.55rem .75rem;border:1px solid #e0e0e0;border-radius:4px;font-size:0.95rem;background:#f5f5f5;color:#888;">
    <div style="font-size:0.78rem;color:#aaa;margin-top:.2rem;">
      Logged in via <strong>{{ current_user.provider.title() }}</strong>
    </div>
  </div>

  <div style="margin-bottom:1.25rem;">
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.95rem;">
      <input type="checkbox" name="show_equipment_public"
             {% if current_user.show_equipment_public %}checked{% endif %}
             style="width:1rem;height:1rem;">
      Show my equipment on my public profile
    </label>
  </div>

  <div style="display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;">
    <button type="submit"
            style="background:#1a1a2e;color:#fff;border:none;border-radius:4px;padding:.6rem 1.5rem;font-size:.95rem;cursor:pointer;">
      Save changes
    </button>
    <a href="{{ url_for('public_profile', user_id=current_user.id) }}"
       style="font-size:0.9rem;color:#1f77b4;" target="_blank">
      View my public profile &rarr;
    </a>
  </div>
</form>

{# ---- Change password (local accounts only) ---- #}
{% if current_user.provider == 'local' %}
<h2>Change password</h2>
<form method="post" action="{{ url_for('auth.profile') }}"
      style="max-width:480px;">
  <input type="hidden" name="action" value="change_password">

  <div style="margin-bottom:1rem;">
    <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">Current password</label>
    <input type="password" name="current_password" required
           style="width:100%;padding:.55rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:.95rem;">
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
    <div>
      <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">New password</label>
      <input type="password" name="new_password" required minlength="8"
             style="width:100%;padding:.55rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:.95rem;">
    </div>
    <div>
      <label style="display:block;font-size:.85rem;font-weight:600;color:#444;margin-bottom:.3rem;">Confirm</label>
      <input type="password" name="confirm_password" required minlength="8"
             style="width:100%;padding:.55rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:.95rem;">
    </div>
  </div>
  <button type="submit"
          style="background:#1a1a2e;color:#fff;border:none;border-radius:4px;padding:.6rem 1.5rem;font-size:.95rem;cursor:pointer;">
    Change password
  </button>
</form>
{% endif %}

{% endblock %}