<?php defined('ABSPATH') || die('Cheatin\' uh?');?>

<link rel="stylesheet" href="<?php echo _STRB_THEME_URL_ . 'Standard/style.css'?>" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<div class="frontend-wrapper">
    <div class="scale-wrapper">
        <div class="modern-theme-wrapper-10" >
            <div class="wrapper-color-10  business-edit-clr edit-clr" style="background-color:<?php $STB_user_theme->echoData("pnl_color")?>;">
                <div class="content-pannel-10">
                    <div class="content-pannel-top-10">
                        <?php if($STB_user_data->getData("img")!=="empty"){
                                echo '<img class="content-pannel-10-img"  src="'.$STB_user_data->getData("img") .'" />
                        ';}?>

                        <div style="padding-left:10px;width:50%;padding-top:10px;border-right:1px solid gray; "> 
                            <div class="autor-name-10 name-options" style="color:<?php $STB_user_theme->echoData("name-color")?>;font-size:<?php $STB_user_theme->echoData("name-size")?>px;">
                                <?php echo get_user_meta($user_id,"first_name",true);?>
                                <?php echo get_user_meta($user_id,"last_name",true); ?>
                            </div>
                            <div class="autor-subtitle-10 subtitle-options" style="color:<?php $STB_user_theme->echoData("subtitle-color")?>;font-size:<?php $STB_user_theme->echoData("subtitle-size")?>px;">
                                <?php $STB_user_data->echoData("companyslug")?>
                                <?php $STB_user_data->echoData("job"); ?>
                            </div>
                        </div>

                        <?php if($STB_user_data->getData("qrcode")!=null){
                                echo '<div class="qrcode-10" style="width:80px;height:80px;overflow:hidden;position:absolute;right:10px;"></div>';
                        }?>
                    </div>

                    <input class="qr_url10" type="hidden" value="<?php echo $STB_user_data->getData("qrcode"); ?>"/>
                    <div class="content-pannel-bottom-10">
                        <div class="autor-bio-10 bio-options" style="color:<?php $STB_user_theme->echoData("bio-color")?>;">
                            <?php echo get_user_meta($user_id,"description",true);?> 
                        </div>
                    </div>
                </div>
            </div>    
        </div>    
    </div>  
</div>  


<style>
    .modern-theme-wrapper-10{
        min-width:500px;
        min-height:100px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    }
    .wrapper-color-10{
        height:100%;
        background-color:#EEEEFF;
    }
    .content-pannel-10{
        width:100%;
        padding-top:30px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
    }
    .content-pannel-top-10{
        display:flex;
        border-top:1px solid gray;
        border-bottom:1px solid gray;
        padding:5px;
        width:90%;
        position:relative;
    }
    .content-pannel-10-img{
        border-radius:50%;
        height:80px;
        width:80px;
    }
  
    .autor-name-10{
        font-size:20px;
        font-weight:500;
        line-height:32px;
        color:black;
    }
    .autor-subtitle-10{
        font-size:18px;
        color:gray;
    }
    .strb-social-icons-10{
        padding:5px;
        gap:10px;
        width:180px;
        padding-left:10px;
        display:flex;
        flex-wrap:wrap;
    }
   .squirrly-strb-item-socials-10{
        padding:5px;
        border-radius:5px;
        background-color:transparent;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-10:hover{
        opacity:0.8;
        box-shadow: 0 4px 30px rgba(0,0,0, 0.3);
        scale:1.2;
   }
   .squirrly-strb-item-socials-10 a{
        text-decoration:none;
        color:black;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-10 i{
        font-size:22px;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-10 svg{
        width:20px;
        height:20px;  
        border-radius:2px;
   }
   .content-pannel-bottom-10{
        width:90%;
   }
   .autor-bio-10{     
        min-height:100px;
        font-size:16px;
        font-weight:500;
        line-height:22px;
        padding:5px;
        padding-bottom:15px;
        padding-top:10px;
        overflow:hidden;
        color:#687279;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    (function ($){
        let qr_url10=$('.qr_url10').val();
       
       if(qr_url10!=''){
         $('.qrcode-10').qrcode({
            text : qr_url10,
            height:80,
            width:80,
	    });	
    }
    }(jQuery));
</script>
