<!--
* Customized version of the HAL Browser browser.html provided from https://github.com/mikekelly/hal-browser
* Copyright (c) 2012 Mike Kelly, http://stateless.co/
* MIT LICENSE: https://github.com/mikekelly/hal-browser/blob/master/MIT-LICENSE.txt)
*
* This DSpace version has be customized to include:
*     * Download file functionality (see new downloadFile() method)
*     * Improved AuthorizationHeader parsing (see new getAuthorizationHeader() method)
*     * Upgraded third party dependencies via WebJars
*     * Updated to use Bootstrap 4, based loosely on this PR to HAL Browser:
        https://github.com/mikekelly/hal-browser/pull/102
-->
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>The HAL Browser (customized for DSpace)</title>
    <link rel="stylesheet" media="screen" href="webjars/bootstrap/dist/css/bootstrap.min.css" />
    <style type="text/css">
        body {
           height: 100vh;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
    </style>
    <link rel="stylesheet" media="screen" href="styles.css" />
</head>

<body>

<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">The HAL Browser</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#/" id="entryPointLink">Go To Entry Point</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://github.com/mikekelly/hal-browser">About The HAL Browser</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="login.html">Login</a>
            </li>
        </ul>
    </div>
</nav>

<div id="browser" class="container-fluid"></div>

<script id="location-bar-template" type="text/template">
    <form>
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="appendedInputButton" type="text" value="<%= _.escape(url) %>">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary input-group-text" type="submit">Go!</button>
            </div>
        </div>
    </form>
</script>

<script id="links-template" type="text/template">
    <h2>Links</h2>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">rel</th>
            <th scope="col">title</th>
            <th scope="col">name / index</th>
            <th scope="col">docs</th>
            <th scope="col">GET</th>
            <th scope="col">NON-GET</th>
        </tr>
        </thead>
        <tbody>
        <% _.each(links, function(obj, rel) { %>
        <% if ($.isArray(obj)) { %>
        <% _.each(obj, function(link, i) { %>
        <tr>
            <td><strong><%= HAL.truncateIfUrl(rel) %></strong></td>
            <td><%= link.title || '' %></td>
            <td><%= link.name ? 'name: ' + link.name : 'index: ' + i %></td>
            <td>
                <% if (HAL.isUrl(rel)) { %>
                <a class="dox" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>">&#128366;</a>
                <% } %>
            </td>
            <td>
                <% if (link.templated === true) { %>
                <a class="query btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Query URI template">?</a>
                <% } else { %>
                <a class="follow btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Follow link">&#10140;</a>
                <% } %>
            </td>
            <td>
                <a class="non-get btn btn-warning" href="<%= HAL.normalizeUrl(link.href) %>" title="Perform non-GET request">!</a>
            </td>
        </tr>
        <% }); %>
        <% } else { %>
        <tr>
            <td><strong><%= HAL.truncateIfUrl(rel) %></strong></td>
            <td><%= obj.title || '' %></td>
            <td><%= obj.name || '' %></td>
            <td>
                <% if (HAL.isUrl(rel)) { %>
                <a class="dox btn btn-success" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>">&#128366;</a>
                <% } %>
            </td>
            <td>
                <% if (obj.templated === true) { %>
                <a class="query btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Query URI template">?</a>
                <% } else { %>
                <a class="follow btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Follow link">&#10140;</a>
                <% } %>
            </td>
            <td>
                <a class="non-get btn btn-warning" href="<%= HAL.normalizeUrl(obj.href) %>" title="Perform non-GET request">!</a>
            </td>
        </tr>
        <% } %>
        <% }) %>
        </tbody>
    </table>
</script>

<script id="properties-template" type="text/template">
    <h2>Properties</h2>
    <div class="card read-only">
        <div class="card-body">
            <pre><%= properties %></pre>
        </div>
    </div>
</script>

<script id="request-headers-template" type="text/template">
    <h2>Custom Request Headers</h2>
    <div class="input-group">
        <textarea class="form-control"></textarea>
    </div>
</script>

<script id="response-headers-template" type="text/template">
    <h2>Response Headers</h2>
    <div class="card read-only">
        <div class="card-body">
            <pre><%= status.code %> <%= status.text %>

<% _.each(headers, function(value, name) {
      %><%= _.escape(name) %>: <%
           if(HAL.isFollowableHeader(name)) {
           %><a href="<%= HAL.normalizeUrl(value) %>" class="follow"><%
            }
            %><%= _.escape(value)
            %><% if(HAL.isFollowableHeader(name)) {
            %></a><%
           } %>
<% }) %>
            </pre>
        </div>
    </div>
</script>

<script id="response-body-template" type="text/template">
    <h2>Response Body</h2>
    <div class="card read-only">
        <div class="card-body">
            <pre><%= _.escape(body) %></pre>
        </div>
    </div>
</script>

<script id="query-uri-template" type="text/template">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Expand URI Template</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <form id="query" action="<%= href %>">
                <div class="modal-body">
                    <label for="uri">URI Template:</label>
                    <div class="card read-only" id="uri">
                        <div class="card-body">
                            <pre><%- href %></pre>
                        </div>
                    </div>
                    <label for="input">Input (JSON):</label>
                    <textarea class="form-control" id="input"><%= input %></textarea>
                    <label for="preview">Expanded URI:</label>
                    <div class="card read-only" id="preview">
                        <div class="card-body">
                            <pre class="preview">&nbsp;</pre>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Follow URI</button>
                </div>
            </form>
        </div>
    </div>
</script>


<script id="non-safe-request-template" type="text/template">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Make a NON-GET request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <form class="non-safe" action="<%= href %>">
                <div class="modal-body">
                    <label for="url">Target URI</label>
                    <input name="url" type="text" class="url form-control" id="url" value="<%= href %>" />
                    <label for="method">Method:</label>
                    <input name="method" type="text" class="method form-control" id="method" value="POST" />
                    <label for="headers">Headers:</label>
                    <textarea name="headers" class="headers form-control" style="height: 100px" id="headers">
Content-Type: application/json
<%= user_defined_headers %>
                    </textarea>
                    <label for="body">Body:</label>
                    <textarea name="body" class="body form-control" style="height: 200px" id="body">
{

}
                    </textarea>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Make Request</button>
                </div>
            </form>
        </div>
    </div>
</script>

<script id="dynamic-request-template" type="text/template">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Create/Update</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>

            <form class="non-safe" action="<%= href %>">
                <div class="modal-body">
                    <div id="jsoneditor"></div>

                    <div class="card card-body bg-light">
                        <div class="container-fluid">
                            <div class="row-fluid">
                                <div class="form-group">
                                    <label class="col-form-label" style="display: inline-block; font-weight: bold;">Action:</label>
                                    <input name="method" type="text" class="method form-control" style="width: 98%" value="POST" />
                                    <input name="url" type="text" class="url form-control" style="width: 98%" value="<%= href %>" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Make Request</button>
                </div>
            </form>
        </div>
    </div>
</script>

<script id="embedded-resources-template" type="text/template">
    <h2>Embedded Resources</h2>
</script>

<script id="embedded-resource-template" type="text/template">
    <div class="accordion-heading">
        <a class="accordion-toggle" href="#"><%= resource.identifier %><% if (resource.title) { %>: <span class="embedded-resource-title"><%- resource.title %></span><% } %>
            <% if (HAL.isUrl(resource.embed_rel)) { %>
        <span class="dox pull-right" data-href="<%= HAL.normalizeUrl(HAL.buildUrl(resource.embed_rel)) %>">
          <i class="icon-book"></i>
        </span>
            <% } %>
        </a>
    </div>
</script>

<!-- Pull in updated versions of "vendor" libraries using WebJars -->
<script src="webjars/jquery/dist/jquery.min.js"></script>
<script src="webjars/underscore/underscore-min.js"></script>
<script src="webjars/backbone/backbone-min.js"></script>
<script src="browser/vendor/js/uritemplates.js"></script>
<script src="webjars/urijs/src/URI.min.js"></script>
<script src="webjars/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="browser/js/hal.js"></script>
<script src="browser/js/hal/browser.js"></script>

<!-- Customized for DSpace -->
<script src="js/hal/http/client.js"></script>
<script src="browser/js/hal/resource.js"></script>

<script src="browser/js/hal/views/browser.js"></script>
<script src="browser/js/hal/views/explorer.js"></script>
<script src="browser/js/hal/views/inspector.js"></script>

<script src="browser/js/hal/views/navigation.js"></script>
<script src="browser/js/hal/views/location_bar.js"></script>
<script src="browser/js/hal/views/request_headers.js"></script>

<script src="browser/js/hal/views/resource.js"></script>
<script src="browser/js/hal/views/properties.js"></script>
<script src="browser/js/hal/views/links.js"></script>
<script src="browser/js/hal/views/embedded_resources.js"></script>
<script src="browser/js/hal/views/embedded_resource.js"></script>

<script src="browser/js/hal/views/non_safe_request_dialog.js"></script>
<script src="browser/js/hal/views/query_uri_dialog.js"></script>

<script src="browser/js/hal/views/response.js"></script>
<script src="browser/js/hal/views/response_headers.js"></script>
<script src="browser/js/hal/views/response_body.js"></script>

<script src="browser/js/hal/views/documentation.js"></script>

<script src="webjars/json-editor__json-editor/2.15.1/dist/jsoneditor.js"></script>
<script src="js/vendor/CustomPostForm.js"></script>

<script>
    var browser = new HAL.Browser({
        container: $('#browser'),
        entryPoint: window.location.pathname + 'api'
    });
    Backbone.history.start();
</script>
</body>
