@extends('layouts.vitrine')

@section('titre', 'Console de ' . $labSession->eleve->nomAffiche())

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold">{{ $seance->lab->titre }} · lecture seule</p>
        <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Console de {{ $labSession->eleve->nomAffiche() }}</h1>
        <div id="terminal" class="mt-4 h-[480px] overflow-hidden rounded-2xl border border-[#e3e5e8]" style="background:#13233A"></div>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
        <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
        <script src="{{ asset('js/console-reelle.js') }}"></script>
        <script>
            fetch('{{ route('console.prof', [$seance, $labSession]) }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            }).then(function (r) { return r.json(); }).then(function (d) {
                window.SyllabusConsoleReelle.mount(document.getElementById('terminal'), { jeton: d.jeton, lectureSeule: true });
            });
        </script>
    </div>
@endsection