<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}
            {{page_title|default:"Untitled Page"}}
        {% endblock title %}
    </title>
    
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body style="background-color: lavenderblush;">
    <!-- NAV BAR -->
    {% block navbar %}
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <a class="navbar-brand" href="/explorer">Explorer</a>
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/explorer/about">About</a>
                </li>
            </ul>
            <div class="container-fluid justify-content-end">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="/admin/logout">Logout</a>
                    </li>
                </ul>
            </div>
            
        </nav>
    {% endblock navbar %}

    {% block content %}
        <p>Place content here.</p>
    {% endblock content %}
</body>
</html>