package corporate_mcudetail

import "cpone/layout"

templ McuDetailScreen(
    breadcrumb templ.Component,
    content templ.Component,
) {
    <div class="container-fluid">
        <div class="row align-item-center mb-10">
            <div class="col-md-10 col-sm-12 p-0">
                @breadcrumb
            </div>            
        </div>
        <div id="loading-parent" class="rounded">
            @content
            <div id="loading-child" class="rounded bg-transparent">
                <div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading....</span>
                </div>
            </div>
        </div>
        <div id="loadingcontent"></div>
    </div>
}

templ CSSMcuDetail(
    CssKesimpulan templ.Component,
) {
    <link
        rel="stylesheet"
        href="assets/css/googlefont/poppins.css"
    />
    <link 
        rel="stylesheet"
        href="assets/css/googlefont/publicsans.css"
    />
    <link 
        rel="stylesheet"
        href="assets/css/googlefont/roboto.css"
    />
    <style>
        body {
            background-color: white;
        }
        #div-chart {
            margin: 40px 10vw 40px 10vw;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        #title {
            font-weight: 600;
        }
    </style>
    @CssKesimpulan
}

templ JSMcuDetail() {
    <script src="assets/js/echarts-js/echart.min.js"></script>
}

templ ShowMcuDetail(
    title string,
    cmp templ.Component,
    css templ.Component,
    js templ.Component,
    navbaruser templ.Component,
    userprofile templ.Component,
) {
    @layout.DashboardLayout(title, css, js, navbaruser, userprofile) {
        @cmp
    }
}