<DOCTYPE! html>
<html>
    <head>
        <!-- Set the website title -->
        <title>Room8</title>

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

        <!-- Include Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" crossorigin="anonymous">
        <!-- Set stylesheet -->
        <link rel="stylesheet" href="./css/main.css">

    </head>

    <body>
        <!-- Main navigation menu bar-->
        <div class="menu-bar panel panel-default" id="main-menu-bar">
            <ul class="nav nav-pills nav-justified">
                <li><a href="bills.html" id="link-bills">Bills</a></li>
                <li><a href="roommates.html" id="link-roommates">Roommates</a></li>
                <li class="active"><a href="index.html" id="link-home">Home</a></li>
            </ul>
        </div>

        <!-- Roommate list -->
        <div class="row">
            <div class="col-md-2"></div>
            <div class="panel panel-default col-md-8" id="panel-roommate-list">
                <div class="panel-heading"><h3>Roommates</h3></div>
                <div class="panel-body" id="roommate-list-container">
                    <ul class="list-group" id="roommate-list" data-role='listview' data-inset='true'></ul>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>

        <!-- Bills list -->
        <div class="row">
            <div class="col-md-2"></div>
            <div class="panel panel-default col-md-8" id="panel-bills-list">
                <div class="panel-heading"><h3>Bills</h3></div>
                <div class="panel-body" id="bills-list-container">
                    <table id="bills-table" style='width:100%'></table>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>

        <!-- Finances table -->
        <div class="row">
            <div class="col-md-2"></div>
            <div class="panel panel-default col-md-8" id="panel-finances-list">
                <div class="panel-heading"><h3>Household Finances</h3></div>
                <div class="panel-body" id="finances-list-container">
                    <table id="finances-table" style='width:100%'></table>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>



        <!-- Load libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src='js/main.js'></script>
    </body>
</html>
