<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.replace('_', ' ')}</div>
          </div>
        `)).join('')

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

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1996.1126893114936!2d30.334273851370448!3d59.98004098180239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x469633e42f75791d%3A0x859432795de1c721!2z0JHQvtC70YzRiNC-0Lkg0KHQsNC80L_RgdC-0L3QuNC10LLRgdC60LjQuSDQv9GALiwgNjgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTQxMDA!5e0!3m2!1sru!2sru!4v1500503970279" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>