<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <link rel='stylesheet' href="/css/main.css">
</head>
<body>
  <main role='main' id='app'>
    <h1>API Playground</h1>
    <div class='route-table'>
      <%= for route <- @routes do %>
        <article class='route-bar'>

          <header class='route-summary'>
            <span class='info'><%= String.upcase(inspect(route.verb)) %></span>
            <span class='info'><%= route.path %></span>
            <button data-js-toggle="route-panel" class='expand-btn'>+</button>
          </header>
          <main class='hidden route-panel'>
            <div class='request-console'>
              <div class='input-group'>
                <label>
                  URL:
                </label>
                <input data-js-req-path value='<%= route.path %>'>
              </div>

              <div class='input-group'>
                <label>
                  Request Headers:
                </label>
                <textarea data-js-req-headers>Content-Type: application/json</textarea>
              </div>

              <div class='input-group'>
                <label>
                  Request Body:
                </label>
                <textarea data-js-req-data>{}</textarea>
              </div>

              <div class='hidden input-group' data-js-resp class='output'>
              </div>

              <input type='hidden' data-js-req-method value="<%= route.verb %>">

              <button class='btn' data-js-req-btn>
                Send Request
              </button>
            </div>
            <table class='hidden debug-info'>
              <tr>
                <th>Plug</th>
                <td><%= route.plug %></td>
              </tr>
              <tr>
                <th>Opts</th>
                <td><%= route.opts %></td>
              </tr>
              <tr>
                <th>Helper</th>
                <td><%= route.helper %></td>
              </tr>
            </table>
          </main>
        </article>
      <% end %>
    </div>
  </main>
  <script src="/js/app.js"></script>
</body>
</html>
