<nav class="navbar navbar-expand navbar-light bg-dark">
    <a class="sidebar-toggle d-flex mr-2">
        <i class="hamburger align-self-center"></i>
    </a>
    <h1 style="margin-bottom: 0px; color: azure;">reudom</h1>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav ml-auto">
            <h3 style="float: right; color: azure;"> {{ title }}</h3>
        </ul>
    </div>
</nav>

<div class="container-fluid mm-active" style="padding-left: 35px;padding-right: 35px; padding-bottom:100px;">
    <div style="height: 260px; margin-top: 20px;">
        
        <div class="row" style="margin-left: 0px; margin-right: 0px;">
            <div class="col-12 col-lg-5 col-xl-3 d-flex" style="float:left">
                <div class='card flex-fill'>
                    <div class="card-body my-2">
                        <h4 class="header-title">Overview</h4>
                        <table class="table my-0">
                            <tbody>
                                {% for p in parameters %}
                                <tr>
                                    <td> {{ p.name }}</td>
                                    <td class="text-right">{{ p.value }}</td>
                                </tr>
                                {% endfor %}
                                <tr>
                                    <td>Description:</td>
                                    <td class="text-right">{{ description }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 order-lg-1">
                <div class="card-body">
                    <div class="testChars" style="width: 230px; height: 200px;">
                        <canvas id="myChart" width="250" height="250"></canvas>
                    </div>
                </div> 
            </div>

        </div>
    </div>
</div>