@extends('layouts.teacher')

@section('title', $title.' · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header kicker="Student Progress" :title="$title" :meta="$meta" />

        @include('teacher.progress.nav', ['section' => $section])

        @if ($students->isEmpty())
            <div class="card mec-panel">
                <div class="card-body">
                    <p class="mec-empty mb-0">No students on your lessons need intervention right now.</p>
                </div>
            </div>
        @else
            <div class="card mec-panel">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>Class</th>
                                <th>Why</th>
                                <th>Progress</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($students as $row)
                                <tr>
                                    <td><strong>{{ $row['student']->full_name }}</strong></td>
                                    <td>{{ $row['student']->classLabel() }}</td>
                                    <td>
                                        {{ collect($row['reasons'])->pluck('label')->join(', ') }}
                                        <p class="fs-13 mb-0 text-muted">{{ $row['reasons'][0]['detail'] ?? '' }}</p>
                                    </td>
                                    <td>@include('student.partials.progress-bar', ['percent' => $row['progress']])</td>
                                    <td class="text-end">
                                        <a href="{{ route('teacher.students.show', $row['student']->uuid) }}" class="btn mec-btn-navy btn-sm">Profile</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
@endsection