package corporate_mcudetail

templ TabKelainanLab(
    chartsxs []templ.Component,
    chartsmd []templ.Component,
    chartslg []templ.Component,
) {
    <div class="container-fluid">
        <div class="d-flex justify-content-center py-10">
            <h2 class="title text-black" style="margin-bottom: 0;">Data Kelainan Lab</h2>
        </div>
        
        // xs
        <div class="d-xs-block d-sm-block d-md-none">
            <div class="row justify-content-center">
                for _, c := range chartsxs {
                    <div class="col-12 my-4">
                        @ChartCard(c)
                    </div>
                }
            </div>
        </div>

        // md
        <div class="d-none d-md-block d-lg-none">
            <div class="row justify-content-center">
                for _, c := range chartsmd {
                    <div class="col-12 my-4">
                        @ChartCard(c)
                    </div>
                }
            </div>
        </div>

        // lg
        <div class="d-none d-lg-block">
            <div class="row justify-content-center">
                for _, c := range chartslg {
                    // if i == 0 {
                    //     <div class="col-12 my-4">
                    //         @ChartCard(c)
                    //     </div>
                    // } else {
                    //     <div class="col-6 my-4">
                    //         @ChartCard(c)
                    //     </div>
                    // }
                    <div class="m-4" style="width: 47%;">
                        @ChartCard(c)
                    </div>
                }
            </div>
        </div>
    </div>
}