{% extends "layouts/base.html" %}
{% block title %}{{ profile_user.username }} - UdeS team manager{% endblock %}
{% block page_title %}{{ profile_user.username }}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="#" data-action="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 %}
            {% if profile_user.league_os_profile %}
            <div class="detail-item">
                <span class="detail-label"><i class="fas fa-link"></i> {{ _('League OS') }}</span>
                <span class="detail-value">
                    <a href="{{ profile_user.league_os_profile }}" target="_blank" rel="noopener noreferrer" class="trn-link">
                        <i class="fas fa-external-link-alt"></i> {{ profile_user.league_os_profile }}
                    </a>
                </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 %}

        {% if profile_user.role in ('player', 'coach') and availability %}
        <hr class="my-4">
        <h4 class="mb-3"><i class="fas fa-clock"></i> {{ _('Availability') }}
            <small class="text-muted">({{ '%.1f'|format(availability_hours or 0.0) }} h)</small>
        </h4>
        <div class="readonly-availability-grid">
            {% set day_names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] %}
            {% for day_idx in range(7) %}
            <div class="ra-day-column">
                <div class="ra-day-header">{{ day_names[day_idx][:3] }}</div>
                {% set day_slots = availability | selectattr('day_of_week', 'equalto', day_idx) | list %}
                {% if day_slots %}
                    {% for slot in day_slots | sort(attribute='start_time') %}
                    <div class="ra-slot selected">
                        {{ slot.start_time.strftime('%H:%M') }}–{{ slot.end_time.strftime('%H:%M') }}
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="ra-slot ra-empty">—</div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}