{{ define "home.html" }}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
        <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
    </head>

    <body style="background-color: rgb(56, 56, 56);">
    <div id="main">

        {{ template "navigation.html" .navigation }}
        <div class="container-fluid row">
        {{ range .listings }}
            <div class="col-sm hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
                <div class="col-auto">
                {{ template "listing.html" . }}
                </div>
            </div>
        {{ end }}
        </div>

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            {{ range .menu.MenuLinks }}
                <a href="{{ .MenuLink }}" style="font-family: monospace;">{{ .LinkText }}</a>
            {{ end }}
          </div>
        </div>



        <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="/api/v1/cdn/slide.js"></script>
        <script src="/api/v1/htmx/htmx.min.js"></script>
        <script src="/api/v1/htmx/json-enc.js"></script>
    </body>
</html>
{{ end }}
