<template>
    <div :class="{ compact }">
        <ul class="filters">
            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('lesbian') }"
                >
                    <input
                        v-model="localFilter"
                        value="lesbian"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >lesbian
                </label>
            </li>

            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('gay') }"
                >
                    <input
                        v-model="localFilter"
                        value="gay"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >gay
                </label>
            </li>

            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('transsexual') }"
                >
                    <input
                        v-model="localFilter"
                        value="transsexual"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >trans
                </label>
            </li>
        </ul>

        <ul class="filters">
            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('anal') }"
                >
                    <input
                        v-model="localFilter"
                        value="anal"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >anal
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        filter: {
            type: Array,
            default: () => [],
        },
        compact: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            localFilter: this.filter,
        };
    },
};
</script>

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

.filters {
    display: inline-block;
    list-style: none;
    padding: .5rem;
    margin: 0;

    &:not(:last-child) {
        border-right: solid 1px $shadow-hint;
    }
}

.filter {
    display: inline-block;
}

.compact {
    .filters {
        padding: 0;
        border: none;
    }

    .filter {
        margin: 0 0 1.5rem 0;
    }
}

.toggle {
    color: $shadow-weak;
    box-sizing: border-box;
    padding: .5rem;
    margin: 0 .25rem;
    border: solid 1px transparent;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;

    .check {
        display: none;
    }

    &:hover {
        color: $shadow;
    }

    &.active {
        color: $primary;
        box-shadow: 0 0 2px $shadow-weak;
    }
}
</style>
