<!DOCTYPE html>
<html lang="es">
    <head>
        <?php include( 'gtm_head.html'); ?>
        <?php include( 'favicon.html'); ?>

        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta
            name="keywords"
            content="<?php echo strtolower($username) ?>, matecito, matecito.app, matecito.co, matecito app, donar, crowdfunding, creadores, ilustradores, mate, donaciones, donaciones mercadopago, vincular paypal con mercado pago, matesito, financiamiento colectivo, financiamiento, plataforma de financiamiento, aplicación de Matecito, plataforma de donaciones, comunidad de creadores, crowdfunding en argentina, donaciones online, financiamiento para artistas, creadores de contenido digital"
        />
        <title><?php echo strtolower($username) ?> | Matecito</title>
        <link rel="canonical" href="https://www.matecito.co/<?php echo strtolower($username) ?>" />
        <meta name="title" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta name="description" content="<?php echo $description ?>" />
        <meta property="og:url" content="https://www.matecito.co/<?php echo strtolower($username) ?>" />
        <meta property="og:title" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta property="og:description" content="<?php echo $description ?>" />
        <meta property="og:site_name" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta property="og:image" content="<?php echo CDN_URL; ?>/images/meta_logo.png" />
        <meta property="og:type" content="website" />
        <meta name="twitter:site" content="@matecito_app" />
        <meta property="twitter:title" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta name="twitter:description" content="<?php echo $description ?>" />
        <meta name="twitter:image" content="<?php echo CDN_URL; ?>/images/meta_logo.png" />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:title" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta itemprop="name" content="<?php echo strtolower($username) ?> | Matecito" />
        <meta itemprop="description" content="‪<?php echo $description ?>" />
        <meta itemprop="image" content="<?php echo CDN_URL; ?>/images/meta_logo.png" />

        <link rel="preload" href="https://unpkg.com/@dmuy/toast@2.0.4/dist/mdtoast.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
        <link rel="stylesheet" href="<?php echo CDN_URL; ?>/css/v2_style.css?version=<?= $cssVersion; ?>" />
        <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style" onload="this.onload=null;this.rel='stylesheet'" />

        <noscript>
            <link rel="stylesheet" href="https://unpkg.com/@dmuy/toast@2.0.4/dist/mdtoast.css" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        </noscript>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
        <script src="https://unpkg.com/@dmuy/toast@2.0.4/dist/mdtoast.js" defer></script>

        <script src="<?php echo CDN_URL; ?>/js/<?php echo $consFile; ?>" defer></script>
        <script src="<?php echo CDN_URL; ?>/js/api.js?version=<?php echo $apiVersion; ?>" defer></script>

        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js" defer></script>
    </head>

    <body>
        <?php include( 'gtm_body.html'); ?>

        <div class="containera hidden" id="loading">
            <div class="centered-child-back row noMargin">
                <div class="col s12 sm"></div>
                <h3 class="col s12 center loading noMargin">
                    cargando
                </h3>
                <div class="col s12 md"></div>
                <div class="col s12">
                    <div class="loader"></div>
                </div>
            </div>
        </div>

        <?php include( 'v2_error.php'); ?>

        <div id="content" class="hidden">
            <header>
                <?php include( 'v2_header.php'); ?>
            </header>
            <main class="row noBottomPadding noMarginBottom" id="mainProfile">
                <div class="col s12" id="profileHeader">
                    
                    <div class="col s12 l8 push-l2 xl6 push-xl3">
                        <div id="backProfileMd" class="row noPadding noMargin hidden">
                            <div class="col s12 sm"></div>
                            <div class="col s12 sm"></div>
                            <i class="material-icons small back-button  noPadding " id="backButton">arrow_back</i>
                        </div>
                        <div class="col s12 md"></div>
                        <div class="col s12 md"></div>
                        <div class="col s12 profile-header noPadding">
                            <div class="col">
                                <div class="avatar-container">
                                    <img alt="Avatar" class="avatar-profile avatarUserProfile" />
                                </div>
                            </div>

                            <div class="col content-container">
                                <div class="nick-profile cutText" id="profileNick"></div>
                                <div class="col s12 sm hide-on-med-and-up"></div>
                                <p class="about-me-profile hidden cutText" id="description-profile"></p>
                                <ul class="user-stats-profile hidden" id="stats-profile">
                                    <li id="siteLayout" class="hidden col s12 noPadding">
                                        <a target="_blank" class="link-profile col noPadding"> </a>
                                    </li>
                                    <li id="statsUser" class="hidden">
                                        <div class="stats-item inline hidden" id="receivedStats"></div>
                                        <div class="stats-item inline hidden" id="subsStats"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col s12 md"></div><div class="col s12 md"></div>
                </div>

                <div id="goalLayout" class="col s12 hidden">
                    <div class="col s12 l8 push-l2 xl6 push-xl3" id="profileOptions">
                        <div class="col s12 noPadding">
                            <div class="row goal-card">
                                <div class="col s12 noPadding">
                                    <div class="col s12 m8 noPadding cutText">
                                        <div class="goal-title col s12 noMargin noPadding" id="goal-title"></div>
                                        <div class="goal-description col s12 noMargin noPadding" id="goal-description"></div>
                                    </div>
                                    <div class="col s12 md hide-on-med-and-up"></div>
                                    <div class="col s12 m4 ">
                                        <div class="progress-container">
                                            <div class="progress-bar" id="goal-progress-percent"></div>
                                            <span class="progress-text" id="goal-progress"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col s12 noPadding menu-items-profile-layout">
                    <div id="menu" class="col s12 l8 push-l2 xl6 push-xl3 noPadding menuProfile">
                        <ul class="menu-items-profile noMargin noPadding">
                            <li class="menu-item-profile menu-item-small-profile selectedItem-profile col s4 center" data-target="div1">
                                <div class="col s12">APORTAR</div>
                            </li>
                            <li class="menu-item-profile menu-item-small-profile col s4 center" data-target="div2">
                                <div class="col s12">POSTS</div>
                            </li>
                            <li class="menu-item-profile menu-item-small-profile col s4 center" data-target="div3">
                                <div class="col s12">APORTES</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col s12" id="profileContent">
                    <div class="col s12 l8 push-l2 xl6 push-xl3 noPadding">
                        <div  class="col s12 noPadding">
                            <div class="col s12 md"></div>
                            <div class="col s12 md"></div>
                            <div id="div1" class="content-div">
                                <?php include('v2_profile_main.php'); ?>
                            </div>
                            <div id="div2" class="content-div hidden">
                                <?php include('v2_profile_posts.php'); ?>
                            </div>
                            <div id="div3" class="content-div hidden">
                                <?php include('v2_profile_history.php'); ?>
                            </div>
                        </div>
                    </div>
                </div>

                <button id="btnGoTop" class="hidden"><i class="material-icons">arrow_upward</i></button>
            </main>

            <footer>
                <?php include('v2_footer.html'); ?>
            </footer>
        </div>

        <div id="modal-sensitive" class="modal-window">
            <div class="">
                <h1 class="noMargin">Aviso</h1>
                <hr />
                <div class="row"></div>
                <p class="col s12">La página que estás por visitar puede contener material para adultos. Solo podés ingresar si sos mayor de edad.</p>

                <div class="row noMarginBottom">
                    <div class="col s12 md"></div>
                    <div class="col s12 md"></div>

                    <div class="col s12 noMarginBottom">
                        <button class="col s12 button-18 noBorders padding-horizontal-md" role="button" id="exitSite">SALIR</button>
                    </div>
                    <div class="col s12 md"></div>
                    <div class="col s12 noMarginBottom">
                        <button class="col s12 button-18 noBorders padding-horizontal-md primary" role="button" id="closeModal">INGRESAR</button>
                    </div>

                </div>
            </div>
        </div>

        <input id="username" value="<?=$username ?>" class="hidden" />
        <input id="cantMatecitos" value="1" class="hidden" />

        <script src="<?php echo CDN_URL; ?>/js/v2_common.js?version=<?php echo $commonVersion;?>"></script>
        <script type="text/javascript" src="<?php echo CDN_URL; ?>/js/v2_profile.js?version=0.009"></script>
        <script src="https://www.google.com/recaptcha/api.js?render=6LcTHgEjAAAAAI22Mxr76Po1jguHOVQS3l3KTtfp"></script>
    </body>
</html>
