<!DOCTYPE html>

<head>
    {{template "header.html" "Routes"}}
</head>


<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
    <div class="wrapper">
        {{template "navbar.html" "routes"}}

        <div class="page-wrapper">
            <!-- Header -->
            <header class="main-header " id="header">
                <nav class="navbar navbar-static-top navbar-expand-lg">
                    <!-- Sidebar toggle button -->
                    <button id="sidebar-toggler" class="sidebar-toggle">
                        <span class="sr-only">Toggle navigation</span>
                    </button>
                </nav>
            </header>

            <div class="content-wrapper">
                <div class="content">
                    <div id="template_target"></div>

                    <div class="card card-default">
                        <div class="card-header card-header-border-bottom">
                            <h2>Add New Magnet to a Route</h2>

                        </div>
                        <div class="card-body">
                            <form id="new-magnet">
                                <div class="form-group">
                                    <label>Magnet Link</label>
                                    <input type="text" id="magnet-url" class="form-control"
                                        placeholder="Enter Valid Magnet Link">
                                </div>
                                <div class="form-group">
                                    <label>Route</label>
                                    <select class="form-control" id="route-string">
                                        {{range .}}
                                        <option value="{{.Name}}">{{.Name}}</option>
                                        {{end}}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary btn-default">Add</button>
                                </div>
                                <div class="form-footer pt-4 pt-5 mt-4 border-top">
                                    <div class="sk-double-bounce" id="submit_magnet_loading" style="display: none;">
                                        <div class="double-bounce1"></div>
                                        <div class="double-bounce2"></div>
                                    </div>
                                </div>
                             
                            </form>
                        </div>
                    </div>
                </div>

                <footer class="footer mt-auto">
                    <div class="copyright bg-white">
                    </div>
                </footer>
            </div>

            {{template "footer.html"}}

            <script src="assets/js/routes.js"></script>
            <script>
                Distribyted.routes.loadView();
                setInterval(function () {
                    Distribyted.routes.loadView();
                }, 2000)

            </script>
</body>

</html>