<style>
    .my-profile > header {
        background: url('/app/assets/images/cards/userprefs.jpg');
    }
    .my-profile .preferences [eicdatagrid] .row {
        grid-template-columns: 2fr 1fr;
    }
</style>
<article eiccard media class="my-profile">
    <header>
        <h1>My Profile</h1>
    </header>
    <section>
        <div class="tabs-extended">
            <section>
                <menu eictab>
                    <li>User Informations</li>
                    <li>Preferences</li>
                </menu>
            </section>
        </div>
        <article eiccard class="tab-content">
            <section>
                <div class="cols-2">
                    <article class="identity" eiccard collapsable>
                        <header><h1>User informations</h1></header>
                        <section >
                            <div eicdatagrid footer="hidden" header="hidden"></div>
                        </section>
                    </article>
                    <article class="roles" eiccard collapsable>
                        <header><h1>User Roles</h1></header>
                        <section >
                            <div eicdatagrid footer="hidden" header="hidden"></div>
                        </section>
                    </article>
                </div>
            </section>
        </article>
        <article eiccard class="tab-content preferences">
            <section>
                <div eicdatagrid></div>
            </section>
            <footer>
                <div class="actions cols-1 right">
                    <button eicbutton small danger class="reset">Reset preferences...</button>
                </div>
            </footer>
        </article>
    </section>
</article>
