<template>
    <div
        :id="`${release.type}-${release.id}`"
        class="tile"
    >
        <div class="scene">
            <div class="poster">
                <span class="details">
                    <router-link
                        v-if="release.site && release.site.independent"
                        :to="`/network/${release.network.slug}`"
                        class="site site-link"
                    ><img
                        :src="`/img/logos/${release.network.slug}/favicon.png`"
                        class="favicon"
                    >{{ release.network.name }}</router-link>

                    <span
                        v-else-if="release.network"
                        class="site"
                    >
                        <router-link
                            v-tooltip.bottom="`Part of ${release.network.name}`"
                            :title="`Part of ${release.network.name}`"
                            :to="`/network/${release.network.slug}`"
                            class="site-link"
                        ><img
                            :src="`/img/logos/${release.network.slug}/favicon.png`"
                            class="favicon"
                        ></router-link>

                        <router-link
                            v-tooltip.bottom="`More from ${release.site.name}`"
                            :title="`More from ${release.site.name}`"
                            :to="`/site/${release.site.slug}`"
                            class="site-link"
                        >{{ release.site.name }}</router-link>
                    </span>

                    <span v-else />

                    <a
                        v-if="release.date"
                        v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                        :title="release.url && `View scene on ${release.site.name}`"
                        :href="release.url"
                        :class="{ upcoming: isUpcoming, new: release.isNew }"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="date"
                    >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>

                    <a
                        v-else
                        :href="release.url"
                        :class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
                        title="Scene date N/A, showing date added"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="date"
                    >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}</a>
                </span>

                <a
                    :href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="link"
                >
                    <img
                        v-if="release.poster"
                        :src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
                        :alt="release.title"
                        class="thumbnail"
                    >

                    <span
                        v-else-if="release.covers && release.covers.length > 0"
                        class="covers"
                    >
                        <img
                            v-for="cover in release.covers"
                            :key="cover.id"
                            :src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${cover.thumbnail}`"
                            :alt="release.title"
                            class="thumbnail cover"
                        >
                    </span>

                    <div
                        v-else
                        :title="release.title"
                        class="thumbnail"
                    >No thumbnail available</div>
                </a>
            </div>

            <div class="info">
                <a
                    :href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="row link"
                >
                    <h3
                        v-tooltip.top="release.title"
                        :title="release.title"
                        class="title"
                    >
                        <Icon
                            v-if="release.type === 'movie'"
                            icon="film"
                        />{{ release.title }}
                    </h3>
                </a>

                <span class="row">
                    <ul class="actors nolist">
                        <li
                            v-for="actor in release.actors"
                            :key="actor.id"
                            class="actor"
                        >
                            <a
                                :href="`/actor/${actor.slug}`"
                                class="actor-link"
                            >{{ actor.name }}</a>
                        </li>
                    </ul>
                </span>

                <ul
                    :title="release.tags.map(tag => tag.name).join(', ')"
                    class="tags nolist"
                >
                    <li
                        v-for="tag in release.tags"
                        :key="`tag-${tag.slug}`"
                        class="tag"
                    >
                        <router-link
                            :to="`/tag/${tag.slug}`"
                            class="tag-link"
                        >{{ tag.name }}</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
function sfw() {
    return this.$store.state.ui.sfw;
}

export default {
    props: {
        release: {
            type: Object,
            default: null,
        },
        referer: {
            type: String,
            default: null,
        },
        index: {
            type: Number,
            default: null,
        },
    },
    data() {
        return {
            isUpcoming: this.isAfter(this.release.date, new Date()),
        };
    },
    computed: {
        sfw,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.tile {
    width: 100%;
    position: relative;
    background: var(--background);
    box-shadow: 0 0 3px var(--shadow-weak);

    &::before {
        content: '';
        display: inline-block;
        padding: 45%;
    }
}

.scene {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.poster {
    flex-grow: 1;
    height: 0;
    position: relative;
}

.covers {
    background: var(--profile);
    display: flex;

    .cover {
        width: 50%;
    }
}

.thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    background-color: var(--darken-hint);
    color: var(--shadow);
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .5rem;
    margin: 0 0 .25rem 0;
}

.details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    font-size: 0;

    .favicon {
        height: 1rem;
        margin: 0 .25rem 0 0;
    }
}

.site,
.date {
    color: var(--text-light);
    display: flex;
    align-items: center;
    background: var(--darken);
    position: relative;
    font-size: .8rem;
    padding: .25rem;
    text-decoration: none;
}

.date {
    &.upcoming:before {
        content: '';
        background: var(--primary);
        width: .5rem;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.5rem;
    }

    &.new {
        font-weight: bold;
    }
}

.site {
    font-weight: bold;
}

.site-link {
    display: flex;
    color: var(--text-light);
    text-decoration: none;
}

.info {
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
}

.link {
    text-decoration: none;
}

.title {
    margin: 0 .25rem .25rem 0;
    color: var(--text);
    max-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    overflow: hidden;

    .icon {
        margin: 0 .25rem 0 0;
    }
}

.network {
    color: #555;
    margin: 0 .25rem 0 0;
    font-size: .8rem;
}

.actors {
    word-wrap: break-word;
    overflow: hidden;
    max-height: 2.75rem;
    line-height: 1.5rem;
}

.tags {
    max-height: .5rem;
    padding: .25rem .5rem 1rem .5rem;
    word-wrap: break-word;
    overflow-y: hidden;
}

.actor {
    margin: 0 .25rem 0 0;
}

.tag {
    margin: 0 .25rem .25rem 0;
}

.actor:not(:last-of-type)::after {
    content: ",";
}

.actor-link {
    text-decoration: none;

    &:hover {
        color: var(--primary);
    }
}

.actor-link {
    color: var(--link);
}

.tag-link {
    color: var(--shadow);
    display: inline-block;
    padding: .25rem;
    font-size: .75rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    border: solid 1px var(--shadow-hint);

    &:hover {
        color: var(--primary);
    }
}
</style>
