<style media="screen">
  body {
    font-family: sans-serif;
  }

  .incident {
    width: 350px;
    padding: 8px;
    padding-bottom: 2px;
    background: #f4f5f7;
    border-radius: 4px;
    margin: 10px 0;
  }

  .incident-name {
    font-size: 1.2rem;
  }

  .incident-status {
    margin-top: 4px;
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.8);
  }

  .component {
    margin: 8px 0;
    padding: 8px;
    background: #00C7E5;
    border-radius: 4px;
  }

  .component-name {
    font-size: 1rem;
  }

  .component-status {
    font-size: 0.8rem;
  }

  .operational {
    background: #E3FCEF;
  }

  .degraded-perfomance {
    background: #FFFAE6;
  }

  .partial-outage {
    background: #FFFAE6;
  }

  .under-maintenance {
    background: #FFFAE6;
  }

  .major-outage {
    background: #FFEBE6;
  }

  .divider {
    width: 100%;
  }
</style>

<div id="teamlead-status-widget" class="teamlead-status-widget"></div>

<script type="text/javascript">
  const widget = document.getElementById('teamlead-status-widget')

  fetch('https://jqn5z9955dzm.statuspage.io/api/v2/incidents/unresolved.json')
    .then((res) => res.json())
    .then(({ incidents }) => {
      widget.innerHTML = incidents.map(({
        name: incidentName,
        status: incidentStatus,
        components
      }) => {
        const incidentContents = components.map(({ name, status }) => (`
          <div class="component ${status.replace('_', '-')}">
            <div class="component-name">${name}</div>
            <div class="component-status">Status: ${status.replace('_', ' ')}</div>
          </div>
        `)).join('')

        return `
          <div class="incident ${incidentStatus}">
            <div class="incident-name">${incidentName}</div>
            <div class="incident-status">Status: ${incidentStatus.replace('_', ' ')}</div>
            <div class="divider"></div>
            ${incidentContents}
          </div>
        `
      }).join('')
    })
</script>