Znovupoužitelné UI: Blade komponenty, atributy a sloty

{{-- resources/views/course/lesson.blade.php (Ukázka znovupoužitelné kompozice a Alpine.js) --}}
@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">

    {{-- Drobečková navigace & štítek fáze životního cyklu --}}
    <div class="flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-slate-800">
        <nav class="flex items-center gap-2 text-xs text-slate-400">
            <a href="{{ route('course.index') }}" class="hover:text-white">📚 Osnova</a>
            <span>/</span>
            <span class="text-slate-200">Modul {{ $module->number }} · Lekce {{ $lesson->number }}</span>
        </nav>

        @if($lesson->lifecycle_phase)
            <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">
                <span>Fáze: {{ $lesson->lifecycle_phase->label() }}</span>
            </div>
        @endif
    </div>

    {{-- Komponenta pro kód s okamžitou klientskou interakcí přes Alpine.js --}}
    @if(!empty($lesson->code_snippet))
        <div class="rounded-xl bg-slate-950 border border-slate-800 overflow-hidden shadow-xl" x-data="{ copied: false }">
            <div class="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800 text-xs">
                <span class="font-mono text-slate-300 font-semibold">💻 Klíčová konstrukce</span>
                <button type="button"
                        @click="navigator.clipboard.writeText($refs.snippet.innerText); copied = true; setTimeout(() => copied = false, 2000)"
                        class="px-2.5 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-300 transition">
                    <span x-show="!copied">Kopírovat kód</span>
                    <span x-show="copied" class="text-emerald-400" style="display: none;">✓ Zkopírováno!</span>
                </button>
            </div>
            <pre class="p-4 text-xs font-mono text-emerald-300 overflow-x-auto"><code x-ref="snippet">{{ $lesson->code_snippet }}</code></pre>
        </div>
    @endif

    {{-- Začlenění reaktivní komponenty Livewire pro interaktivní kvíz --}}
    <div class="pt-4">
        <livewire:lesson-quiz :lesson="$lesson" />
    </div>
</div>
@endsection