{% extends "layouts/base.html" %}
{% import 'layouts/_pagination.html' as pager %}
{% block title %}{{ _('Evaluations') }} - UdeS team manager{% endblock %}
{% block page_title %}{{ _('Evaluations') }}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / Evaluations</span>{% endblock %}

{% block content %}
{% set sort_column = sort_column | default('overall_score') %}
{% set sort_order = sort_order | default('desc') %}

{% macro sort_link(column, label) %}
<th>
    {% set new_order = 'asc' if (sort_column == column and sort_order == 'desc') else 'desc' %}
    <a href="{{ url_for('evaluations.list_evaluations', sort=column, order=new_order) }}" class="sort-link">
        {{ label }}
        {% if sort_column == column %}
            <i class="fas fa-arrow-{{ 'up' if sort_order == 'asc' else 'down' }}"></i>
        {% else %}
            <i class="fas fa-arrows-alt-v sort-inactive"></i>
        {% endif %}
    </a>
</th>
{% endmacro %}

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

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-clipboard-list"></i> {{ _('Player Evaluations') }}</h3>
    </div>
    <div class="card-body">
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th></th>
                        {{ sort_link('player', 'Player') }}
                        {{ sort_link('overall_score', 'Average') }}
                        {{ sort_link('count', 'Evaluations') }}
                        <th>{{ _('Open') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in players %}
                    <tr class="eval-row" data-action="toggle-player-evals" data-target="evals-{{ entry.player.id }}">
                        <td><i class="fas fa-chevron-right eval-chevron"></i></td>
                        <td>
                            <a href="{{ url_for('evaluations.player_evaluations', player_id=entry.player.id) }}" class="player-link">
                                {{ entry.player.username }}
                            </a>
                        </td>
                        <td><span class="score">{{ entry.avg if entry.avg is not none else '-' }}</span></td>
                        <td>{{ entry.count }}</td>
                        <td>
                            <a href="{{ url_for('evaluations.player_evaluations', player_id=entry.player.id) }}" class="btn btn-sm btn-outline" title="{{ _('Open player view') }}">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </td>
                    </tr>
                    <tr class="eval-detail hidden" id="evals-{{ entry.player.id }}">
                        <td colspan="5">
                            <div class="eval-detail-inner">
                                <table class="table table-sm">
                                    <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>{{ _('Comment') }}</th>
                                            <th>{{ _('Date') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for ev in entry.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 class="eval-comment">{{ ev.comment or '-' }}</td>
                                            <td>{{ ev.date.strftime('%m/%d/%Y') if ev.date else '-' }}</td>
                                        </tr>
                                        {% else %}
                                        <tr>
                                            <td colspan="{{ evaluation_criteria | length + 6 }}" class="text-center">{{ _('No evaluations for this player.') }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center">
                            <div class="empty-state">
                                <i class="fas fa-clipboard"></i>
                                <h3>{{ _('No evaluations yet') }}</h3>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {{ pager.controls(pagination) }}
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.view-toggle { display: flex; gap: 8px; }
.eval-row { cursor: pointer; }
.eval-chevron { transition: transform 0.15s ease; font-size: 0.75rem; }
.eval-detail-inner { padding: 8px 4px; }
.eval-detail-inner .table { margin-bottom: 0; }
.eval-comment { max-width: 320px; white-space: pre-wrap; }
.player-nav { display: flex; gap: 8px; align-items: center; }
.is-disabled { opacity: 0.5; pointer-events: none; }
</style>
<script nonce="{{ csp_nonce }}">
function togglePlayerEvals(element, event) {
    if (event.target.closest('a')) {
        return;
    }
    var detail = document.getElementById(element.getAttribute('data-target'));
    if (!detail) {
        return;
    }
    var chevron = element.querySelector('.eval-chevron');
    var isHidden = detail.classList.contains('hidden');
    if (isHidden) {
        detail.classList.remove('hidden');
        if (chevron) chevron.classList.add('fa-rotate-90');
    } else {
        detail.classList.add('hidden');
        if (chevron) chevron.classList.remove('fa-rotate-90');
    }
}
registerActions({ 'toggle-player-evals': togglePlayerEvals });
</script>
{% endblock %}