<x-mb-layout pageTitle="Landing pages">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
        <link href="{{ asset('assets/mb/css/prompt-landing-pages.css') }}?v={{ filemtime(public_path('assets/mb/css/prompt-landing-pages.css')) }}" rel="stylesheet">
    @endpush

    <div class="mb-page">
        <div class="mb-page-inner">
            @if (session('status'))
                <div class="mb-note is-info"><i class="bi bi-info-circle"></i><div>{{ session('status') }}</div></div>
            @endif
            @if ($errors->hasAny(['source_page', 'page']))
                <div class="mb-note is-info"><i class="bi bi-exclamation-circle"></i><div>{{ $errors->first() }}</div></div>
            @endif

            <div class="mb-page-head">
                <div>
                    <h1 class="mb-page-title">Landing pages</h1>
                    <p class="mb-page-sub">
                        @if ($activeTab === 'catalog')
                            {{ $stats['all'] }} generated from brand sites and product listings
                        @else
                            {{ $stats['all'] }} generated from website prompts
                        @endif
                    </p>
                </div>
                <div class="mb-page-head-actions">
                    @if ($activeTab === 'catalog')
                        <a href="{{ route('catalog-landing-pages.create') }}" class="mb-btn-primary mb-btn-lg" wire:navigate><i class="bi bi-plus-lg"></i>New catalog page</a>
                    @else
                        <a href="{{ route('prompt-landing-pages.create') }}" class="mb-btn-primary mb-btn-lg"><i class="bi bi-plus-lg"></i>New prompt page</a>
                    @endif
                </div>
            </div>

            <div class="mb-lead-tabs" role="tablist">
                <a href="{{ $tabUrl('catalog') }}" class="mb-lead-tab @if ($activeTab === 'catalog') is-active @endif" role="tab" aria-selected="{{ $activeTab === 'catalog' ? 'true' : 'false' }}">Catalog</a>
                <a href="{{ $tabUrl('prompt') }}" class="mb-lead-tab @if ($activeTab === 'prompt') is-active @endif" role="tab" aria-selected="{{ $activeTab === 'prompt' ? 'true' : 'false' }}">Prompt</a>
            </div>

            @if ($activeTab === 'catalog')
                @include('landing-pages.partials.catalog-tab')
            @else
                @include('landing-pages.partials.prompt-tab')
            @endif
        </div>
    </div>
</x-mb-layout>
