<script>
    import { getJson } from "$lib/data";
</script>

<style>
    .card {
        background-color: var(--bg-grad);
        border-radius: 1em;
        padding: .2em 2em 2em 2em;
        box-shadow: .5em .5em .5em var(--purple);
    }
    
    .flex-container {
        display: flex;
        align-items: center;
    }

    .profile {
        border-radius: 100%;
        height: 8em;
        width: 8em;
        padding: 1em 1em 1em 1em;
        border: .5em solid var(--bg-grad);
    }
    
    .about {
        padding: 0em 5% 0em 5%;
        font-size: 125%;
    }
    

    @media (max-width: 800px) {
        .flex-container {
            align-items: center;
            flex-direction: column;
            padding: 0px;
        }

        .about {
            font-size: 100%;
        }
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--red);
        /*text-decoration: underline 5px solid var(--bg-grad);*/
        border-bottom: 5px solid var(--bg-grad);
        margin-bottom: 1em;
    }

</style>

{#await getJson('/json/me.json')}
    <div class="card">
        <div class="card-header">
            <h1>Loading...</h1>
        </div>
    </div>
{:then info}
    <div class="card">
        <div class="card-header">
            <h1>{info.name}</h1>
            <h3 class="not-required">{info.job_title}</h3>
        </div>

        <div class="flex-container">
            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
            <p class="about">{@html info.about}</p>
        </div>
    </div>
    
{:catch}
    <div class="card">
        <div class="card-header">
            <h1>Unable to load portfolio overview data</h1>
        </div>
    </div>
{/await}