@extends('templates.'.($event->template_name ?? 'Eventify').'.layout')

@section('content')
<div class="preview-banner bg-info text-white p-2 text-center" style="position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-4 text-md-start">
                <span class="badge bg-warning">APERÇU</span> 
                {{ $template['display_name'] ?? 'Template' }}
            </div>
            <div class="col-md-4 text-center d-none d-md-block">
                <div class="d-flex justify-content-center align-items-center">
                    <span class="color-dot mx-1" style="background-color: {{ $event->primary_color }}"></span>
                    <span class="color-dot mx-1" style="background-color: {{ $event->secondary_color }}"></span>
                    <span class="color-dot mx-1" style="background-color: {{ $event->accent_color }}"></span>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <button type="button" class="btn btn-sm btn-light" onclick="window.close()">Fermer l'aperçu</button>
            </div>
        </div>
    </div>
</div>

<div style="margin-top: 40px;">
    @include('templates.'.($event->template_name ?? 'Eventify').'.index')
</div>

<style>
    .color-dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.5);
    }
</style>
@endsection