{% extends "layouts/base.html" %}
{% block title %}{{ player.username }} - {{ _('Evaluations') }} - UdeS team manager{% endblock %}
{% block page_title %}{{ _('Player Evaluations') }}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="{{ url_for('evaluations.list_evaluations') }}">{{ _('Evaluations') }}</a> / {{ player.username }}</span>{% endblock %}

{% block content %}
<div class="view-toggle mb-3">
    <a href="{{ url_for('evaluations.list_evaluations') }}" class="btn btn-sm btn-outline">
        <i class="fas fa-table"></i> {{ _('Table') }}
    </a>
    <a href="{{ url_for('evaluations.player_evaluations', player_id=player.id) }}" class="btn btn-sm btn-primary">
        <i class="fas fa-user"></i> {{ _('By player') }}
    </a>
</div>

<div class="card mb-4">
    <div class="card-header">
        <h3><i class="fas fa-user"></i> {{ player.username }}</h3>
        <div class="player-nav">
            {% if prev_player %}
            <a href="{{ url_for('evaluations.player_evaluations', player_id=prev_player.id) }}" class="btn btn-sm btn-secondary" title="{{ prev_player.username }}">
                <i class="fas fa-chevron-left"></i> {{ prev_player.username }}
            </a>
            {% else %}
            <span class="btn btn-sm btn-secondary is-disabled" aria-disabled="true"><i class="fas fa-chevron-left"></i></span>
            {% endif %}
            {% if next_player %}
            <a href="{{ url_for('evaluations.player_evaluations', player_id=next_player.id) }}" class="btn btn-sm btn-secondary" title="{{ next_player.username }}">
                {{ next_player.username }} <i class="fas fa-chevron-right"></i>
            </a>
            {% else %}
            <span class="btn btn-sm btn-secondary is-disabled" aria-disabled="true"><i class="fas fa-chevron-right"></i></span>
            {% endif %}
        </div>
    </div>
    <div class="card-body">
        <div class="stats-grid mb-4">
            <div class="stat-card">
                <div class="stat-icon bg-info"><i class="fas fa-star"></i></div>
                <div class="stat-info">
                    <h3>{{ combined_average if combined_average is not none else '-' }}</h3>
                    <p>{{ _('Combined average') }} &middot; {{ evaluation_count }} {{ _('evaluations') }}</p>
                </div>
            </div>
            {% for label, avg in criterion_averages %}
            <div class="stat-card stat-card-sm">
                <div class="stat-icon bg-info"><i class="fas fa-chart-bar"></i></div>
                <div class="stat-info">
                    <h3>{{ avg if avg is not none else '-' }}</h3>
                    <p>{{ label }}</p>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>{{ _('Evaluator') }}</th>
                        <th>{{ _('Tryout') }}</th>
                        {% for field, label in evaluation_criteria %}
                        <th>{{ label }}</th>
                        {% endfor %}
                        <th>{{ _('Overall') }}</th>
                        <th>{{ _('Position') }}</th>
                        <th>{{ _('Date') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ev in evaluations %}
                    <tr>
                        <td>{{ ev.evaluator.username if ev.evaluator else _('Deleted evaluator') }}</td>
                        <td>{{ ev.tryout.title if ev.tryout else _('Deleted tryout') }}</td>
                        {% for score in ev.scores %}
                        <td>{{ score if score is not none else '-' }}</td>
                        {% endfor %}
                        <td><span class="score">{{ ev.overall if ev.overall is not none else '-' }}</span></td>
                        <td>{{ ev.position or '-' }}</td>
                        <td>{{ ev.date.strftime('%m/%d/%Y') if ev.date else '-' }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="{{ evaluation_criteria | length + 5 }}" class="text-center">
                            <div class="empty-state">
                                <i class="fas fa-clipboard"></i>
                                <h3>{{ _('No evaluations for this player yet') }}</h3>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if evaluations %}
        {% set comment_evals = evaluations | selectattr('comment') | list %}
        <div class="card mt-4">
            <div class="card-header">
                <h3><i class="fas fa-comments"></i> {{ _('Comments') }}</h3>
            </div>
            <div class="card-body">
                {% if comment_evals %}
                <div class="eval-comments">
                    {% for ev in comment_evals %}
                    <article class="eval-comment">
                        <p class="eval-comment-text">{{ ev.comment }}</p>
                        <footer class="eval-comment-meta">
                            <span class="eval-comment-author">{{ _('Evaluator') }}&nbsp;: <strong>{{ ev.evaluator.username if ev.evaluator else _('Deleted evaluator') }}</strong></span>
                            <span class="eval-comment-context">{{ ev.tryout.title if ev.tryout else _('Deleted tryout') }} &middot; {{ ev.date.strftime('%m/%d/%Y') if ev.date else '-' }}</span>
                        </footer>
                    </article>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-comments"></i>
                    <h3>{{ _('No comments') }}</h3>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.view-toggle { display: flex; gap: 8px; }
.player-nav { display: flex; gap: 8px; align-items: center; }
.is-disabled { opacity: 0.5; pointer-events: none; }
</style>
{% endblock %}