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

<script>
export default {
  name: "CheckSocialAction",
  props: ["action", "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-action-color);
  font-size: 95%;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  margin-right: 1em;
  text-align: left;
  line-height: 1.2em;
  &::before {
    position: absolute;
    left: 11px;
    top: 0;
    margin: 0 0.3em 0 -0.75em;
  }
  position: relative;
  padding-left: 1.5em;
}
</style>
