<?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=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&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-b12" >
            <div class="wrapper-color-b12  business-edit-clr edit-clr" style="background-color:<?php $STB_user_theme->echoData("pnl_color")?>;">
                <div class="content-pannel-b12">
                    <div class="content-pannel-top-b12">
                        <div class="content-pannel-left-b12">
                            <?php if($STB_user_data->getData("img")!=="empty"){
                                    echo '<img class="content-pannel-b12-img" style="width:80px;height:80px;"  src="'.$STB_user_data->getData("img") .'" />
                            ';} ?>
                            <div style="padding-left:10px;"> 
                                <div class="autor-name-b12 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-b12 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>
                        </div>
                    </div>

                    <div class="autor-bio-b12 bio-options" style="color:<?php $STB_user_theme->echoData("bio-color")?>;">
                        <?php echo get_user_meta($user_id,"description",true);?> 
                    </div>
                
                    <div class="content-pannel-right-b12">
                        <div class="strb-social-icons-b12" style="">
                            <?php if($STB_user_data->getData("facebook")!=null){
                                echo'<div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("facebook").'" target=”_blank"><i  class="fa-brands fa-facebook"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("linked")!=null){
                                echo'<div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'. $STB_user_data->getData("linked").'" target=”_blank"><i class="fa-brands fa-linkedin"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("insta")!=null){
                                echo'<div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'. $STB_user_data->getData("insta").'" target=”_blank"><i class="fa-brands fa-instagram"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("twitter")!=null){
                                echo'<div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'. $STB_user_data->getData("twitter").'" target=”_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=""><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("tok")!=null){
                                echo' <div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("tok").'" target=”_blank"><i class="fa-brands fa-tiktok"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("youtube")!=null){
                                echo' <div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("youtube").'" target=”_blank"><i class="fa-brands fa-youtube"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("pin")!=null){
                                echo' <div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("pin").'" target=”_blank"><i class="fa-brands fa-pinterest"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("email")!=null){
                                echo' <div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("email").'" target=”_blank"><i class="fa-brands fa-google"></i></a>
                                    </div>';
                            }?>
                            <?php if($STB_user_data->getData("git")!=null){
                                echo' <div class="squirrly-strb-item-socials-b12">
                                        <a rel="'. $STB_user_data->getData("nofollow").' '. $STB_user_data->getData("noopener").' '. $STB_user_data->getData("noreferrer").'"  href="'.$STB_user_data->getData("git").'" target=”_blank"><i class="fa-brands fa-github"></i></a>
                                    </div>';
                            }?>
                        
                        </div>
                    </div>
                </div>
            </div>    
        </div>    
    </div>  
</div>  

<style>
    .modern-theme-wrapper-b12{
        min-width:500px;
        min-height:100px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    }
    .wrapper-color-b12{
        height:100%;
        border-radius:10px;
        background-color:#EEEEFF;
    }
    .content-pannel-b12{
        width:100%;
        padding:10px;
        padding-top:20px;
        padding-bottom:20px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
    }
    .content-pannel-top-b12{
        width:90%;
        padding-bottom:10px;
        display:flex;
        flex-direction:column;
        align-items: flex-start;
        justify-content:center;
        border-bottom:1px solid gray;
    }
    .content-pannel-left-b12{
        width:100%;
        display:flex;
        align-items: flex-start;
    }
    .content-pannel-right-b12{
        width:100%;
        margin-top:20px;
        margin-bottom:10px;
        position:relative;
        display:flex;
    }
    .content-pannel-b12-img{
        border-radius:50%;
        height:80px;
        width:80px;
    }
    .autor-name-b12{
        font-weight:700;
        font-size:22px;
        margin-top:10px;
        align-items: flex-start;
        overflow:hidden;
    }
    .autor-subtitle-b12{
        font-weight:500;
        font-size:14px;
        margin-top:-5px;
        line-height:18px;
        align-items: start;
        display:flex;flex-wrap:wrap;
        overflow:hidden;
        color:#687279;
    }
     .autor-bio-b12{
        width:90%;
        font-size:15px;
        line-height:20px;
        text-align:center;
        color:#687279;
        font-family:"Work+Sans";
        padding-top:10px;
    }
    .strb-social-icons-b12{
        padding-left:30px;
        gap:15px;    
        width:100%;
        margin-top:10px;
        display:flex;      
        align-items:flex-end;
    }
   .squirrly-strb-item-socials-b12{
        padding:5px;
        border-radius:5px;
        height:30px;
        width:30px;
        scale:1.3;
        background-color:transparent;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-b12:hover{
        opacity:0.8;
        box-shadow: 0 4px 30px rgba(0,0,0, 0.3);
        scale:1.4;
   }
   .squirrly-strb-item-socials-b12 a{
        text-decoration:none;
        color:black;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-b12 i{
        font-size:20px;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .squirrly-strb-item-socials-b12 svg{
        width:20px;
        height:20px;  
        border-radius:2px;
   }
   .content-pannel-bottom-b12{
        padding-top:10px;
        padding-bottom:10px;
        display:flex;
        align-items:center;
        justify-content:center;
   }
   .autor-bio-b12{     
        min-height:100px;
        font-size:17px;
        font-weight:500;
        line-height:20px;
        text-align: left;
        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_url1=$('.qr_url12').val();
       
        if(qr_url1!=''){
            $('.qrcode-b12').qrcode({
                text : qr_url1,
                height:70,
                width:70,
            });	
        }
    }(jQuery));
</script>
