<template>
  <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
    <button
      class="badge rounded-pill me-1"
      :class="{
        'bg-warning': modelValue,
        'bg-secondary': !modelValue,
        'no-pointer': props.disabled,
      }"
      @click="toggleEmergency"
      :disabled="props.disabled"
      type="button"
    >
      {{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
    </button>
  </span>
</template>
<style scoped>
.no-pointer {
  cursor: not-allowed !important;
}
</style>

<script lang="ts" setup>
import { trans, CHILL_TICKET_TICKET_BANNER_EMERGENCY } from "translator";

// Props
const props = defineProps<{
  modelValue: boolean;
  disabled?: boolean;
}>();

// Emits
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
}>();

// Methods
function toggleEmergency() {
  const newValue = !props.modelValue;
  emit("update:modelValue", newValue);
}
</script>

<style lang="scss" scoped>
a.flag-toggle {
  color: white;
  cursor: pointer;
  &:hover {
    color: white;
    text-decoration: underline;
    border-radius: 20px;
  }
  i {
    margin: auto 0.4em;
  }
  span.on {
    font-weight: bolder;
  }
}
button.badge {
  &.bg-secondary {
    opacity: 0.5;
    &:hover {
      opacity: 0.7;
    }
  }
}
</style>
