@extends('bio::layouts.master')
@section('index-bio', true)
@section('seo')
{!! user_seo_tags($bio->id) !!}
@stop
@section('content')

<style>
    #app-sandy-mix #content, #app-sandy-mix{
        width: 100% !important;
    }

    .floaty-bar{
        display: none !important;
    }
</style>
<div class="relative z-10">
    <div class="bio-menu hidden">
        <div class="bio-menu-container">
            <div class="bio-menu-info">
                <div class="user-img bio-avatar">
                    {!! avatar($bio->id, true) !!}
                </div>
                <div class="bio-name-text theme-text-color">
                    {{ $bio->name }}
                </div>
                <div class="social-modal social-modal-open two-burger-icon"></div>
            </div>
        </div>
    </div>

    <div class="context bio {!! radius_and_align_class($bio->id, 'align') !!}">

        @if (user('settings.enable_google_translate', $bio->id))
        <div class="dropdown trans-index-dropdown bio-translate-dropdown notranslate hidden">
            <button class="dropdown__head shadow-none m-0 mr-3">
                <div>
                    <i class="sni sni-globe"></i>
                    {{ __('Translate') }}
                </div>
                <span class="caret"></span>
            </button>
            <div class="dropdown__body">
                @foreach (Country::google_trans_lang() as $key => $item)
                <label class="sandy-big-radio mb-3">
                  <input type="radio" name="google_lang" value="{{ strtolower(ao($item, 'code')) }}" class="custom-control-input">
                  <div class="radio-select-inner locale flex gap-2 flex-row justify-start items-center">
                     <div class="1">
                        <img src="{{ gs('assets/image/countries', strtolower(ao($item, 'country') ?? ao($item, 'code')) . ".svg") }}" class="w-7 h-7 object-cover rounded-full" alt="">
                     </div>
                     
                     <p class="text-title">{{ ao($item, 'language') }}</p>
                  </div>
               </label>
                @endforeach
            </div>
         </div>
         @endif
        @if (!user('settings.disable_share_btn', $bio->id))
            <a class="bio-share-btn cursor-pointer share-dialog-open bg-white card-shadow top-5 flex items-center justify-center browser-share-btn hidden">
                <i class="sni sni-share text-black"></i>
            </a>
        @endif
        

        <div class="bio-wrap bg-transparent sandy-tabs shadow-none">
            
    <div class="banner-wrapper-i pt-0 pb-0">
        
        <div class="-banner-wrap px-0 pb-0" x-data="followers">
            <div class="mt-0 w-full">
                <div class="w-full">

                    <div class="default-bio-banner">
                        {!! getBioBackground($bio->id) !!}
                    </div>

                    <div class="flex relative px-5">
                        <div class="--profile">
                            {!! avatar($bio->id, true) !!}
                        </div>
                        <div class="flex ml-auto gap-2 mt-3">
                            
                            <div class="small-menu-cog extra-cog-open rounded-full w-7 h-7 border-0">
                                {!! orion('more-1', 'w-3 h-3 rotate-90 transform stroke-current') !!}
                            </div>

                            <div class="small-menu-cog language-cog-open rounded-full w-7 h-7 border-0">
                                {!! ori('interface-essential', 'language-translate', 'w-3 h-3') !!}
                            </div>
                            
                            <a class="small-menu-cog rounded-full w-7 h-7 border-0" app-sandy-prevent href="{!! !Auth::check() ? route('user-login') : $sandy->route('create-message') !!}">
                                {!! ori('interface-essential', 'chat-message-text', 'w-3 h-3') !!}
                            </a>
                            
                            @if (plan('settings.pwa_messaging', $bio->id) && user('pwa.enable_push', $bio->id))
                            <div class="small-menu-cog -install-profile-btn w-7 h-7 rounded-full border-0 hidden">
                                {!! ori('interface-essential', 'bell-notification-alarm', 'w-3 h-3') !!}
                            </div>
                            @endif

                            
                            <label class="small-menu-cog rounded-full w-7 h-7 border-0 hidden">
                                <input type="checkbox" class="hidden" name="toggle-switch" data-route="{{ \Bio::route($bio->id, 'user-page-dark-mode') }}">
                                {!! ori('weather', 'Moon', 'w-3 h-3') !!}
                            </label>
                            
                            @if (!$memberships->isEmpty())
                                @php
                                    $popup_class = 'bio-join-membership-open';

                                    if(\Auth::check()) $popup_class = 'manage-membership-open';
                                @endphp
                                
                                <div class="small-menu-cog w-7 h-7 rounded-full border-0 {{ $popup_class }}">
                                    {!! ori('protection-security', 'shield-user-protection', 'w-3 h-3') !!}
                                </div>
                            
                            @endif

                            <div>
                                <a class="ex-button h-7 w-full rounded-full px-5 flex items-center cursor-pointer" {{ !Auth::check() ? 'href='. route('user-login') .'' : 'x-on:click=follow()' }} x-text="is_followed ? '{{ __('Unfollow') }}' : '{{ __('Follow') }}'" app-sandy-prevent=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="--profile-content m-0 items-start px-5">
                        <div class="bio-name-text theme-text-color flex items-center">
                            {{ $bio->name }}
                            {!! user_verified($bio->id) !!}
                        </div>
                        <p class="bio-username-text theme-text-color">
                            {{ '@' . $bio->username }}
                        </p>
                    </div>
                </div>

                <div class="--desc theme-text-color px-5">{{ $bio->bio }}</div>
            </div>

            <div class="px-5">
                <div class="flex items-center gap-3 mt-5">
                
                    <span class="bio-about-span flex items-center gap-1">
                        <span>{{ number_format($bio->followings()->count()) }}</span> {{ __('Following') }}
                    </span>
                    
                    <span class="bio-about-span flex items-center gap-1">
                        <span x-text="followers">{{ number_format($bio->followers()->count()) }}</span> {{ __('Followers') }}
                    </span>
                </div>
                <div class="bio-tabs-menu-g mt-5 mb-5">
                    <a class="sandy-tabs-link active flex justify-center items-center gap-1">
                        {!! ori('interface-essential', 'signal-rss', 'w-5 h-5') !!}
                        {{ __('Feeds') }}</a>
                    <a class="sandy-tabs-link is-flow flex justify-center items-center gap-1">
                        
                        {!! ori('interface-essential', 'umbrella', 'w-5 h-5') !!}
                        {{ __('Flow hubs') }}
                    </a>
                    <a class="sandy-tabs-link flex justify-center items-center gap-1">
                        {!! ori('interface-essential', 'bookmarks-favorite-label', 'w-5 h-5') !!}
                        {{ __('Archives') }}
                    </a>
                </div>
            </div>

        </div>
    </div>
        <div class="context-head m-0 hidden"></div>
            
        <div class="px-5 context-body mt-0 pt-0">

            <div class="sandy-body">
                <div class="sandy-tabs-item">

                    <section class="stories-section pl-0">
                        <div class="display-stories">
                            <div class="swiper myStories">
                                <div class="swiper-wrapper wrapper-stories flex overflow-x-auto pt-4" id="storiesBox">
                                    <!-- HERE -> ITEMS -> AUTOMATICALLY BY JAVASCRIPT -->
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    @if (plan('settings.social', $bio->id))
                        <div class="new-social context-social pb-5 mt-5">
                            <div class="social-links relative z-10 gap-4 grid grid-cols-3 w-full">
                                @foreach (\App\User::ordered_social($bio->id) as $key => $items)
                                    @if (!empty(user('social.'.$key, $bio->id)))
                                    <a class="social-link m-0" style="--color: {{ ao($items, 'color') }}" target="_blank" href="{{ linker(sprintf(ao($items, 'address'), user("social.$key", $bio->id)), $bio->id) }}">
                                        
                                            @if (!empty($orion = ao($items, 'orion')))
                                                {!! orion($orion, 'w-4 h-4 stroke-current') !!}
                                            @endif
                                            @if (!empty($icon = ao($items, 'icon')))
                                                <i class="{{ ao($items, 'icon') }}"></i>
                                            @endif
        
                                        {{ ao($items, 'svg') }}
                                        {{ ao($items, 'name') }}
                                    </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                    @if ($blocks->isEmpty())
                    <div class="no-record">
                        <div class="rounded-3xl block">
                            <div class="text-center flex justify-center flex-col items-center">
                                <img data-src="{{ \Bio::emoji('Pleading_Face') }}" class="lozad w-20" alt="">
                                <div class="text-xl font-bold mt-5">{{ __('No Block.') }}</div>
                                <div class="w-3/4 mt-3">
                                    <div class="text-sm text-gray-400">{{ __('This user has not posted any block.') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @foreach ($blocks as $item)
                        @if (plan("settings.blocks.$item->block", $bio->id))
                            @include('bio::include.index-block')
                        @endif
                    @endforeach
                </div>

                
                <div class="sandy-tabs-item">
                    <livewire:bio::pages.bio.bio-flow-hub :bio="$bio" />
                </div>
                
                <div class="sandy-tabs-item">
                    <div class="bg-white p-5">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach ($liked_blocks as $item)
                            <div class="liked-block">
                                <div class="bio-titles mb-4">
                                    <div class="heading theme-text-color">