<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

    <title>Minecraft Recipe Viewer</title>

    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <style>
        /*
            Directly taken from Ross Angus' amazing writeup
            on how to turn nested unordered lists into awesome
            tree diagrams

            https://medium.com/@ross.angus/sitemaps-and-dom-structure-from-nested-unordered-lists-eab2b02950cf
        */

        .tree form input[type="submit"] {
            background: none;
            border: none;
            color: black;
            cursor: pointer;
            font-weight: bold;
        }

            .tree form input[type="submit"]:hover {
                color: grey;
            }

        .left {
            float: left;
            margin-right: .2em;
        }

        .right {
            float: right;
            margin-left: .2em;
        }

        /* It's supposed to look like a tree diagram */
        .tree, .tree ul, .tree li {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .tree {
            margin: 0 0 1em;
            text-align: center;
        }

            .tree, .tree ul {
                display: table;
            }

                .tree ul {
                    width: 100%;
                }

                .tree li {
                    display: table-cell;
                    padding: .5em 0;
                    vertical-align: top;
                }
                    /* _________ */
                    .tree li:before {
                        outline: solid 1px #666;
                        content: "";
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }

                    .tree li:first-child:before {
                        left: 50%;
                    }

                    .tree li:last-child:before {
                        right: 50%;
                    }

                .tree span {
                    border: solid .1em #666;
                    border-radius: .2em;
                    display: inline-block;
                    margin: 0 .2em .5em;
                    padding: .2em .5em;
                    position: relative;
                }

                .tree code {
                    padding: .1em .5em;
                    position: relative;
                    margin: 0 .2em .5em;
                    display: inline-block;
                }

                /* If the tree represents DOM structure */
                .tree code {
                    font-family: monaco, Consolas, 'Lucida Console', monospace;
                }

                /* | */
                .tree ul:before,
                .tree span:before {
                    outline: solid 1px #666;
                    content: "";
                    height: .5em;
                    left: 50%;
                    position: absolute;
                }

                .tree code:before {
                    outline: solid 1px #666;
                    content: "";
                    height: .7em;
                    left: 50%;
                    position: absolute;
                }

                .tree ul:before {
                    top: -.5em;
                }


                .tree span:before {
                    top: -.55em;
                }

                .tree code:before {
                    top: -.65em;
                }


                /* The root node doesn't connect upwards */
                .tree > li {
                    margin-top: 0;
                }

                    .tree > li:before,
                    .tree > li:after,
                    .tree > li > code:before,
                    .tree > li > span:before {
                        outline: none;
                    }
    </style>
</head>
<body>
    <div class="container-fluid" style="margin-top: 10px">
        <div class="row">
            <div class="col-sm-4" style="border-right: 1px solid #ccc;">
                <form method="POST">
                    <p>I want to craft 
                    <input type="number" min="1" name="amount" value="{{ amount }}" style="width: 10%;"/>
                    items with the ID
                    <input type="text" name="id" value="{{ id }}" style="width: 30%;"/>
                    </p>
                    <input type="submit" value="Show me!" />
                </form>
            </div>

            <div class="col-sm-6 overflow-auto">
                {{ recipe | safe }}
            </div>
        </div>
    </div>
</body>
</html>
