{% load i18n %}

<div class="billboard rounded-top">
    <div class="row g-0">
        <div class="col-md-6 g-2 d-none" id="rattingBarContainer">
            <div class="card-header bg-primary d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0" id="barTitle">{% trans "Diagram" %}</h3>
            </div>
            <div class="card-body bg-secondary">
                <div id="rattingBar" class="rattingbar w-100"></div>
            </div>
        </div>
        <div class="col-md-6 g-2 d-none" id="ChartContainer">
            <div class="card-header bg-primary">
                <h3 class="card-title">{% trans "Chord" %}</h3>
            </div>
            <div class="card-body bg-secondary">
                <div id="rattingChart" class="rattingchart w-100"></div>
            </div>
        </div>
    </div>
</div>