<template>
    <span class="inline-choice">
        <div class="form-check">
            <input
                class="form-check-input"
                type="checkbox"
                v-model="selected"
                name="issue"
                :id="issue.id"
                :value="issue"
            />
            <label class="form-check-label" :for="issue.id">
                <span class="badge bg-chill-l-gray text-dark">{{
                    issue.text
                }}</span>
            </label>
        </div>
    </span>
</template>

<script>
export default {
    name: "CheckSocialIssue",
    props: ["issue", "selection"],
    emits: ["updateSelected"],
    computed: {
        selected: {
            set(value) {
                this.$emit("updateSelected", value);
            },
            get() {
                return this.selection;
            },
        },
    },
};
</script>

<style lang="scss" scoped>
@import "ChillMainAssets/module/bootstrap/shared";
@import "ChillPersonAssets/chill/scss/mixins";
@import "ChillMainAssets/chill/scss/chill_variables";
span.badge {
    @include badge_social($social-issue-color);
    font-size: 95%;
    margin-bottom: 5px;
    margin-right: 1em;
}
</style>
