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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="/static/images/X.ico">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/lib/bootstrap/bootstrap-4.4.1.min.css" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/static/css/GUI.css">

    <!-- Font Awesome icons -->
    <link rel="stylesheet" href="/static/lib/fontawesome-free-5.12.0-web/css/all.css">

    <title>MATRX</title>
</head>

<body>
    <!-- Toolbar -->
    <div class="container-fluid toolbar bg-dark">
        <img src="/static/images/matrx_logo_light.svg" alt="MATRX" id="matrx_logo">
    </div>

    <!-- Content -->
    <div class="container-fluid">
        <br>
        <h2>Welcome to MATRX</h2>
        <br>

        <div class="dropdown show">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Choose an agent to view
            </a>

            <div id="view_mode" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
    <script src="/static/lib/popper/popper-1.16.0.js"></script>
    <script src="/static/lib/bootstrap/bootstrap-4.4.1.min.js"></script>

    <!-- Custom JavaScript -->
    <script src="/static/js/util.js"></script>
    <script src="/static/js/startscreen.js"></script>

</body>

</html>
