<script>
    import { parse_text as parse_emojis } from '../emoji.js';
    import { shorthand as short_time } from '../time.js';

    export let post;

    let time_string = post.created_at.toLocaleString();
</script>

<div class="post-header-container">
    <a href="/{post.user.mention}" class="post-avatar-container">
        <img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
    </a>
    <header class="post-header">
        <div class="post-user-info">
            <a href="/{post.user.mention}" class="name">{@html parse_emojis(post.user.name, post.user.emojis, true)}</a>
            <span class="username">{post.user.mention}</span>
        </div>
        <div class="post-info">
            <a href={post.url} class="created-at">
                <time title={time_string}>{short_time(post.created_at)}</time>
            </a>
        </div>
    </header>
</div>

<style>
    .post-header-container {
        display: flex;
        flex-direction: row;
    }

    .post-header-container a,
    .post-header-container a:visited {
        color: inherit;
        text-decoration: none;
    }
    .post-header-container a:hover {
        text-decoration: underline;
    }

    .post-avatar-container {
        margin-right: 12px;
    }

    .post-avatar {
        border-radius: 8px;
        box-shadow: 2px 2px #0004;
    }

    .post-header {
        display: flex;
        flex-grow: 1;
        flex-direction: row;
    }

    .post-info {
        margin-left: auto;
    }

    .post-user-info a {
        display: block;
    }

    .post-user-info .name :global(.emoji) {
        position: relative;
        top: 4px;
        height: 26px;
    }

    .post-user-info .username {
        opacity: .5;
        font-size: .9em;
    }

    .post-info .created-at {
        font-size: .8em;
    }
</style>
