{% extends "layouts/base.html" %}
{% block title %}My Profile - TryoutPro{% endblock %}
{% block page_title %}My Profile{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / Profile</span>{% endblock %}

{% block header_actions %}
<div class="header-actions">
    <a href="{{ url_for('users.list_contracts') }}" class="btn btn-sm btn-info">
        <i class="fas fa-file-contract"></i> Contracts
    </a>
    <a href="{{ url_for('users.edit_profile') }}" class="btn btn-sm btn-primary">
        <i class="fas fa-edit"></i> Edit Profile
    </a>
</div>
{% endblock %}

{% block content %}
<div class="dashboard-grid">
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-user-circle"></i> Account Information</h3>
        </div>
        <div class="card-body">
            <div class="profile-header">
<div class="user-avatar avatar-xl">{{ user.username[:2] | upper }}</div>
                <div class="profile-info">
<h2>{{ user.username }}</h2>
                    <span class="text-muted" style="font-size: 1.1em;">{{ user.full_name }}</span>
                    <span class="badge badge-{{ user.role }} badge-lg">{{ user.role | capitalize }}</span>
                    <p class="text-muted">Member since {{ user.created_at.strftime('%B %Y') }}</p>
                </div>
            </div>
            <div class="detail-grid mt-4">
                <div class="detail-item">
                    <span class="detail-label">Username</span>
                    <span class="detail-value">{{ user.username }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Email</span>
                    <span class="detail-value">{{ user.email }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Phone</span>
                    <span class="detail-value">{{ user.phone or 'Not provided' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Account Status</span>
                    <span class="detail-value">
                        {% if user.is_active_account %}
                        <span class="badge badge-success">Active</span>
                        {% else %}
                        <span class="badge badge-danger">Inactive</span>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- E-Sports Profile Card -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-gamepad"></i> E-Sports Profile</h3>
        </div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label"><i class="fas fa-gamepad"></i> Gamertags</span>
                    <span class="detail-value">
                        {% set games_list = user.get_games_list() %}
                        {% if games_list %}
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                {% for game in games_list %}
                                {% set gt = user.gamertags | selectattr('game', 'equalto', game) | first %}
                                <div>
                                    {% if gt and gt.get_trn_url() %}
                                    <a href="{{ gt.get_trn_url() }}" target="_blank" rel="noopener noreferrer" class="trn-link">
                                        <span class="badge badge-esport" style="margin-right: 8px;">{{ game }}</span>
                                        <i class="fas fa-external-link-alt"></i> {{ gt.gamertag }}
                                        {% if gt.platform %}<small>({{ gt.platform }})</small>{% endif %}
                                    </a>
                                    {% else %}
                                    <span class="badge badge-esport">{{ game }}</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <span class="text-muted">Not specified</span>
                        {% endif %}
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label"><i class="fab fa-discord"></i> Discord</span>
                    <span class="detail-value">
                        {% if user.discord_username %}
                        {{ user.discord_username }}
                        {% else %}
                        <span class="text-muted">Not connected</span>
                        {% endif %}
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label"><i class="fas fa-link"></i> League OS</span>
                    <span class="detail-value">
                        {% if user.league_os_profile %}
                        <a href="{{ user.league_os_profile }}" target="_blank" rel="noopener noreferrer" class="trn-link">
                            <i class="fas fa-external-link-alt"></i> {{ user.league_os_profile }}
                        </a>
                        {% else %}
                        <span class="text-muted">Not connected</span>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-chart-bar"></i> My Statistics</h3>
        </div>
        <div class="card-body">
            {% if user.role == 'player' %}
            <div class="profile-stats">
                <div class="stat-item">
                    <h4>{{ user.tryout_registrations.count() }}</h4>
                    <p>Tryouts Registered</p>
                </div>
                <div class="stat-item">
                    <h4>{{ user.team_assignments.count() }}</h4>
                    <p>Team Assignments</p>
                </div>
            </div>
            {% elif user.can_evaluate() %}
            <div class="profile-stats">
                <div class="stat-item">
                    <h4>{{ user.evaluations_given.count() }}</h4>
                    <p>Evaluations Given</p>
                </div>
            </div>
            {% else %}
            <p class="text-muted">No statistics available for this role.</p>
            {% endif %}
        </div>
    </div>

    <!-- Contracts Card -->
    {% if user.role == 'player' %}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-file-contract"></i> My Contracts</h3>
        </div>
        <div class="card-body">
            {% if contracts %}
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label">Contracts Pending</span>
                    <span class="detail-value">
                        {% set pending = contracts | selectattr('status', 'equalto', 'pending') | list %}
                        <span class="badge badge-{{ 'warning' if pending|length > 0 else 'success' }}">{{ pending | length }}</span>
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Contracts Signed</span>
                    <span class="detail-value">
                        {% set signed = contracts | selectattr('status', 'equalto', 'signed') | list %}
                        <span class="badge {% if signed %}badge-success{% else %}badge-secondary{% endif %}">{{ signed | length }}</span>
                    </span>
                </div>
            </div>
            <div class="mt-3">
                <a href="{{ url_for('users.list_contracts') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-folder-open"></i> View All Contracts
                </a>
            </div>
            {% else %}
            <p class="text-muted">No contracts have been uploaded for you yet.</p>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}