<!DOCTYPE html>
<html>

<head>
  <title>Express App</title>
  <link rel="stylesheet" href="styles/local.css">
</head>

<body>
   <h1>API Authorization Demo</h1>
   <h4>api @ <a href="https://secrets-api.appbrewery.com/" target="_blank">https://secrets-api.appbrewery.com/</a></h4><br>


   <button type="submit" id="noAuth" onclick="window.location.href='/noAuth'">No Auth<br>
      <span class="small">returns 1 random secret</span>
   </button>
   <button id="basicAuth" onclick="window.location.href='/basicAuth'">Basic Auth<br>
      <span class="small">returns a full page of 10</span>
   </button>
   <button id="apiKey" onclick="window.location.href='/apiKey'">API Key<br>
      <span class="small">returns all with emScore of 5 or better</span>
   </button>
   <button id="bearerToken" onclick="window.location.href='/bearerToken'">Bearer Token<br>
      <span class="small">returns secret # 42</span>
   </button>


   <div class="response-area">
      <!-- default output when no data -->
      <% if (!locals.content) { %>
         <p>API Requested Data Display</p>

      <!-- process received data -->
      <% } else { %>
         <% const data = JSON.parse(content) %>
         <h4><%= data.title %></h4>

         <!-- Check if multiple items for listing purposes -->
         <% if (data.secrets.length === 1) { %>

            <!-- displays one single item in a <p> tag -->
            <% data.secrets.forEach( sec => { %>
               <p><%= sec.secret %></p>
            <% }) %>

         <!-- displays multiple items in an ordered list -->
         <% } else { %>
            <ol>
               <% data.secrets.forEach( sec => { %>
                  <li><%= sec.secret %></li>
               <% }) %>
            </ol>
         <% } %>

      <% } %>
   </div>

</body>
</html>