@extends('layouts.admin', ['header' => true, 'nav' => true, 'demo' => true])

@section('content')
<div class="page-wrapper">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        {{ __('Overview') }}
                    </div>
                    <h2 class="page-title">
                        {{ __('Themes') }}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row row-deck row-cards">
                @foreach ($themes as $theme)
                <div class="col-sm-4 col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <div class="col-lg-8">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="avatar"
                                            style="background-image: url({{ asset(auth::user()->profile_image == null ? 'profile.png' : auth::user()->profile_image) }})"></span>
                                    </div>
                                    <div class="col">
                                        <div class="card-title">{{ __($theme->theme_name) }}</div>
                                        <div class="card-subtitle mb-1"><strong>{{ __($theme->theme_description) }}</strong></div>
                                        @if ($theme->theme_id == '588969110990' || $theme->theme_id == '603871993591' || $theme->theme_id == '226816377102' || $theme->theme_id == '499824398921')
                                        <span class="badge bg-green">{{ __("New") }}</span>
                                        @endif
                                        @if ($theme->theme_id == '7ccc432a06hty' || $theme->theme_id == '7ccc432a06hju')
                                        <span class="badge bg-orange">{{ __("Modified") }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="card-actions">
                                <a href="{{ route('admin.edit.theme', $theme->theme_id) }}" class="btn btn-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                                        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                                        <path d="M16 5l3 3"></path>
                                     </svg>
                                     Edit
                                </a>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <a data-fslightbox="gallery" href="{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}">
                                <img src="{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}" class="card-img-top">
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @include('admin.includes.footer')
</div>

{{-- Custom JS --}}
@section('scripts')
<script src="{{ asset('backend/js/fslightbox.js') }}"></script>
@endsection
@endsection