<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="icon" type="image/png" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta name="description" content="Invite to join <%= title %>">
    <meta property="og:site_name" content="Crispy">
    <meta property="og:title" content="<%= title %>">
    <meta property="og:image" content="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta property="og:description" content="Invite to join <%= title %>">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="cookcons" style="display: none; width: 99%; height: 108%; align-items: center; flex-direction: column; justify-content: center; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.7); color: black; position: absolute; top: 0px; left: 0px;">
        <div style="text-align: center; padding: 48px 26px 24px;  background-color: white; overflow: visible; box-sizing: border-box; display: block;">
            <h2>Cookie Consent</h2>
            <p>To use this site, you must first accept the usage of Cookies.</p>
            <p>The only Cookies used on this site are essential to maintain functionality.</p>
            <p>This site, cannot, does not and will not ever track you for any reason.</p>
            <p>To opt-out of Cookies on this site, discontinue use of this website.</p>
            <button style="border: none; background-color: blue; color: white; text-transform: uppercase; font-weight: 600; cursor: pointer;" onclick="acceptCookie()">Accept Cookies</button>
        </div>
    </div>
    <script>
        const hasAcceptedCookies = localStorage.getItem('cookie');
        if (!hasAcceptedCookies) {
           document.getElementById("cookcons").style.display = 'block';
        }
        function acceptCookie() {
            localStorage.setItem("cookie", 'true');
            document.getElementById("cookcons").style.display = 'none';
        }
    </script>
      
    <div style="height: 100%; display: flex; color: #fff; align-items: center; flex-direction: column; justify-content: center; background-size: cover; background-position: center;">
      <div style="text-align: center; padding: 48px 26px 24px; background-color: rgba(0, 0, 0, 0.6); overflow: visible; box-sizing: border-box;">
        <% if (rebounce) { %>
          <h1><%= title %></h1>
          <h3>This is an invite to join <%= title %></h3>
          <b>To accept this invite, please wait for a future update. The <a style="color: aqua;" href="/api">API</a> is currently <underline>offline</underline>.</a></b>
          <div style="padding-top: 1rem;">
            <% if (username) { %>
              <button style="text-transform: uppercase; font-size: 1rem; padding: .5rem .5rem .7rem .7rem; border-radius: 10px; align-items: center; cursor: pointer; border: none;">accept invite</button>
            <% } else { %>
              <button style="text-transform: uppercase; font-size: 1rem; padding: .5rem .5rem .7rem .7rem; border-radius: 10px; align-items: center; cursor: pointer; border: none;" onclick="location.href='/auth';">log in to accept invite</button>
            <% } %>
          </div>
          <p style="font-size: smaller; color: rgba(255, 255, 255, 0.4);">Rebounce ID: <%= rebounce %></p>
        <% } else { %>
          <h1><%= title %></h1>
          <h3>Hey there! Welcome to the new invite page!</h3>
          <b>To see this page in action, <a style="color: crimson;" href="/app">Request a valid Invite Link!</a></b>
          <p style="font-size: smaller; color: rgba(255, 255, 255, 0.4);">Rebounce ID not applicable</p>
        <% } %>
      </div>
    </div>
    
          
</body>
</html>