<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Capacity Dashboard</title>
        <meta name="description" content="Capacity Dashboard">
        <meta name="author" content="capacity">
        <!-- favicon -->
        <link rel="shortcut icon" href="{{ url_for('static', path='assets/favicon/favicon-192x192-wh.png')}}">
        <!-- custom css -->
        <link rel="stylesheet" href="{{ url_for('static', path='/css/capacity.css')}}">
        <!-- bootstrap css -->
        {# <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}"> #}
        <link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/bootswatch/dist/flatly/bootstrap.css') }}">
        <!-- fakeLoader -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/jq-fakeloader/css/fakeLoader.css')}}">
    </head>
    <body>
        <!-- jquery js -->
        <script type="text/javascript" src="{{ url_for('static', path='/js/jquery-3.4.1.js') }}"></script>
        <!-- bootstrap js -->
        <script type="text/javascript" src="{{ url_for('static', path='/js/bootstrap.bundle.js') }}"></script>
        <!-- font-awesome js -->
        <script type="text/javascript" src="{{ url_for('static', path='/font-awesome/js/all.js')}}"></script>
        <!-- fakeLoader -->
        <script type="text/javascript" src="{{ url_for('node_modules', path='/jq-fakeloader/js/fakeLoader.js') }}"></script>
        <!-- begin document -->
        <div class="fakeLoader"></div>
        <script>
        $.fakeLoader({'timeToHide':1200, 'spinner':'spinner4', 'bgColor': '#4686ec'});
        </script>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 px-0">
                    <div class="jumbotron">
                        <div class="container">
                            <h1 class="display-4">Hello, world!</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 px-0">
                    <div class="jumbotron" style="background-color: #4d4d4d; color: white;">
                        <div class="container">
                            <h1 class="display-4">
                            <i class="fas fa-horse fa-spin" style="color: #4686ec;"></i> Hello, world!
                            </h1>
                            <p class="lead">Hello!</p>
                            <p >Hello!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-5">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testmodal">Info</button>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <!-- <div class="row no-gutters"> -->
            <div class="row">
                <div class="col-6">
                    <p>{{ url_for('static', path='/css/bootstrap.css') }}</p>
                    <p>{{ request_dir }}</p>
                    <p>{{ test }}</p>
                </div>
                <div class="col-6">
                    <p>{{ url_for('static', path='/css/bootstrap.css') }}</p>
                    <p>{{ request_dir }}</p>
                    <p>{{ test }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-12 px">
                    <i class="fas fa-dragon" style="font-size: 5em; color: #006200;"></i>
                    <p>{{ url_for('static', path='/css/bootstrap.css') }}</p>
                    <p>{{ request_dir }}</p>
                    <p>{{ test }}</p>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="testmodal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="jumbotron">
                        <div class="container">
                            <h1 id='tochange0'>test</h1>
                            <p class="lead" id="tochange1">subtest</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- custom js -->
        <script type="text/javascript" src="{{url_for('static', path='/js/capacity.js')}}"></script>
    </body>
</html>
