@extends('mix::layouts.master')
@section('title', __('Theme'))
@section('namespace', 'user-mix-settings-theme')
@section('back-button', route('user-mix-settings'))
@section('content')

<style>
	{!! $css !!}
</style>

<div class="mix-padding-10">
	
		
	<div class="dashboard-header-banner relative mt-0 mb-5">
		<div class="card-container">
			
			<div class="text-lg font-bold">{{ __('Page Skin') }}</div>
            <div class="side-cta w-20 h-20 right-2 top-6">
                {!! orion('pencil-1', 'w-full h-full') !!}
            </div>
		</div>
	</div>
	
	<form action="{{ route('user-mix-settings-theme-post') }}" method="POST">
		@csrf
		<div class="rounded-2xl z-50 -card-focus"></div>
		
		<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
			@foreach (\BioStyle::getAll() as $key => $value)

			<label class="theme-html h-full -card-radio-focus-label" data-focus-i=".-card-focus">
				<input type="radio" name="theme" value="{{ $key }}" class="custom-control-input" {{ user('theme') == $key ? 'checked' : '' }}>
				<div class="inner relative">
					<div class="hidden md:flex text-sticker secondary-box text-xs truncate absolute z-50 flex items-center right-2 sm:right-0 top-0 sm:-top-6">{{ ao($value, 'name') }}</div>

					
					<div class="html-demo-bio has-bio-background w-full is-theme max-w-full radius-{{ ao($value, 'settings.fixed_radius') }} themes-group-custom" id="{{ $key }}">
						<div class="html-demo-background-main">
							{!! getBioBackground($user->id) !!}
						</div>
						<div class="flex w-full flex-col z-50">
							<div class="flex">
								<div class="html-demo-avatar yetti-links-v2 p-0">
									<span class="fancy-drop"></span>
								</div>
							</div>

							<div class="w-full">
								<div class="html-demo-description h-1 w-1/4"></div>
								<div class="html-demo-description h-1 w-2/4"></div>
								<div class="html-demo-description h-1 w-3/4"></div>
							</div>
							<div class="flex gap-1 w-full mt-2">
								<div class="html-demo-description h-4 w-4 rounded-sm m-0 yetti-links-v2 p-0"></div>
								<div class="html-demo-description h-4 w-4 rounded-sm m-0 yetti-links-v2 p-0"></div>
								<div class="html-demo-description h-4 w-4 rounded-sm m-0 yetti-links-v2 p-0"></div>
								<div class="html-demo-description h-4 w-4 rounded-sm m-0 yetti-links-v2 p-0"></div>
							</div>
							<div class="w-full mt-2">
								
								

							<div class="html-demo-description h-3 mt-2 mb-0 yetti-links-v2">
								<span class="fancy-drop"></span>
							</div>
							<div class="html-demo-description h-3 mt-2 yetti-links-v2">
								<span class="fancy-drop"></span>
							</div>
							</div>
						</div>
						<div class="html-demo-description hidden"></div>
					</div>
				</div>
			</label>
			@endforeach
		</div>
		
		<button class="sandy-expandable-btn px-10 mt-5"><span>{{ __('Save') }}</span></button>
	</form>

</div>
@endsection