<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Slinky</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-static/">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('bootstrap.static', filename='datepicker.css')}}">
    <meta name="theme-color" content="#7952b3">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .badge a {
            color: white;
            text-decoration: none;
        }

        .badge.text-dark a {
            color: black;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        [role=status] {
            display: none;
        }

        .tooltip>.tooltip-inner {
            max-width: 60em !important;
            text-align: left !important;
        }

        .highlight {
            background-color: #f48024;
            color: #1d1d1e;
            border-radius: 2px;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
            padding: 0 1px 0 1px;
        }

        .checkboxlist ul {
            list-style-type: none;
            margin: 0;
            padding: 1em;
        }
    </style>

    <!-- Custom styles for this template -->
    <!-- <link href="navbar-top.css" rel="stylesheet"> -->
    <script>
        // <![CDATA[
        function waiting() {
            document.querySelectorAll('[role="status"]')[0].style.display = "inline-block";
        }
      // ]]>
    </script>
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Slinky</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" href="/_/add">Add</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/_/list">List</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>