{% extends "base.html" %}
{% block title %}{{ profile.name }} – Skins & Pins{% endblock %}

{% block content %}
<div class="page">
  <div class="page-header">
    <a href="javascript:history.back()" style="color:var(--text-muted); font-size:0.9rem;">← Back</a>
  </div>

  <div class="card" style="display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2rem 1rem;">
    {% if profile.avatar and profile.avatar.startswith('/') %}
      <img src="{{ profile.avatar }}" alt="{{ profile.name }}"
           style="width:6rem; height:6rem; border-radius:50%; object-fit:cover; border:3px solid var(--accent);">
    {% else %}
      <div style="font-size:4rem; line-height:1;">{{ profile.avatar or '👤' }}</div>
    {% endif %}

    <div style="text-align:center;">
      <h1 style="font-size:1.4rem; margin-bottom:0.25rem;">{{ profile.name }}</h1>
      <div style="color:var(--text-muted); font-size:0.95rem;">
        Handicap <strong style="color:var(--text);">{{ profile.handicap if profile.handicap is not none else '—' }}</strong>
      </div>
    </div>
  </div>

  {% if games_played > 0 %}
  <div class="stats-row">
    <div class="stat-card">
      <div class="stat-value">{{ games_played }}</div>
      <div class="stat-label">Games played</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ victories }}</div>
      <div class="stat-label">Victories</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">{{ win_pct }}%</div>
      <div class="stat-label">Win rate</div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}