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

@section('content')
<a href="{{ route('learn.index') }}?tab=ebook" 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>

<div class="card overflow-hidden">
    <div class="cinema relative aspect-[3/1] overflow-hidden">
        @if($ebook->coverUrl())
            <img src="{{ $ebook->coverUrl() }}" class="h-full w-full object-cover" alt="{{ $ebook->title }}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
        @else
            <div class="h-full w-full bg-gradient-to-br from-primary to-amber"></div>
        @endif
    </div>
    <div class="p-5">
        <h1 class="text-xl font-extrabold">{{ $ebook->title }}</h1>
        <p class="mt-2 text-sm text-qr-muted leading-relaxed">{{ $ebook->description }}</p>

        @if($ebook->file_ref)
        <div class="mt-5 aspect-[3/4] overflow-hidden rounded-xl border border-qr-border">
            <iframe src="{{ $ebook->fileUrl() }}" class="h-full w-full" title="{{ $ebook->title }}"></iframe>
        </div>
        <a href="{{ $ebook->fileUrl() }}" target="_blank" class="btn-accent mt-4 w-full">Buka / Unduh PDF</a>
        @else
        <div class="mt-5 rounded-xl border border-dashed border-qr-border p-6 text-center text-sm text-qr-muted">
            File ebook belum diunggah admin.
        </div>
        @endif
    </div>
</div>
@endsection