{% load easy_rest %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Debug</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/json.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        /* Tomorrow Night Theme */
        /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
        /* Original theme - https://github.com/chriskempson/tomorrow-theme */
        /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

        /* Tomorrow Comment */
        .hljs-comment,
        .hljs-quote {
            color: #969896;
        }

        /* Tomorrow Red */
        .hljs-variable,
        .hljs-template-variable,
        .hljs-tag,
        .hljs-name,
        .hljs-selector-id,
        .hljs-selector-class,
        .hljs-regexp,
        .hljs-deletion {
            color: #cc6666;
        }

        /* Tomorrow Orange */
        .hljs-number,
        .hljs-built_in,
        .hljs-builtin-name,
        .hljs-literal,
        .hljs-type,
        .hljs-params,
        .hljs-meta,
        .hljs-link {
            color: #de935f;
        }

        /* Tomorrow Yellow */
        .hljs-attribute {
            color: #f0c674;
        }

        /* Tomorrow Green */
        .hljs-string,
        .hljs-symbol,
        .hljs-bullet,
        .hljs-addition {
            color: #b5bd68;
        }

        /* Tomorrow Blue */
        .hljs-title,
        .hljs-section {
            color: #81a2be;
        }

        /* Tomorrow Purple */
        .hljs-keyword,
        .hljs-selector-tag {
            color: #b294bb;
        }

        .hljs {
            display: block;
            overflow-x: auto;
            background: #1d1f21;
            color: #c5c8c6;
            padding: 0.5em;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: bold;
        }

        html {
            font-size: 100%;
        }
    </style>
    {% load_debug_scripts %}
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="container">
    <h1>The api action failed, here you can debug the api, view the output json and step throw the code </h1>
    {% if traceback %}
        <pre class="html"><code>
        {{traceback}}
    </code></pre>
    {% endif %}
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#jsonOutput" role="button" aria-expanded="false">
            Json api output
        </a>
    </p>

    <hr>
    <div class="collapse" id="jsonOutput">
        <div class="card card-body">
   <pre id="#jsonOutput" class="json"><code>
{{output}}
</code></pre>
        </div>
    </div>


</div>
</body>
<script>hljs.initHighlightingOnLoad();</script>


</html>