<script>
    import { storeSession } from "$/stores/global";
    import PageTitle from "$/components/PageTitle.svelte";
    let persona = {}
    let avatar = null;
    $: persona = $storeSession.persona || {};
    $: avatar = $storeSession?.avatar_img || '/avatars/avatar2.png';
</script>

<PageTitle>Perfil de usuario</PageTitle>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-2">
                <img class="img-fluid" width="100%" alt="" src={avatar} />
                <section class="section">
                    <div class="section-body">
                        <p>Twitter del perfil: <br />
                            @twitter
                        </p>
                    </div>
                </section>
            </div>
            <div class="col">
                <section class="section">
                    <div class="section-header with-profile-charge">
                        <h4 class="pb-2 border-bottom border-accent">{persona.nombres}</h4>
                        <div class="section-icons">
                            <a class="link-icon" href={"#"}><i class="cl cl-facebook"></i></a>
                            <a class="link-icon" href={"#"}><i class="cl cl-twitter"></i></a>
                        </div>
                        <div class="profile-charge">{persona.apellido_a} {persona.apellido_b}</div>
                    </div>
                    <div class="section-body">
                        <p>
                            Vestibulum
                            volutpat lacus ac magna ullamcorper, id semper sem aliquam. Donec
                            vestibulum turpis mi, sed ullamcorper lorem feugiat sed. Praesent
                            ut fringilla dolor. Sed viverra posuere felis eu ullamcorper.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
                        </p>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <section class="section">
            <div class="section-header">
                <h6 class="pb-2 border-bottom border-accent">Información de contacto:</h6>
            </div>
            <div class="section-body">
                <p class="mb-1">Sitio Web: <a href="http://wwww.example.com">http://wwww.example.com</a></p>
                <p class="mb-1">Twitter: @twitter</p>
                <p class="mb-2">Facebook: facebook/ejemplo</p><a class="btn btn-primary btn-block" href={"#"}>Ir al
                    sitio</a>
            </div>
        </section>
    </div>
</div>

