{{#> base }}
    {{> AppSidebar/sidebar charts-chartjs=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                <li class="nav-item">
                    <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0">
                        <span>Circular Charts</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-1" data-bs-toggle="tab" href="#tab-content-1">
                        <span>Lines & Bars Charts</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Pie Chart</h5>
                                    <div class="chart-container">
                                        <canvas id="pie-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Radar Chart</h5>
                                    <div class="chart-container">
                                        <canvas id="radar-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Doughnut</h5>
                                    <div class="chart-container">
                                        <canvas id="doughnut-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Polar Chart</h5>
                                    <div class="chart-container">
                                        <canvas id="polar-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane tabs-animation fade" id="tab-content-1" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Vertical Bars</h5>
                                    <div class="chart-container">
                                        <canvas id="chart-vert-bar"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Horizontal Bars</h5>
                                    <div class="chart-container">
                                        <canvas id="chart-horiz-bar"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Line Chart</h5>
                                    <div class="chart-container">
                                        <canvas id="line-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Stacked Bars</h5>
                                    <div class="chart-container">
                                        <canvas id="stacked-bars-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}