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

<link rel="stylesheet" href="<?php echo _STRB_THEME_URL_ . 'theme_templates/classic/classic.css'?>" >
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<?php echo '<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 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open Sans&display=swap" rel="stylesheet">

<div class="frontend-wrapper">
    <div class="scale-wrapper">
        <div class="" style="width:100%;">
            <div class="classic-buttons" style="display:flex;">
                <button class="strb-about" style="padding:10px;font-weight:600;color:black;">About</button>
                <button class="strb-latest-posts" style="background-color:white;margin-left:10px;padding:10px;color:black;">Latest Posts</button>
            </div>

            <div class="classic-content" style="display:flex;flex-direction:column;z-index:9;width:100%;padding-bottom:20px;padding-top:10px;border-top: 1px solid <?php $STB_user_theme->echoData("brd_color") ?>;border-bottom: 1px solid <?php $STB_user_theme->echoData("brd_color") ?>;">
                <div style="display:flex;">
                    <?php if($STB_user_data->getData("img")!=="empty"){
                        echo '<img style="width:100px;height:100px;border-radius:50%;" src="'.$STB_user_data->getData("img") .'" />';} 
                    ?>
                    <div style="display:flex;flex-direction:column;padding-left:15px;padding-top:20px;width:400px;">
                        <div class="autor-name-c1 name-options" style="color:<?php $STB_user_theme->echoData("name-color")?>;font-size:<?php $STB_user_theme->echoData("name-size")?>px;">
                            <div><?php echo get_user_meta($user_id,"first_name",true);?></div>
                            <div><?php echo get_user_meta($user_id,"last_name",true); ?></div>
                        </div>
                        <div class="subtitle-options" style="font-size:18px;font-weight:500;color:gray;margin-top:-10px;color:<?php $STB_user_theme->echoData("subtitle-color")?>;font-size:<?php $STB_user_theme->echoData("subtitle-size")?>px;"><?php $STB_user_data->echoData("job"); ?></div>
                    </div>
                </div>
                
                <div class="bio-options" style="line-height:20px;color:black;font-size:15px;padding-top:10px;font-size:500;color:gray;color:<?php $STB_user_theme->echoData("bio-color")?>;"><?php echo get_user_meta($user_id,"description",true); ?> </div>
                    
                <div class="" style="margin-top:10px;gap:5px;height:30px;display:flex;justify-content: flex-start;">
                    <?php if($STB_user_data->getData("facebook")!=null){
                            echo'<div class="business-strb-item-social" style="background-color:#4267b2;">
                                <a  href="'.$STB_user_data->getData("facebook").'" target=”_blank"><i  class="fa-brands fa-facebook"></i></a>
                            </div>';
                    }?>
                    <?php if($STB_user_data->getData("insta")!=null){
                            echo'<div class="business-strb-item-social" style="background-color:#e1306c;">
                                <a  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="business-strb-item-social" style="background-color:#1da1f2;" >
                                <a  href="'. $STB_user_data->getData("twitter").'" target=”_blank"><i class="fa-brands fa-twitter"></i></a>
                            </div>';
                    }?>
                    <?php if($STB_user_data->getData("linked")!=null){
                            echo'<div class="business-strb-item-social" style="background-color:#4267b2;" >
                                <a  href="'. $STB_user_data->getData("linked").'" target=”_blank"><i class="fa-brands fa-linkedin"></i></a>
                            </div>';
                    }?>
                    <?php if($STB_user_data->getData("tok")!=null){
                            echo' <div class="business-strb-item-social" style="background-color:#171515;">
                                <a  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="business-strb-item-social" style="background-color:red;">
                                <a  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="business-strb-item-social" style="background-color:red;">
                                <a  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="business-strb-item-social" style="background-color:#1da1f2;">
                                <a  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="business-strb-item-social" style="background-color:black;">
                                <a  href="'.$STB_user_data->getData("git").'" target=”_blank"><i class="fa-brands fa-github"></i></a>
                                </div>';
                    }?>
                </div>     
            </div>
                
            <div class="classic-posts-c1" style="display:none;z-index:9;width:100%;padding-bottom:20px;padding-top:10px;border-top: 1px solid <?php $STB_user_theme->echoData("brd_color") ?>;border-bottom: 1px solid <?php $STB_user_theme->echoData("brd_color") ?>;">
                <div style="display:flex;width:100%;">
                    <?php if($STB_user_data->getData("img")!=="empty"){
                            echo '<img style="width:100px;height:100px;border-radius:50%;" src="'.$STB_user_data->getData("img") .'"/>';} 
                    ?>
                    <div style="width:400px;">
                        <div style="display:flex;gap:10px;font-size:20px;font-weight:500;padding-left:15px;padding-top:20px;">
                            Latest posts by:
                            <?php echo get_user_meta($user_id,"first_name",true);?>
                            <?php echo get_user_meta($user_id,"last_name",true); ?>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-left:15px;"> 
                        <?php   $args = array('author' => $user_id, 'post_type' => 'post','posts_per_page' => '5',);
                                    foreach(get_posts($args) as $post){
                                        echo '<div>
                                                <a style="text-decoration:underline;color:black;" href="' . esc_url( get_permalink( $post->ID ) ) . '"">
                                                    '.$post->post_title.'
                                                </a>
                                            </div>';
                        }?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    

<style>
    .autor-name-c1{
        font-size:20px;
        font-weight:600;
        display:flex;
        gap:5px;
        color:black;
    }
    .classic-posts-c1{
        display:none;
        color:black;
    }
</style>

<script>
    (function ($){
      $(".strb-latest-posts").click((e) => {
        $(e.currentTarget).parent().siblings(".classic-content").css("display", "none");
        $(e.currentTarget).parent().siblings(".classic-posts-c1").css("display","flex");
   
      $(e.currentTarget)
        .siblings(".strb-about")
        .css("background-color", "white");
        $(e.currentTarget).css("background-color", "#bdb9b9ee");
    });
    $(".strb-about").click((e) => {
        $(e.currentTarget).parent().siblings(".classic-content").css("display", "flex");
        $(e.currentTarget).parent().siblings(".classic-posts-c1").css("display","none");
       
        $(e.currentTarget)
        .siblings(".strb-latest-posts")
        .css("background-color", "white");
      $(e.currentTarget).css("background-color", "#bdb9b9ee");
    });
    }(jQuery));
</script>
