<template>
    <ol class="timeline">
        <li class="timeline-item">
            <span class="timeline-item-icon | faded-icon">
                <font-awesome-icon icon="pen"/>
            </span>
            <div class="timeline-item-description">
                <i class="avatar | small">
                    <font-awesome-icon icon="user"/>
                </i>
                <span><a href="#">Luna Bonifacio</a> has changed <a href="#">2 attributes</a> on <time
                    datetime="21-01-2021">Jan 21, 2021</time></span>
            </div>
        </li>
        <li class="timeline-item">
            <span class="timeline-item-icon | faded-icon">
                <font-awesome-icon icon="check"/>
            </span>
            <div class="timeline-item-description">
                <i class="avatar | small">
                    <font-awesome-icon icon="user"/>
                </i>
                <span><a href="#">Yoan Almedia</a> moved <a href="#">Eric Lubin</a> to <a href="#">📚 Technical Test</a> on <time
                    datetime="20-01-2021">Jan 20, 2021</time></span>
            </div>
        </li>
        <li class="timeline-item | extra-space">
            <span class="timeline-item-icon | filled-icon">
                <font-awesome-icon icon="envelope"/>
            </span>
            <div class="timeline-item-wrapper">
                <div class="timeline-item-description">
                    <i class="avatar | small">
                        <font-awesome-icon icon="user"/>
                    </i>
                    <span><a href="#">Yoan Almedia</a> commented on <time
                        datetime="20-01-2021">Jan 20, 2021</time></span>
                </div>
                <div class="comment">
                    <p>I've sent him the assignment we discussed recently, he is coming back to us this week. Regarding
                        to our last call, I really enjoyed talking to him and so far he has the profile we are looking
                        for. Can't wait to see his technical test, I'll keep you posted and we'll debrief it all
                        together!😊</p>
                    <button class="button">👏 2</button>
                    <button class="button | square">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path fill="currentColor"
                                  d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7 12a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H7z"/>
                        </svg>
                    </button>
                </div>
                <button class="show-replies">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
                         width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                         stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
                    </svg>
                    Show 3 replies
                    <span class="avatar-list">
					<i class="avatar | small">
						<font-awesome-icon icon="user"/>
					</i>
					<i class="avatar | small">
						<font-awesome-icon icon="user"/>
					</i>
                    <i class="avatar | small">
						<font-awesome-icon icon="user"/>
					</i>
				</span>
                </button>
            </div>
        </li>
        <li class="timeline-item">
            <span class="timeline-item-icon | faded-icon">
                <font-awesome-icon icon="comment"/>
            </span>
            <div class="new-comment">
                <input type="text" placeholder="Add a comment..."/>
            </div>
        </li>
    </ol>
</template>

<script>

export default {
    name: 'Timeline',
    props: {
        timeline: {
            type: Array,
            default: () => []
        }
    },
};
</script>

<style>

*,
*:before,
*:after {
    box-sizing: border-box;
}

:root {
    --c-grey-100: #f4f6f8;
    --c-grey-200: #e3e3e3;
    --c-grey-300: #b2b2b2;
    --c-grey-400: #7b7b7b;
    --c-grey-500: #3d3d3d;

    --c-blue-500: #688afd;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* End basic CSS override */

.timeline {
    width: 85%;
    display: flex;
    flex-direction: column;
    padding: 32px 0 32px 32px;
    border-left: 2px solid var(--c-grey-200);
    font-size: 1.125rem;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    gap: 24px;

    & + * {
        margin-top: 24px;
    }

    & + .extra-space {
        margin-top: 48px;
    }
}

.new-comment {
    width: 100%;

    input {
        border: 1px solid var(--c-grey-200);
        border-radius: 6px;
        height: 48px;
        padding: 0 16px;
        width: 100%;

        &::placeholder {
            color: var(--c-grey-300);
        }

        &:focus {
            border-color: var(--c-grey-300);
            outline: 0; /* Don't actually do this */
            box-shadow: 0 0 0 4px var(--c-grey-100);
        }
    }
}

.timeline-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: -57px;
    flex-shrink: 0;
    overflow: hidden;

    svg {
        width: 20px;
        height: 20px;
    }

    &.faded-icon {
        background-color: var(--c-grey-100);
        color: var(--c-grey-400);
    }

    &.filled-icon {
        background-color: var(--c-blue-500);
        color: #fff;
    }
}

.timeline-item-description {
    display: flex;
    padding-top: 6px;
    gap: 8px;
    color: var(--c-grey-400);

    img {
        flex-shrink: 0;
    }

    a {
        /*color: var(--c-grey-500);*/
        font-weight: 500;
        text-decoration: none;

        &:hover,
        &:focus {
            outline: 0; /* Don't actually do this */
            color: var(--c-blue-500);
        }
    }
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;

    &.small {
        width: 28px;
        height: 28px;
    }

    img {
        object-fit: cover;
    }
}

.comment {
    margin-top: 12px;
    /*color: var(--c-grey-500);*/
    border: 1px solid var(--c-grey-200);
    background: var(--dark);
    border-radius: 6px;
    padding: 16px;
    font-size: 1rem;
}

.button {
    border: 0;
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 12px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    height: 32px;
    padding: 0 8px;
    background-color: var(--c-grey-100);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 99em;

    &:hover {
        background-color: var(--c-grey-200);
    }

    &.square {
        border-radius: 50%;
        color: var(--c-grey-400);
        width: 32px;
        height: 32px;
        padding: 0;

        svg {
            width: 24px;
            height: 24px;
        }

        &:hover {
            background-color: var(--c-grey-200);
            color: var(--c-grey-500);
        }
    }
}

.show-replies {
    color: var(--c-grey-300);
    background-color: transparent;
    border: 0;
    padding: 0;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    cursor: pointer;

    svg {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }

    &:hover,
    &:focus {
        color: var(--c-grey-200);
    }
}

.avatar-list {
    display: flex;
    align-items: center;

    & > * {
        position: relative;
        box-shadow: 0 0 0 2px #fff;
        background: var(--dark);
        margin-right: -8px;
    }
}

</style>