@section('title', __('site.menu_item_6_sub_1'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/sitethemes.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.top_menu_item_site')],
        ['label' => __('site.menu_item_6')],
        ['label' => __('site.menu_item_6_sub_1')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.menu_item_6_sub_1') }}</h1>
            <p class="page-sub">{{ __('site.page_themes_sub') }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--soft-blue" href="{{ route('site.theme.customize.u') }}">
                <i class="fa-solid fa-sliders"></i> {{ __('site.menu_item_6_sub_2') }}
            </a>
            <a class="btn btn--ghost" href="https://{{ $siteData->domain }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.page_themes_open_site') }}
            </a>
        </div>
    </header>

    @include('includes.flash')

    @if($apiError)
        <div class="apierr">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text">{{ $apiError }}</p>
        </div>
    @else
        <div class="thlist"
             data-msg-title="{{ __('site.page_themes_confirm_title') }}"
             data-msg-text="{{ __('site.page_themes_confirm_text') }}"
             data-msg-text-noreturn="{{ __('site.page_themes_confirm_noreturn') }}"
             data-msg-btn="{{ __('site.page_themes_activate') }}"
             data-noreturn="{{ $legacy || $unlisted ? '1' : '0' }}">

            @if($unlisted)
                <p class="thwarn">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    {{ __('site.page_themes_unlisted', ['code' => $current]) }}
                </p>
            @elseif($legacy)
                <p class="thwarn">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    {{ __('site.page_themes_legacy_warn') }}
                </p>
            @endif

            <div class="thgrid">
                @foreach($allThemes as $theme)
                    <article class="thcard {{ $theme->current ? 'is-current' : '' }} {{ $theme->allowed || $theme->current ? '' : 'is-locked' }}"
                             data-code="{{ $theme->code }}" data-name="{{ $theme->name }}">

                        <span class="thcard__shot">
                            @if($theme->img)
                                <img src="/assets/media/themes/{{ $theme->img }}" alt="" loading="lazy">
                            @else
                                <span class="thcard__noshot">
                                    <i class="fa-solid fa-image"></i>
                                    {{ __('site.page_themes_no_preview') }}
                                </span>
                            @endif

                            @if($theme->current)
                                <span class="thtag"><i class="fa-solid fa-circle-check"></i> {{ __('site.page_themes_current') }}</span>
                            @elseif(! $theme->allowed)
                                <span class="thtag thtag--lock"><i class="fa-solid fa-lock"></i> {{ __('site.page_themes_locked') }}</span>
                            @endif
                        </span>

                        <div class="thcard__body">
                            <strong class="thcard__name">{{ __('site.page_themes_name', ['name' => $theme->name]) }}</strong>

                            <span class="thcard__desc">
                                {{ $theme->description ?: __('site.page_themes_no_desc') }}
                            </span>
                        </div>

                        <div class="thcard__foot">
                            @if($theme->current)
                                <span class="thcurrent"><i class="fa-solid fa-check"></i> {{ __('site.page_themes_in_use') }}</span>

                                @if($theme->legacy)
                                    <span class="thold">{{ __('site.page_themes_legacy') }}</span>
                                @endif
                            @elseif($theme->allowed)
                                <button class="btn btn--primary thpick" type="button">{{ __('site.page_themes_activate') }}</button>
                            @else
                                <span class="thlocked">{{ __('site.page_themes_locked_help') }}</span>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>

            <form class="thform" method="POST" action="{{ route('site.theme.change.do') }}" hidden>
                <input type="hidden" name="code" class="thform__code">
            </form>
        </div>
    @endif

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/site-themes.js') }}"></script>
@endsection

@include('includes/footer-novo')