<div class="card-container">
  <span class="pro" id="bmanAccount"></span>
  <img id="bmanImage" class="round" alt="user" width="200" height="200" />
  <h3 id="bmanName"></h3>
  <h6 id="bmanLocation"></h6>
  <p id="bmanOccupation"></p>
  <div class="buttons">
    <button class="primary">
      Message
    </button>
    <button class="primary ghost">
      Following
    </button>
  </div>
</div>

<p id="flagStatus"></p>
<button onClick="flipFlag()">Toggle Flag</button>
<p><em>Note that other users may change the flag status at any time</em></p>

// thanks to https://codepen.io/FlorinPop17/pen/EJKgKB

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  box-sizing: border-box;
}

body {
  font-family: Montserrat, sans-serif;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100vh;
  margin: 0;
}

h3 {
  margin: 10px 0;
}

h6 {
  margin: 5px 0;
  text-transform: uppercase;
}

p {
  font-size: 14px;
  line-height: 21px;
}

.card-container {
  background-color: #231E39;
  border-radius: 5px;
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
  color: #B3B8CD;
  padding-top: 30px;
  position: relative;
  width: 350px;
  max-width: 100%;
  text-align: center;
}

.card-container .pro {
  color: #231E39;
  background-color: #FEBB0B;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 7px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.card-container .round {
  border: 1px solid #03BFCB;
  border-radius: 50%;
  padding: 7px;
}

.buttons {
  margin-bottom: 15px;
}

button.primary {
  background-color: #03BFCB;
  border: 1px solid #03BFCB;
  border-radius: 3px;
  color: #231E39;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  padding: 10px 25px;
}

button.primary.ghost {
  background-color: transparent;
  color: #02899C;
}

function changeData(data) {
  if (data.image && data.occupation && data.name) {
    const elName = document.getElementById("bmanName");
    const elOccupation = document.getElementById("bmanOccupation");
    const elLocation = document.getElementById("bmanLocation");
    const elAccount = document.getElementById("bmanAccount");
    changeImage(data.image, "bmanImage")
    elName.innerText = data.name;
    elOccupation.innerText = data.occupation;
    elLocation.innerText = data.location;
    elAccount.innerText = data.account;
  }
}

function changeImage(image, id) {
  const el = document.getElementById(id);
  el.src = 'https://raw.githubusercontent.com/remotesynth/Feature-Flags-Slide-Deck/main/images/' + image;
}

const elStatus = document.getElementById("flagStatus");
getFlag();
user = {
   key: self.crypto.randomUUID(),
 };
const client = LDClient.initialize("62fe31bdd28cd612550340ec", user);
client.on("ready", function () {
  // JSON FLAG DATA CHANGE
  const jsonData = client.variation("bman", "{}");
  changeData(jsonData);
  client.on("change:bman", function (flagValue) {
    changeData(flagValue);
  });
});

async function getFlag() {
  const res = await fetch('https://change-ld-flags.remotesynth.workers.dev/?project=codepen&flag=bman');
  const status = await res.json()
  
  setFlagStatus(status.flagIsOn)
}

async function flipFlag() {
  const res = await fetch('https://change-ld-flags.remotesynth.workers.dev/?project=codepen&flag=bman&flip=true');
  const status = await res.json();
  
  setFlagStatus(status.flagIsOn)
}

function setFlagStatus(status) {
  if (status)
    elStatus.innerText = "The flag is currently on";
  else
    elStatus.innerText = "The flag is currently off";
}