@extends('layouts.shell')
@section('title', $quiz->title)

@section('content')
<a href="{{ route('learn.index') }}?tab=quiz" class="mb-4 inline-flex items-center gap-1 text-sm text-qr-muted">
    <x-icon name="arrow-left" class="w-4 h-4"/> Kembali
</a>

<h1 class="text-xl font-extrabold">{{ $quiz->title }}</h1>
<p class="mt-1 text-sm text-qr-muted">{{ $quiz->description }}</p>

@if($quiz->embed_url)
<div class="mt-5 aspect-[3/4] overflow-hidden rounded-xl border border-qr-border bg-white">
    <iframe src="{{ $quiz->embed_url }}" class="h-full w-full" allowfullscreen title="{{ $quiz->title }}"></iframe>
</div>
<a href="{{ $quiz->embed_url }}" target="_blank" class="btn-outline mt-4 w-full">Buka di Quizizz</a>
@else
<div class="card mt-5 p-6 text-center text-sm text-qr-muted">Tautan kuis belum diatur admin.</div>
@endif
@endsection