{% extends "base.html" %}
{% block title %}{{ t('my_profile') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<div class="settings-grid">
  <!-- Sidebar -->
  <div class="settings-nav reveal">
    <div class="card text-center" style="margin-bottom:0.6rem;padding:0.8rem">
      {% if user.avatar %}
        <img src="{{ url_for('static', filename='uploads/'+user.avatar) }}" class="avatar" style="width:48px;height:48px;margin:0 auto">
      {% else %}
        <div class="avatar" style="width:48px;height:48px;margin:0 auto;background:var(--p-soft);display:flex;align-items:center;justify-content:center;font-size:1.1rem">U</div>
      {% endif %}
      <h3 style="margin-top:0.5rem;font-size:0.95rem">{{ user.display_name }}</h3>
      <p style="color:var(--mute);font-size:0.72rem">{{ user.email }}</p>
      <div style="margin-top:0.3rem"><span class="badge badge-green">#{{ user.numeric_id }}</span></div>
    </div>
    <a href="{{ url_for('web.profile') }}" class="active">{{ t('my_profile') }}</a>
    <a href="{{ url_for('web.wallet') }}">{{ t('wallet') }}</a>
    <a href="{{ url_for('auth.logout') }}" style="color:var(--d);margin-top:0.5rem;border-top:1px solid var(--border2);padding-top:0.5rem">{{ t('logout') }}</a>
  </div>

  <!-- Main -->
  <div class="settings-section">
    <div class="card reveal" style="margin-bottom:0.6rem">
      <h3 style="margin-bottom:0.6rem;color:var(--p);font-size:0.95rem">{{ t('edit_profile') }}</h3>
      <form method="POST" action="{{ url_for('web.profile_update') }}" enctype="multipart/form-data">
        <div class="grid grid-2" style="gap:0.5rem">
          <div>
            <label style="font-size:0.72rem;color:var(--mute)">{{ t('username') }}</label>
            <input class="input" name="username" value="{{ user.username }}" maxlength="60">
          </div>
          <div>
            <label style="font-size:0.72rem;color:var(--mute)">{{ t('email') }}</label>
            <input class="input" value="{{ user.email }}" disabled style="opacity:0.6">
          </div>
        </div>
        <div style="margin-top:0.4rem">
          <label style="font-size:0.72rem;color:var(--mute)">{{ t('bio') }}</label>
          <textarea class="input" name="bio" rows="2" maxlength="300">{{ user.bio or '' }}</textarea>
        </div>
        <div style="margin-top:0.4rem">
          <label style="font-size:0.72rem;color:var(--mute)">{{ t('avatar') }}</label>
          <input type="file" name="avatar" accept="image/*" class="input" style="padding:0.35rem">
        </div>
        <button type="submit" class="btn btn-primary btn-sm" style="margin-top:0.6rem">{{ t('save_changes') }}</button>
      </form>
    </div>

    <div class="card reveal" style="margin-bottom:0.6rem">
      <h3 style="margin-bottom:0.6rem;color:var(--a);font-size:0.95rem">{{ t('language') }}</h3>
      <form method="POST" action="{{ url_for('public.set_language') }}">
        <input type="hidden" name="region" value="{{ session.get('region','global') }}">
        <div class="flex" style="gap:0.3rem;flex-wrap:wrap">
          {% for code in ['en','fa','tr','ar'] %}
          <button type="submit" name="lang" value="{{ code }}"
                  class="btn btn-outline btn-sm {% if code == current_lang %}active{% endif %}"
                  style="padding:0.3rem 0.6rem;font-size:0.72rem">
            {{ code|upper }}{% if code == current_lang %} &#10003;{% endif %}
          </button>
          {% endfor %}
        </div>
      </form>
    </div>

    <div class="card reveal" style="margin-bottom:0.6rem">
      <h3 style="margin-bottom:0.5rem;color:var(--w);font-size:0.95rem">{{ t('theme') }}</h3>
      <form method="POST" action="{{ url_for('web.theme_save') }}" id="themeForm">
        <div class="flex" style="gap:0.3rem">
          <button type="submit" name="theme" value="dark"
                  class="btn btn-sm {% if current_theme != 'light' %}btn-primary{% else %}btn-outline{% endif %}"
                  onclick="setTheme('dark')">{{ t('dark_mode') }}</button>
          <button type="submit" name="theme" value="light"
                  class="btn btn-sm {% if current_theme == 'light' %}btn-primary{% else %}btn-outline{% endif %}"
                  onclick="setTheme('light')">{{ t('light_mode') }}</button>
        </div>
      </form>
    </div>

    <div class="card reveal" style="margin-bottom:0.6rem">
      <h3 style="margin-bottom:0.5rem;font-size:0.95rem">{{ t('region') }}</h3>
      <div class="flex">
        <select class="input" id="regionSelect" style="max-width:220px;font-size:0.78rem">
          <option value="global" {% if session.get('region')=='global' %}selected{% endif %}>Global</option>
          <option value="ir" {% if session.get('region')=='ir' %}selected{% endif %}>Iran</option>
          <option value="tr" {% if session.get('region')=='tr' %}selected{% endif %}>Turkey</option>
          <option value="eu" {% if session.get('region')=='eu' %}selected{% endif %}>Europe</option>
          <option value="na" {% if session.get('region')=='na' %}selected{% endif %}>North America</option>
        </select>
        <button class="btn btn-primary btn-sm" onclick="saveRegion()">{{ t('save') }}</button>
      </div>
    </div>

    <div class="card reveal">
      <h3 style="margin-bottom:0.5rem;font-size:0.95rem">{{ t('my_games') }}</h3>
      <div class="grid grid-4">
        {% for g in games %}
        <a href="{{ url_for('web.team', game_id=g.id) }}" class="game-3d-card" style="text-decoration:none">
          <div class="card-inner">
            <div class="card text-center" style="padding:0.5rem;cursor:pointer">
              <div style="font-weight:700;font-size:0.72rem">{{ g.name }}</div>
            </div>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
function setTheme(t){document.documentElement.setAttribute('data-theme',t);localStorage.setItem('theme',t);}
function saveRegion(){var r=document.getElementById('regionSelect').value;window.location.href='/set-language?lang='+'{{ current_lang }}'+'&region='+r;}
</script>
{% endblock %}