<style>
    .contents .row { grid-template-columns: 3fr 2fr 1fr; }
    .contents .dataset .row .cell:nth-child(4) { text-align: center; }
    .assets .row { grid-template-columns: 1fr 3fr; }
    .assets .cell:nth-child(2) { text-align: center; }
    .metrics [eicbarchart] { 
        min-width: 180px;
        height: 75px;
    }
    
    [device="tablet"] .metrics {
        display: flex;
        flex-direction: initial;
    }
    .healthcheck > header { background: url('/app/assets/images/cards/healthcheck.jpg'); }
</style>
<article eiccard media class="healthcheck">
    <header>
        <h1>System Health Check</h1>
    </header>
    <section>
        <div class="cols-2 left">
            <article eiccard class="metrics">
                <section>
                    <label>Memory usage</label>
                    <div eicbarchart class="memory"></div>
                </section>
                <section>
                    <label>Rendering</label>
                    <div eicbarchart class="fps"></div>
                </section>
            </article>
            <div>
                <article eiccard collapsable collapsed>
                    <header>
                        <h1>Active contents</h1>
                        <h2>List of all available DOM contents</h2>
                    </header>
                    <section>
                        <div eicdatagrid class="contents"></div>
                    </section>
                </article>
                <article eiccard collapsable collapsed>
                    <header>
                        <h1>Assets Store</h1>
                        <h2>List of all loaded resources</h2>
                    </header>
                    <section>
                        <div eicdatagrid class="assets"></div>
                    </section>
                </article>
            </div>    
        </div>
    </section>
</article>