<template>
  <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
    <button
      class="badge rounded-pill me-1"
      :class="{
        'bg-chill-green': modelValue,
        'bg-chill-red': !modelValue,
      }"
      @click="toggleEmergency"
    >
      {{
        modelValue
          ? trans(CHILL_TICKET_TICKET_BANNER_OPEN)
          : trans(CHILL_TICKET_TICKET_BANNER_CLOSED)
      }}
    </button>
  </span>
</template>

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

// Props
const props = defineProps<{
  modelValue: 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>
