@props([
    'bgColor' => theme('global', 'pageBlogBgColor'),
    'textColor' => theme('global', 'textColor'),
    'pageBorder' => theme('global', 'pageBorder'),
    'subHeaderClass' => theme('header', 'subHeaderClass'),
])

<div>
    <x-slot name="header">
        <h2 class="{{ $subHeaderClass }}">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('clickOnPlan', (event) => {
                setTimeout(() => {
                    document.getElementById(event.plan).click();
                }, 300);
            });
        });
    </script>
    @if (!empty(request()->query('NP_id')))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                hideElementsAndShowSpinner(['subInfos', 'subHistory', 'appLogo', 'buttonsManageSub', 'pricingTitle', 'pricing']);
            });
        </script>
    @endif
    <div class="p-6 lg:p-8 {{ $bgColor }} {{ $pageBorder }} {{ $textColor }}">
        <x-application-logo id="appLogo" />
        <div id="subInfos">
            @can('access premium features')
                <p class="my-1">Thank you for your purchase!</p>
            @else
                <p class="text-center">Please, chose a product.</p>
                @include('livewire.pages.dashboard.partials.stripe-partials.stripe-price-table')
            @endcan
            @can('access first tier features')
                @cannot('access second tier features')
                    <p class="my-1 font-bold">You have SaaShovel Base.</p>
                    <p class="my-1">Please, click on <a class="text-lime-600 font-bold" href="{{ route('saashovelZIP') }}">this link</a> to download SaaShovel Base.</p>
                @endcannot
            @endcan
            @can('access second tier features')
                <p class="my-1 font-bold">You have SaaShovel Pro.</p>
                <p class="my-1">Please check your email, you should have received an invitation link to the private GitHub repository as well as the Discord.</p>
                <p class="my-1">If you have already accepted the invitation, please head to the <a target="_blank" rel="noopener noreferrer" class="text-lime-600 font-bold" href="https://github.com/tcja/saashovel">private GitHub repository</a> to start using SaaShovel or you can <a target="_blank" rel="noopener noreferrer" class="text-lime-600 font-bold" href="{{ route('documentation') }}#Get-Started">click here</a>.</p>
                <p class="my-1">If you haven't received an email from Github, the email address you provided during checkout might not match your GitHub account, or you may not have a GitHub account yet. If this is the case, please create an account and <a target="_blank" rel="noopener noreferrer" class="text-lime-600 font-bold" href="mailto:contact@saashovel.com">email us</a> with your information so we can send you an invitation.</p>
            @endcan
            <p class="my-1">If you encounter any issues, please don't hesitate to contact us <a target="_blank" rel="noopener noreferrer" class="text-lime-600 font-bold" href="mailto:contact@saashovel.com">here</a>.</p>
        </div>
        <br>
        <div id="showSpinner"></div>
    </div>
</div>