{% extends "base.html" %}
{% block title %}{{ t('our_team') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<div class="flex justify-between mb" style="margin-bottom:0.6rem;flex-wrap:wrap;gap:0.4rem">
  <h2 style="font-size:1.1rem">{{ t('our_team') }}</h2>
  <div class="flex" style="gap:0.2rem;flex-wrap:wrap">
    {% for g in games %}
    <a href="{{ url_for('web.team', game_id=g.id) }}"
       class="btn btn-outline btn-sm {% if g.id == current_game_id %}active{% endif %}"
       style="border-color:{{ 'var(--p)' if g.id == current_game_id else 'var(--border)' }};padding:0.25rem 0.5rem;font-size:0.72rem">
      {{ g.name }}
    </a>
    {% endfor %}
  </div>
</div>

<!-- TEAM INFO -->
<div class="card animate-in" style="margin-bottom:0.6rem">
  <div class="grid grid-2" style="gap:0.8rem">
    <div>
      <div style="color:var(--mute);font-size:0.68rem;margin-bottom:0.15rem">{{ t('team_name') }}</div>
      <div style="font-family:'Orbitron';font-size:1rem;font-weight:700;color:var(--p)">{{ team.name }}</div>
      <div style="color:var(--dim);margin-top:0.15rem;font-size:0.78rem">{{ game.name if game else '—' }}</div>
    </div>
    <div>
      <div style="color:var(--mute);font-size:0.68rem;margin-bottom:0.15rem">{{ t('match_mode') }}</div>
      <select class="input" id="modeSelect" style="width:auto;display:inline-block;font-size:0.78rem">
        {% for m in modes %}
        <option value="{{ m.id }}">{{ m.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>

<!-- MEMBERS -->
<h3 style="margin-bottom:0.4rem;font-size:0.92rem">{{ t('team_members') }} ({{ members|length }})</h3>
<div class="grid" style="margin-bottom:0.6rem">
  {% for m in members %}
  <div class="card flex animate-in" style="justify-content:space-between;align-items:center;padding:0.5rem 0.6rem">
    <div class="flex" style="gap:0.5rem">
      {% if m.user.avatar %}
        <img src="{{ url_for('static', filename='uploads/'+m.user.avatar) }}" class="avatar" style="width:32px;height:32px">
      {% else %}
        <div class="avatar" style="width:32px;height:32px;background:var(--p-soft);display:flex;align-items:center;justify-content:center;font-size:0.72rem">U</div>
      {% endif %}
      <div>
        <div style="font-weight:700;font-size:0.82rem">{{ m.user.display_name }}</div>
        {% if m.in_game_name %}<div style="font-size:0.68rem;color:var(--dim)">@{{ m.in_game_name }}</div>{% endif %}
        <div style="font-size:0.65rem;color:var(--mute)">#{{ m.user.numeric_id }}</div>
      </div>
    </div>
    <div class="flex" style="gap:0.3rem;align-items:center">
      <span class="badge {% if m.role=='owner' %}badge-red{% elif m.role=='manager' %}badge-amber{% else %}badge-green{% endif %}" style="font-size:0.62rem;padding:0.15rem 0.45rem">
        {{ m.role|title }}
      </span>
      {% if m.role != 'owner' %}
      <div style="position:relative">
        <button onclick="toggleMenu(this)" class="btn btn-outline btn-sm" style="padding:0.15rem 0.4rem;font-size:0.8rem">···</button>
        <div class="dropdown-menu" style="display:none;position:absolute;right:0;top:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:0.35rem;z-index:50;min-width:140px;backdrop-filter:blur(14px);box-shadow:var(--depth-l)">
          {% if m.role != 'manager' %}
          <button class="btn btn-outline btn-sm w100" style="width:100%;justify-content:flex-start;margin-bottom:0.2rem;font-size:0.72rem" onclick="changeRole({{ m.id }},'manager')">{{ t('make_manager') }}</button>
          {% endif %}
          <button class="btn btn-danger btn-sm w100" style="width:100%;justify-content:flex-start;font-size:0.72rem" onclick="removeMember({{ m.id }})">{{ t('remove_player') }}</button>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

<!-- ADD PLAYER -->
<div class="card animate-in">
  <h3 style="margin-bottom:0.5rem;font-size:0.88rem">{{ t('team_add_player') }}</h3>
  <div class="flex" style="gap:0.3rem">
    <input class="input" id="playerSearch" placeholder="{{ t('search_player') }}" style="flex:1;font-size:0.78rem">
    <button class="btn btn-primary btn-sm" onclick="searchPlayer()">{{ t('search') }}</button>
  </div>
  <div id="playerResults" style="margin-top:0.5rem"></div>
</div>

<style>.dropdown-menu{box-shadow:var(--depth-l)}.w100{width:100%!important}</style>
<script>
function toggleMenu(btn){const dd=btn.nextElementSibling;dd.style.display=dd.style.display==='none'?'block':'none';}
document.addEventListener('click',e=>{if(!e.target.closest('.dropdown-menu')&&!e.target.closest('button'))document.querySelectorAll('.dropdown-menu').forEach(d=>d.style.display='none');});
async function searchPlayer(){
  const q=document.getElementById('playerSearch').value.trim();if(!q)return;
  document.getElementById('playerResults').innerHTML='<div style="color:var(--mute);padding:0.5rem;text-align:center;font-size:0.75rem">...</div>';
  const r=await fetch('/api/player/search?q='+encodeURIComponent(q));
  const list=await r.json();
  if(!list.length){document.getElementById('playerResults').innerHTML='<div style="color:var(--mute);padding:0.5rem;text-align:center;font-size:0.75rem">'+`{{ t("no_player_found") }}`+'</div>';return;}
  let html='';
  for(const p of list){
    html+=`<div class="card flex animate-in" style="justify-content:space-between;align-items:center;margin-bottom:0.3rem;padding:0.4rem 0.5rem">
      <div class="flex" style="gap:0.4rem">
        <div class="avatar" style="width:26px;height:26px;background:var(--p-soft);display:flex;align-items:center;justify-content:center;font-size:0.6rem">U</div>
        <div><strong style="font-size:0.78rem">${p.username||p.email}</strong><div style="font-size:0.62rem;color:var(--mute)">#${p.numeric_id||'—'}</div></div>
      </div>
      <button class="btn btn-primary btn-sm" style="font-size:0.65rem;padding:0.2rem 0.5rem" onclick="invitePlayer(${p.id},'${(p.username||p.email).replace(/'/g,"\\'")}')">{{ t('invite_player') }}</button>
    </div>`;
  }
  document.getElementById('playerResults').innerHTML=html;
}
async function invitePlayer(uid,name){
  const r=await fetch('/api/team/invite',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({team_id:{{ team.id }},user_id:uid})});
  const d=await r.json();if(d.ok){alert('{{ t("request_sent") }}');location.reload();}else alert(d.error||'Error');
}
async function removeMember(mid){if(!confirm('{{ t("confirm_delete") }}'))return;await fetch('/api/team/member/'+mid,{method:'DELETE'});location.reload();}
async function changeRole(mid,role){await fetch('/api/team/member/'+mid+'/role',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({role})});location.reload();}
</script>
{% endblock %}