<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Budibase</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">  
  </head>

  <script>
    function checkStatusButton() {
      if (window.location.href.includes("budibase.app")) {
        var button = document.getElementById("statusButton")
        button.removeAttribute("hidden")
      }
    }

    function goToStatus() {
      window.location.href = "https://status.budibase.com";
    }
    function goHome() {
      window.location.href = window.location.origin;
    }
    function getStatus() {
      var http = new XMLHttpRequest()
      var url = window.location.href
      http.open('GET', url, true)
      http.send()
      http.onreadystatechange = (e) => {
        var status = http.status
        document.getElementById("status").innerHTML = status

        var message
        if (status === 502) {
          message = "Bad gateway. Please try again later."
        } else if (status === 503) {
          message = "Service Unavailable. Please try again later."
        } else if (status === 504) {
          message = "Gateway timeout. Please try again later."
        } else {
          message = "Please try again later."
        }

        document.getElementById("message").innerHTML = message
      }
    }

    window.onload = function() {
      checkStatusButton()
      getStatus()
    };
   
  </script>

  <style>

    :root {
      --spectrum-global-color-gray-600: rgb(144,144,144);
      --spectrum-global-color-gray-900: rgb(255,255,255);
      --spectrum-global-color-gray-800: rgb(227,227,227);
      --bb-indigo: #6E56FF;
      --bb-indigo-light: #9F8FFF;
    }

    html, body {
      background-color: #1a1a1a;
      padding: 0;
      margin: 0;
      overflow: hidden;
      color: #e7e7e7;
      font-family: 'Roboto', sans-serif;
    } 
    button {
      color: #e7e7e7;
      font-family: 'Roboto', sans-serif;
      border: none;
      font-size: 15px;
      border-radius: 15px;
      padding: 8px 22px;
    }
    button:hover {
      cursor: pointer;
    }
    .main {
      height: 100vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .status {
      color: var(--spectrum-global-color-gray-600)
    }
    .title {
      font-weight: 400;
      color: var(--spectrum-global-color-gray-900)
    }
    .message {
      font-weight: 200;
      color: var(--spectrum-global-color-gray-800)
    }
    .buttons {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 15px;
    }
    .homeButton {
      background-color: var(--bb-indigo);
    }
    .homeButton:hover {
      background-color: var(--bb-indigo-light);
    }
    .statusButton {
      background-color: transparent;
      margin-left: 20px;
      border: none;
    }
    .hero {
      height: 60px;
      margin: 10px 40px 10px 0;
    }
    .hero img {
      height: 100%;
    }
    .content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
    }
    h1 {
      margin-bottom: 10px;
    }
    h3 {
      margin-top: 0;
    }

    @media only screen and (max-width: 600px) {
      .content {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>

  <script src="">
  </script>

  <body>
    <div class="main">
      <div class="content">
        <div class="hero">
          <img src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" alt="Budibase Logo">
        </div>
        <div class="info">
          <div>
            <h4 id="status" class="status">&nbsp;</h4>
            <h1 class="title">
              Houston we have a problem!
            </h1>
            <h3 id="message" class="message">&nbsp;</h3>
          </div>
          <div class="buttons">
            <button class="homeButton" onclick=goHome()>Return home</button> 
            <button id="statusButton" class="statusButton" hidden="true" onclick=goToStatus()>Check out status</button> 
          </div>
        </div>
      </div>
    </div>
  </body>

</html>