<x-app-layout>
    <x-slot name="header">
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="fw-semibold fs-4">
                {{ __('Creative #') }}{{ $creative->id }}
            </h2>
            <a href="{{ route('creatives.index') }}" class="btn btn-outline-secondary">Back to list</a>
        </div>
    </x-slot>

    @if (! in_array($creative->status, ['completed', 'failed']))
        <meta http-equiv="refresh" content="3">
    @endif

    <div class="py-4">
        <div class="container" style="max-width: 640px;">
            <div class="card shadow-sm">
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-3">Status</dt>
                        <dd class="col-sm-9">
                            <span class="badge bg-{{ match($creative->status) {
                                'completed' => 'success',
                                'failed' => 'danger',
                                'queued' => 'secondary',
                                default => 'warning',
                            } }}">
                                {{ $creative->status }}
                            </span>
                        </dd>

                        <dt class="col-sm-3">Type</dt>
                        <dd class="col-sm-9">{{ $creative->type }}</dd>

                        <dt class="col-sm-3">Source</dt>
                        <dd class="col-sm-9">{{ $creative->source }}</dd>

                        @if ($creative->prompt)
                            <dt class="col-sm-3">Prompt</dt>
                            <dd class="col-sm-9">{{ $creative->prompt }}</dd>
                        @endif

                        @if ($creative->product_url)
                            <dt class="col-sm-3">Product URL</dt>
                            <dd class="col-sm-9"><a href="{{ $creative->product_url }}" target="_blank">{{ $creative->product_url }}</a></dd>
                        @endif

                        <dt class="col-sm-3">Ratio</dt>
                        <dd class="col-sm-9">{{ $creative->ratio }}</dd>

                        @if ($creative->style)
                            <dt class="col-sm-3">Style</dt>
                            <dd class="col-sm-9">{{ $creative->style }}</dd>
                        @endif
                    </dl>

                    @if ($creative->status === 'failed' && $creative->failure_reason)
                        <div class="alert alert-danger mt-3 mb-0">{{ $creative->failure_reason }}</div>
                    @endif

                    @if ($creative->status === 'completed' && $creative->asset_path)
                        <div class="mt-3">
                            <img src="{{ asset('storage/'.$creative->asset_path) }}" class="img-fluid rounded" alt="Generated creative">
                        </div>
                    @endif

                    @if (! in_array($creative->status, ['completed', 'failed']))
                        <p class="text-muted mt-3 mb-0">Generating&hellip; this page refreshes automatically.</p>
                    @endif

                    <form method="POST" action="{{ route('creatives.destroy', $creative) }}" class="mt-3" onsubmit="return confirm('Delete this creative?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
