{% extends "layouts/base.html" %}
{% block title %}{{ profile_user.username }} - TryoutPro{% endblock %}
{% block page_title %}{{ profile_user.username }}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="#" onclick="history.back()">Back</a> / {{ profile_user.username }}</span>{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header">
        <div class="user-mini" style="gap: 12px;">
            <div class="avatar-sm" style="width: 48px; height: 48px; font-size: 1.2rem;">
                {{ profile_user.username[:2] | upper }}
            </div>
            <div>
                <h3 style="margin: 0;">{{ profile_user.username }}</h3>
                <span class="badge badge-{{ 'info' if profile_user.role == 'player' else 'primary' }}">{{ profile_user.role | capitalize }}</span>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Username</span>
                <span class="detail-value">{{ profile_user.username }}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Role</span>
                <span class="detail-value">
                    <span class="badge badge-{{ 'info' if profile_user.role == 'player' else 'primary' }}">{{ profile_user.role | capitalize }}</span>
                </span>
            </div>
            {% if profile_user.discord_username %}
            <div class="detail-item">
                <span class="detail-label">Discord</span>
                <span class="detail-value">{{ profile_user.discord_username }}</span>
            </div>
            {% endif %}
        </div>

        {% set gamertags = profile_user.gamertags %}
        {% if gamertags %}
        <hr class="my-4">
        <h4 class="mb-3"><i class="fas fa-gamepad"></i> Gamertags</h4>
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Game</th>
                        <th>Gamertag</th>
                        <th>Platform</th>
                        <th>Profile</th>
                    </tr>
                </thead>
                <tbody>
                    {% for gt in gamertags %}
                    <tr>
                        <td>{{ gt.game }}</td>
                        <td>{{ gt.gamertag }}</td>
                        <td>{{ gt.platform or '-' }}</td>
                        <td>
                            {% if gt.get_trn_url() %}
                            <a href="{{ gt.get_trn_url() }}" target="_blank" class="btn btn-sm btn-outline trn-link">
                                <i class="fas fa-external-link-alt"></i> View Profile
                            </a>
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}