@page "/demo"

<body class="">
    <div class="document-container d-flex">

        <aside>
            <div class="sidebar @sidebarClosed bottombar">


                <div class="profile-details">
                    <div class="avatar">
                        <img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
                    </div>
                    <div class="profile-description">
                        <div class="profile-name">Janko Jordan</div>
                        <div class="profile-job">Web Designer</div>
                    </div>
                    <i class='bx bx-log-out'></i>
                </div>

                <nav>
                    <ul class="navbar mt-sm-5 pt-sm-5">
                        <li class="navbar-item fab">
                            <a href="#">
                                <i class='bx bx-pencil'></i>
                                <span class="navbar-link">New document</span>
                            </a>
                            <span class="navbar-tooltip">
                                New document
                            </span>
                        </li>

                        <li class="navbar-item">
                            <a href="#">
                                <i class='bx bx-home'></i>
                                <span class="navbar-link">Main navbar link 1</span>
                                <span class="navbar-link navbar-link-detail">
                                    <div class="badge-label">
                                        22
                                    </div>
                                </span>
                            </a>
                            <span class="navbar-tooltip">
                                Main navbar link 1
                            </span>
                        </li>


                        <li class="navbar-item">
                            <a href="#">
                                <i class='bx bx-shape-square'></i>
                                <span class="navbar-link">Main navbar link 2</span>
                                <span class="navbar-link navbar-link-detail">
                                    <div class="badge-label">
                                        22
                                    </div>
                                </span>
                            </a>
                            <span class="navbar-tooltip">
                                Main navbar link 2
                            </span>
                        </li>

                        <li class="navbar-item">
                            <a href="#">
                                <i class='bx bx-message-square-dots'></i>
                                <span class="navbar-link">Main navbar link 3</span>
                                <span class="navbar-link navbar-link-detail">
                                    <div class="badge-label">
                                        22
                                    </div>
                                </span>
                            </a>
                            <span class="navbar-tooltip">
                                Main navbar link 3
                            </span>
                        </li>

                        <li class="navbar-item">
                            <a href="#">
                                <i class='bx bx-customize'></i>
                                <span class="navbar-link">Main navbar link 4</span>
                                <span class="navbar-link navbar-link-detail">
                                    <div class="badge-label">
                                        22
                                    </div>
                                </span>
                            </a>
                            <span class="navbar-tooltip">
                                Main navbar link 4
                            </span>
                        </li>
                        <div class="sidebar-divider"></div>
                    </ul>

                </nav>
            </div>
        </aside>



        <main class="main @sidebarClosed @sidebarRightClosed">




            <div class="d-flex justify-space-between">
                <div>
                    <i class='bx bx-menu' @onclick="ToggleSidebar"></i>
                    @* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
                    <span class="text">Open Sidebar</span>


                </div>

                <div>
                    <i class='bx bx-filter' @onclick="ToggleSidebarRight"></i>
                    <span class="text">Open Filters</span>
                </div>
            </div>
            <section id="borders" class="mt-3 b-1 b-r-4 p-5">
                <h2>Borders</h2>
                <p>Use border utilities to quickly style the border, border color and border-radius of an element.
                    Great for images, buttons, or any other element. Responsive classes are available that use the
                    same viewport width breakpoints as the grid system.
                </p>
                <div>
                    <h4 class="text-core mt-5">Position</h4>
                    <div class="d-flex flex-wrap gap-3 square">
                        <div class="b-1">b-1</div>
                        <span class="bt-1">bt-1</span>
                        <span class="br-1">br-1</span>
                        <span class="bb-1">bb-1</span>
                        <span class="bl-1">bl-1</span>
                        <span class="bx-1">bx-1</span>
                        <span class="by-1">by-1</span>
                    </div>
                </div>
                <hr class="mt-4 mb-4">
                <div>
                    <h4 class="text-core mt-5">Color</h4>
                    <div class="d-flex flex-wrap gap-3 square">
                        <span class="b-1 b-c-core">b-1 <br> b-c-core</span>
                        <span class="b-1 b-c-primary">b-1 <br> b-c-primary</span>
                        <span class="b-1 b-c-secondary">b-1 <br> b-c-secondary</span>
                        <span class="b-1 b-c-success">b-1 <br> b-c-success</span>
                        <span class="b-1 b-c-info">b-1 <br> b-c-info</span>
                        <span class="b-1 b-c-warning">b-1 <br> b-c-warning</span>
                        <span class="b-1 b-c-danger">b-1 <br> b-c-danger</span>
                        <span class="b-1 b-c-white">b-1 <br> b-c-white</span>
                        <span class="b-1 b-c-light">b-1 <br> b-c-light</span>
                        <span class="b-1 b-c-dark">b-1 <br> b-c-dark</span>
                        <span class="b-1 b-c-black">b-1 <br> b-c-black</span>
                    </div>
                </div>
                <hr class="mt-4 mb-4">
                <div>
                    <h4 class="text-core mt-5">Border-radius</h4>
                    <div class="d-flex flex-wrap gap-3 square">
                        <span class="b-1 b-r-0">b-1 b-r-0</span>
                        <span class="b-1 b-r-1">b-1 b-r-1</span>
                        <span class="b-1 b-r-2">b-1 b-r-2</span>
                        <span class="b-1 b-r-3">b-1 b-r-3</span>
                        <span class="b-1 b-r-4">b-1 b-r-4</span>
                        <span class="b-1 b-r-5">b-1 b-r-5</span>
                        <span class="b-1 b-r-circle">b-1 b-r-circle</span>
                        <span style="width:100px;" class="b-1 b-r-pill">b-1 b-r-pill</span>
                    </div>
                </div>
            </section>


            <section id="text" class="mt-3 b-1 b-r-4 p-5">
                <h2>Colors</h2>
                <p>Convey meaning through color with a handful of color utility classes. Includes support for
                    styling links with hover states, too.
                </p>
                <h4 class="text-core mt-5">Color</h4>
                <div class="grid test grid-col-6 gap-3">
                    <span class="p-3 text-core">text-core </span>
                    <span class="p-3 text-primary">text-primary </span>
                    <span class="p-3 text-secondary">text-secondary </span>
                    <span class="p-3 text-success">text-success</span>
                    <span class="p-3 text-info">text-info</span>
                    <span class="p-3 text-warning">text-warning</span>
                    <span class="p-3 text-danger">text-danger</span>
                    <span class="p-3 text-white">text-white</span>
                    <span class="p-3 text-light">text-light</span>
                    <span class="p-3 text-dark">text-dark</span>
                    <span class="p-3 text-black">text-black</span>
                </div>

                <div class="mt-4 b-1 b-r-3 px-4 element-fg-core">
                    <pre>
                                <code id="htmlViewer" style="display:block;overflow-x:auto;">
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-core&quot;</span>&gt;</span>text-core<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-primary&quot;</span>&gt;</span>text-primary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-secondary&quot;</span>&gt;</span>text-secondary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-success&quot;</span>&gt;</span>text-success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-info&quot;</span>&gt;</span>text-info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-warning&quot;</span>&gt;</span>text-warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-danger&quot;</span>&gt;</span>text-danger<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-white&quot;</span>&gt;</span>text-white<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-light&quot;</span>&gt;</span>text-light<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-dark&quot;</span>&gt;</span>text-dark<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-black&quot;</span>&gt;</span>text-black<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
                                </code></pre>
                </div>
                <hr class="mt-4 mb-4">
                <h4 class="text-core mt-5">Background color</h4>
                <div class="grid test grid-col-6 gap-3">
                    <div class="p-3 bg-core">bg-core</div>
                    <div class="p-3 bg-primary">bg-primary</div>
                    <div class="p-3 bg-secondary">bg-secondary</div>
                    <div class="p-3 bg-success">bg-success</div>
                    <div class="p-3 bg-info">bg-info</div>
                    <div class="p-3 bg-warning">bg-warning</div>
                    <div class="p-3 bg-danger">bg-danger</div>
                    <div class="p-3 bg-white">bg-white</div>
                    <div class="p-3 bg-light">bg-light</div>
                    <div class="p-3 bg-dark">bg-dark</div>
                    <div class="p-3 bg-black">bg-black</div>
                </div>
                <hr class="mt-4 mb-4">

                <h4 class="text-core mt-5">Link color</h4>
                <div class="grid test grid-col-6 gap-3">
                    <a href="#" class="p-3 text-core">text-core </a>
                    <a href="#" class="p-3 text-primary">text-primary </a>
                    <a href="#" class="p-3 text-secondary">text-secondary </a>
                    <a href="#" class="p-3 text-success">text-success</a>
                    <a href="#" class="p-3 text-info">text-info</a>
                    <a href="#" class="p-3 text-warning">text-warning</a>
                    <a href="#" class="p-3 text-danger">text-danger</a>
                    <a href="#" class="p-3 text-white">text-white</a>
                    <a href="#" class="p-3 text-light">text-light</a>
                    <a href="#" class="p-3 text-dark">text-dark</a>
                    <a href="#" class="p-3 text-black">text-black</a>
                </div>
            </section>


            <section id="text" class="mt-3 b-1 b-r-4 p-5">
                <h2>Text</h2>
                <p>Documentation and examples for common text utilities to control size, alignment, wrapping,
                    weight, and
                    more.
                </p>

                <!-- text sizes -->
                <h4 class="text-core mt-5">Text sizes</h4>
                <div class="grid test grid-col-1 gap-3">
                    <div>
                        <h5>This is h5 </h5>
                        <p class="text-small"><span class="text-semibold">text-small</span><br>This is small font
                            size<br>
                            Lorem
                            ipsum dolor sit, amet
                            consectetur
                            adipisicing
                            elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione?
                        </p>
                    </div>
                    <div>
                        <h4>This is h4 </h4>
                        <p><span class="text-semibold">No class required</span><br>This is base font size <br>Lorem
                            ipsum
                            dolor sit amet consectetur,
                            adipisicing elit.
                            Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero
                            ratione.
                        </p>
                    </div>
                    <div>
                        <h3>This is h3 </h3>
                        <p class="text-medium"><span class="text-semibold">text-medium</span><br>This is medium font
                            <br>
                            Lorem
                            ipsum
                            dolor sit, amet consectetur
                            adipis
                            elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas?
                        </p>
                    </div>
                    <div>
                        <h2>This is h2 </h2>
                        <p class="text-large"><span class="text-semibold">text-large</span><br>This is large font
                            <br>
                            Lorem
                            ipsum
                            dolor sit, amet consectetur
                            adipisicing
                            elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est
                            maiores.
                        </p>
                    </div>
                    <div>
                        <h1>This is h1 </h1>
                        <p class="text-extralarge"><span class="text-semibold">text-extralarge</span><br>This is
                            extra
                            large
                            font <br>
                            Lorem
                            ipsum dolor sit amet,
                            consectetur adipisicing elit. Beatae, modi!
                        </p>
                    </div>
                    <div>
                        <p class="text-sm-medium"><span class="text-semibold">text-sm-medium</span>
                            <br>Medium size text on viewports sized SM (small) or wider.
                        </p>
                    </div>
                    <div>
                        <p class="text-md-medium"><span class="text-semibold">text-md-medium</span>
                            <br>Medium size text on viewports sized MD (medium) or wider.
                        </p>
                    </div>
                    <div>
                        <p class="text-lg-medium"><span class="text-semibold">text-lg-medium</span>
                            <br>Medium size text on viewports sized LG (large) or wider.
                        </p>
                    </div>
                    <div>
                        <p class="text-xl-medium"><span class="text-semibold">text-xl-medium</span>
                            <br>Medium size text on viewports sized XL (extra-large) or wider.
                        </p>
                    </div>
                </div>

                <div>
                    <h4 class="text-core mt-5">Text alignment</h4>
                    <p>Easily realign text to components with text alignment classes.
                    </p>
                    <div class="b-1 b-r-3 p-5 border-core">
                        <div class="text-left">
                            <p class="text-semibold">text-left</p>
                            <p>Left aligned text on all viewport sizes</p>
                        </div>
                        <hr>
                        <div class="text-center">
                            <p class="text-semibold">text-center</p>
                            <p>Center aligned text on all viewport sizes.</p>
                        </div>
                        <hr>
                        <div class="text-right">
                            <p class="text-semibold">text-right</p>
                            <p>Right aligned text on all viewport sizes.</p>
                        </div>
                        <hr>
                        <div class="text-justify">
                            <p class="text-semibold">text-justify</p>
                            <p>Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur
                                adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere
                                reprehenderit, aut assumenda. Velit.</p>
                        </div>
                        <hr>
                        <div class="text-sm-right">
                            <p class="text-semibold">text-sm-right</p>
                            <p>Right aligned text on viewports sized SM (small) or wider.</p>
                        </div>
                        <hr>
                        <div class="text-md-right">
                            <p class="text-semibold">text-md-right</p>
                            <p>Right aligned text on viewports sized MD (medium) or wider.</p>
                        </div>
                        <hr>
                        <div class="text-lg-right">
                            <p class="text-semibold">text-lg-right</p>
                            <p>Right aligned text on viewports sized LG (large) or wider.</p>
                        </div>
                        <hr>
                        <div class="text-xl-right">
                            <p class="text-semibold">text-xl-right</p>
                            <p>Right aligned text on viewports sized XL (extra-large) or wider.</p>
                        </div>
                    </div>
                </div>


                <div>
                    <h4 class="text-core mt-5">Font weight</h4>
                    <p>Quickly change the weight (boldness).
                    </p>
                    <div class="b-1 b-r-3 p-5 border-core">
                        <p class="text-semibold">text-thin</p>
                        <div class="text-thin">
                            <p>This is thin text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-regular</p>
                        <div class="text-regular">
                            <p>This is normal weight text - no class required</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-semibold</p>
                        <div class="text-semibold">
                            <p>This is semibold text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-bold</p>
                        <div class="text-bold">
                            <p>This is bold text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-extrabold</p>
                        <div class="text-extrabold">
                            <p>This is extra bold text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-sm-bold</p>
                        <div class="text-sm-bold">
                            <p>Bold text on viewports sized SM (small) or wider.</p>
                        </div>
                    </div>
                </div>


                <div>
                    <h4 class="text-core mt-5">Text transform</h4>
                    <p>Transform text in components with text capitalization classes or italicize text.
                    </p>
                    <div class="b-1 b-r-3 p-5 border-core">
                        <p class="text-semibold">text-italic</p>
                        <div class="text-italic">
                            <p>This is italic text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-lowercase</p>
                        <div class="text-lowercase">
                            <p>This is lowercased text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-uppercase</p>
                        <div class="text-uppercase">
                            <p>This is uppercased text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-capitalize</p>
                        <div class="text-capitalize">
                            <p>This is capitalized text</p>
                        </div>
                        <hr>
                        <p class="text-semibold">text-nowrap</p>
                        <div style="width:150px; background:yellow;" class="text-nowrap">
                            This text should overflow the parent.
                        </div>
                        <hr>
                        <p class="text-semibold">text-truncate</p>
                        <div style="width:150px; background:yellow;" class="text-truncate">
                            <span>
                                This is text is truncated
                            </span>
                        </div>
                    </div>
                </div>
            </section>


            <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
                <h2>Buttons</h2>
                <p>Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
                    states, and more.
                </p>
                <div>
                    <h4 class="text-core mt-5">Examples</h4>
                    <div class="d-flex flex-wrap gap-3 ">
                        <button type="button" href="#" class="btn btn-core">click me</button>
                        <button type="button" href="#" class="btn btn-primary">click me</button>
                        <button type="button" href="#" class="btn btn-secondary">click me</button>
                        <button type="button" href="#" class="btn btn-success">click me</button>
                        <button type="button" href="#" class="btn btn-info">click me</button>
                        <button type="button" href="#" class="btn btn-warning">click me</button>
                        <button type="button" href="#" class="btn btn-danger">click me</button>
                        <button type="button" href="#" class="btn btn-white">click me</button>
                        <button type="button" href="#" class="btn btn-light">click me</button>
                        <button type="button" href="#" class="btn btn-dark">click me</button>
                    </div>
                </div>
                <hr class="mt-4 mb-4">
                <div>
                    <h4 class="text-core mt-5">Outline buttons</h4>
                    <div class="d-flex flex-wrap gap-3 ">
                        <button type="button" href="#" class="btn btn-outline-core">click me</button>
                        <button type="button" href="#" class="btn btn-outline-primary">click me</button>
                        <button type="button" href="#" class="btn btn-outline-secondary">click me</button>
                        <button type="button" href="#" class="btn btn-outline-success">click me</button>
                        <button type="button" href="#" class="btn btn-outline-info">click me</button>
                        <button type="button" href="#" class="btn btn-outline-warning">click me</button>
                        <button type="button" href="#" class="btn btn-outline-danger">click me</button>
                        <button type="button" href="#" class="btn btn-outline-white">click me</button>
                        <button type="button" href="#" class="btn btn-outline-light">click me</button>
                        <button type="button" href="#" class="btn btn-outline-dark">click me</button>
                    </div>
                </div>
                <hr class="mt-4 mb-4">
                <div>
                    <h4 class="text-core mt-5">Sizes</h4>
                    <div class="">
                        <button type="button" href="#" class="btn btn-sm btn-core">small button</button>
                        <button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
                    </div>
                    <div class="mt-4 ">
                        <button type="button" href="#" class="btn btn-lg btn-core">large button</button>
                        <button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
                    </div>
                    <div class="mt-4 ">
                        <button type="button" href="#" class="btn btn-block btn-core">full width button</button>
                        <button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
                            button</button>
                    </div>
                </div>
                <hr class="mt-4 mb-4">
                <div>
                    <h4 class="text-core mt-5">Button states</h4>
                    <div class="">
                        <button type="button" href="#" class="btn btn-core active" aria-pressed="true">active
                            button</button>
                        <button type="button" href="#" class="btn btn-core">normal button</button>
                        <button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
                            button</button>
                    </div>
                    <div class="mt-4">
                        <button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
                        <button type="button" href="#" class="btn btn-outline-core">normal button</button>
                        <button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
                            button</button>
                    </div>
                </div>
            </section>

            <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
                <h2>Radio
                </h2>
                <p>Radio buttons allow the user to select a single choice from a group of options.


                </p>
                <div>
                    <div class="grid grid-col-3 gap-3">

                        <div>
                            <label class="toggle-group" for="toggle-1">
                                <input class="toggle-input" id="toggle-1" name="toggle" type="checkbox" checked>
                                <div class="toggle-fill"></div>
                                <label for="toggle-1" class="toggle-label">Checked</label>
                            </label>

                            <label class="toggle-group" for="toggle-2">
                                <input class="toggle-input" id="toggle-2" name="toggle" type="checkbox">
                                <div class="toggle-fill"></div>
                                <label for="toggle-2" class="toggle-label">Unchecked</label>
                            </label>

                            <label class="toggle-group" for="toggle-3">
                                <input class="toggle-input" id="toggle-3" name="toggle" type="checkbox" disabled>
                                <div class="toggle-fill"></div>
                                <label for="toggle-3" class="toggle-label">Disabled</label>
                            </label>

                        </div>

                        @* <div>
                        <div class="checkbox-group">
                        <input id="checkbox-1" name="checkbox" type="checkbox" checked>
                        <label for="checkbox-1" class="checkbox-label">Checked</label>
                        </div>

                        <div class="checkbox-group">
                        <input id="checkbox-2" name="checkbox" type="checkbox">
                        <label for="checkbox-2" class="checkbox-label">Unchecked</label>
                        </div>

                        <div class="checkbox-group">
                        <input id="checkbox-3" name="checkbox" type="checkbox" disabled>
                        <label for="checkbox-3" class="checkbox-label">Checked disabled</label>
                        </div>
                        </div> *@



                        <div>
                            <label class="checkbox-group" for="checkbox-1">
                                <input class="checkbox-input" id="checkbox-1" name="checkbox" type="checkbox" checked>
                                <div class="checkbox-fill"></div>
                                <label for="checkbox-1" class="checkbox-label">Checked</label>
                            </label>

                            <label class="checkbox-group" for="checkbox-2">
                                <input class="checkbox-input" id="checkbox-2" name="checkbox" type="checkbox">
                                <div class="checkbox-fill"></div>
                                <label for="checkbox-2" class="checkbox-label">Unchecked</label>
                            </label>

                            <label class="checkbox-group" for="checkbox-3">
                                <input class="checkbox-input" id="checkbox-3" name="checkbox" type="checkbox" disabled>
                                <div class="checkbox-fill"></div>
                                <label for="checkbox-3" class="checkbox-label">Disabled</label>
                            </label>

                        </div>


                        @* <div>
                        <div class="radio-group">
                        <input id="radio-1" name="radio" type="radio" checked>
                        <label for="radio-1" class="radio-label">Checked</label>
                        </div>

                        <div class="radio-group">
                        <input id="radio-2" name="radio" type="radio">
                        <label for="radio-2" class="radio-label">Unchecked</label>
                        </div>

                        <div class="radio-group">
                        <input id="radio-3" name="radio" type="radio" disabled>
                        <label for="radio-3" class="radio-label">Disabled</label>
                        </div>
                        </div> *@



                        <div>
                            <label class="radio-group" for="radio-1">
                                <input class="radio-input" id="radio-1" name="radio" type="radio" checked>
                                <div class="radio-fill"></div>
                                <label for="radio-1" class="radio-label">Checked</label>
                            </label>

                            <label class="radio-group" for="radio-2">
                                <input class="radio-input" id="radio-2" name="radio" type="radio">
                                <div class="radio-fill"></div>
                                <label for="radio-2" class="radio-label">Unchecked</label>
                            </label>

                            <label class="radio-group" for="radio-3">
                                <input class="radio-input" id="radio-3" name="radio" type="radio" disabled>
                                <div class="radio-fill"></div>
                                <label for="radio-3" class="radio-label">Disabled</label>
                            </label>

                        </div>
                    </div>
                </div>
            </section>

            <section id="inputs" class="mt-3 b-1 b-r-4 p-5">
                <h2>Input
                </h2>
                <p>Inputs buttons allow the user to select a single choice from a group of options.
                </p>


                <form>
                    <div class="grid grid-col-3 gap-3">


                        <div class="form-group error">
                            <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Name</label>
                            <div class="input-helper-text">Some helping Text</div>
                            <div class="input-error-text">At least 6 characters required</div>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                            </span>
                        </div>


                        <div class="form-group">
                            <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Email</label>
                            <div class="input-helper-text">Some helping Text</div>
                            <div class="input-error-text">At least 6 characters required</div>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                            </span>
                        </div>


                        <div class="form-group">
                            <input type="password" required="required" /><span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Password</label>
                            <div class="input-helper-text">Some helping Text</div>
                            <div class="input-error-text">At least 6 characters required</div>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                            </span>
                        </div>

                        <div class="form-group">
                            <input type="number" required="required" /><span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Number</label>
                            <div class="input-helper-text">Some helping Text</div>
                            <div class="input-error-text">At least 6 characters required</div>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                            </span>
                        </div>



                        <div class="form-group">
                            <select type="textarea" required="required">
                                <option value="" disabled selected hidden></option>
                                <option value="1">Twitter </option>
                                <option value="2">Facebook</option>
                            </select>
                            <span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Select</label>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph"><i class='bx bx-caret-down'></i></span>
                            </span>
                        </div>


                        <div class="form-group error">
                            <select type="textarea" required="required">
                            </select>
                            <span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Select</label>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph button">
                                    <i class='bx bx-x-circle'></i>
                                </span>
                                <span class="input-glyph">
                                    <i class='bx bx-caret-down'></i>
                                </span>
                                <span class="input-glyph error">
                                    <i class='bx bx-error-circle'></i>
                                </span>
                            </span>
                            <div class="backdrop"></div>
                            <div class="drop-down">
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <div class="dropdown-header">Header</div>

                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
                            <label class="label-animated">Message</label>
                            <div class="input-helper-text">Some helping Text</div>
                            <div class="input-error-text">At least 6 characters required</div>
                            <span class="input-glyph-wraper">
                                <span class="input-glyph">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                            </span>
                        </div>


                    </div>
                    <div class="btn-box my-5">
                        <button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
                        <button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
                    </div>
                </form>

            </section>


            <hr class="mt-4 mb-4">

            <h2 class="mb-2">Grid</h2>
            <div class="grid test grid-col-4 gap-3">
                <div class="col-span-23">1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
            </div>




            <div>
                <hr class="mt-4 mb-4">
                <h2 class="mb-2"> Data Grid</h2>
                <p>Data grid DENSE + COLLAPSE + SELECT</p>


                <div class="chip-icon float-left" @onclick="ToggleSidebarRight"><i class='bx bx-filter'></i></div>
                <div class="horizontal-scroll-container">

                    <div class="chip-group">
                        <div class="chip-group-content">
                            <div class="chip-leading-icon"><i class='bx bx-user'></i></div>
                            <div class="chip-label">Chip label text</div>
                            <div class="chip-cta-icon"><i class='bx bx-x'></i></div>
                        </div>
                    </div>

                    <div class="chip-group">
                        <div class="chip-group-content">
                            <div class="chip-leading-icon"> <img class="img-fluid" src="https://source.unsplash.com/random?face" /> </div>
                            <div class="chip-label">Chip label text</div>
                            <div class="chip-cta-icon"><i class='bx bx-x'></i></div>
                        </div>
                    </div>


                    <div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
                        <div class="chip-group-content">
                            <div class="chip-leading-icon"><i class='bx bx-check'></i></div>
                            <div class="chip-label">Chip label text</div>
                            <div class="chip-cta-icon"><i class='bx bx-x'></i></div>
                        </div>
                    </div>


                    <div class="chip-group filter active">  <!-- TO DO on chip-group filter toggle class active-->
                        <div class="chip-group-content">
                            <div class="chip-leading-icon"><i class='bx bx-check'></i></div>
                            <div class="chip-label">Chip label text</div>
                            <div class="chip-cta-icon"><i class='bx bx-x'></i></div>
                        </div>
                    </div>

                    <div class="chip-group">
                        <div class="chip-group-content">
                            <div class="chip-leading-icon"><i class='bx bx-user'></i></div>
                            <div class="chip-label">



                                <select type="textarea" placeholder="Select">Se
                                </select>

                                <div class="drop-down">
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <div class="dropdown-header">Header</div>

                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>


                            </div>
                            <div class="chip-cta-icon"><i class='bx bx-x'></i></div>
                        </div>
                    </div>


                </div>

                <div class="data-grid dense select collapse  @NavClosed mt-5">
                    <!--dense select collapse-->
                    <div class="data-grid-row-content">
                        <!--active-->
                        <div class="data-grid-select">
                            @* <label class="checkbox-group m-0" for="checkbox-S11">
                                <input class="checkbox-input" id="checkbox-S11" name="checkbox" type="checkbox" checked>
                                <div class="checkbox-fill"></div>
                            </label> *@
                            <label class="toggle-group m-0" for="toggle-s11">
                                <input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
                                <div class="toggle-fill"></div>
                            </label>
                        </div>
                        <div class="data-grid-container">
                            <div class="row">
                                <div class="col-12 col-md-4">
                                    <div class="text-hc">Product 1</div>
                                    <a class="text-link text-semibold" href="#">0023 001445669 1</a>
                                    <div class="text-small">Product serial code</div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <label>Material code</label>
                                    <div class="">Material 29</div>
                                </div>

                                <div class="col-12 col-md-4 text-md-right">
                                    <label>Price</label>
                                    <div class="text-semibold ">77,29</div>
                                </div>
                            </div>
                            <div class="row collapsed @NavClosed">
                                <div class="col-12 col-md-4 ">
                                    <div class="text-small">
                                        You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="font-size:1.75rem; margin-top:-.25rem" class="data-grid-collapse-cta" @onclick="ToggleNav">
                            <i class='bx bx-chevron-down'></i>
                        </div>
                    </div>
                </div>
            </div>




            <section id="form-wizard" class="form-wizard mt-5">
                <h3>Form wizard</h3>


                    <div class="form-outer">
                    <div class="form-step previous">
                            <div class="row">
                                <div class="col-12">Description for step 1</div>
                                @* <div class="col-12 col-md-6 ">
                                    <div class="d-flex justify-flex-end gap-3">
                                        <div class="dot active"></div>
                                        <div class="dot"></div>
                                        <div class="dot"></div>
                                        <div class="dot"></div>
                                    </div>
                                </div> *@
                            
                                <div class="form-group col-12 col-md-6">
                                    <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                                    <label class="label-animated">Name</label>
                                    <div class="input-helper-text">Some helping Text</div>
                                    <div class="input-error-text">At least 6 characters required</div>
                                    <span class="input-glyph-wraper">
                                        <span class="input-glyph">
                                            <span class="input-glyph button">
                                                <i class='bx bx-x-circle'></i>
                                            </span>
                                            <span class="input-glyph error">
                                                <i class='bx bx-error-circle'></i>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                                <div class="form-group col-12 col-md-6">
                                    <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                                    <label class="label-animated">Surname</label>
                                    <div class="input-helper-text">Some helping Text</div>
                                    <div class="input-error-text">At least 6 characters required</div>
                                    <span class="input-glyph-wraper">
                                        <span class="input-glyph">
                                            <span class="input-glyph button">
                                                <i class='bx bx-x-circle'></i>
                                            </span>
                                            <span class="input-glyph error">
                                                <i class='bx bx-error-circle'></i>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                                      

                        <div class="form-step">
                            <div class="bg-info">2</div>
                        </div>

                        <div class="form-step next">
                            <div class="bg-info">3</div>
                        </div>
                    </div>


                    <div class="btn-box text-right my-5 d-flex justify-space-between">
                        <button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
                        <div>
                            <button type="button" @onclick="TogglePreviousSlide" class="btn btn-core mr-2" aria-pressed="true"><i class='bx bx-chevron-left'></i>Back</button>
                            <button type="button" @onclick="ToggleNextSlide" class="btn btn-core mr-2" aria-pressed="true">Next<i class='bx bx-chevron-right'></i></button>
                        </div> 
                        
                    </div>

                            <div class="dots d-flex justify-center gap-3">
                                <div class="dot completed"></div> 
                                <div class="dot @NextSlide"></div>
                                <div class="dot"></div>
                            </div>


        </section>

        <section id="modal">
            <!-- TO DO close modal on pres esc and when clicked outside the modal-->
            <!-- TO DO when modal is open add class to body .scroll-disabled-->
            
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
            Launch backdrop modal
            </button>

            <!-- Modal -->
            <div class="modal fade @NavClosed" tabindex="-1"> 
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Modal title</h3>
                    @* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
                </div>
                <div class="modal-body">
                    lorem20
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
                    <button type="button" class="btn btn-core">Understood</button>
                </div>
                </div>
            </div>
            </div>


        </section>
        </main>



        <aside>
            <div class="sidebar @sidebarRightClosed right">



                <div class="position-sticky" style="top:0;">
                    <div class="scrollable">
                        <div class="scroll-wrapper ">
                            <div class="scroll-container ">
                                <div class="scroll-content ">

                                    <nav>
                                        <ul class="navbar">


                                            <li class="navbar-header">Pick a color scheme</li>

                                            <div class="color-picker-container">

                                                <form class="color-picker" action="">
                                                    <fieldset>

                                                        <label for="light" class="visually-hidden">Light</label>
                                                        <input type="radio" id="light" name="theme" checked>


                                                        <label for="pink" class="visually-hidden">Pink theme</label>
                                                        <input type="radio" id="pink" name="theme">

                                                        <label for="dark" class="visually-hidden">Dark theme</label>
                                                        <input type="radio" id="dark" name="theme">
                                                    </fieldset>
                                                </form>

                                            </div>
                                            <div class="sidebar-divider"></div>
                                            <li class="navbar-header">Header</li>

                                            <li class="navbar-item">
                                                <a href="#">
                                                    <span class="navbar-link">Main navbar link 1</span>
                                                    <span class="navbar-link navbar-link-detail">
                                                        <div class="badge-label">
                                                            22
                                                        </div>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="navbar-item">
                                                <a href="#">
                                                    <span class="navbar-link">Main navbar link 1</span>
                                                    <span class="navbar-link navbar-link-detail">
                                                        <div class="badge-label">
                                                            22
                                                        </div>
                                                    </span>
                                                </a>
                                            </li>
                                            <div class="sidebar-divider"></div>
                                            <li class="navbar-header">Header</li>
                                            <form>
                                                <div class="form-group ">
                                                    <input type="name" required="required" /><span class="highlight"></span><span class="bar"></span>
                                                    <label class="label-animated">Password</label>
                                                    <div class="input-helper-text">Some helping Text</div>
                                                    <div class="input-error-text">At least 6 characters required</div>
                                                    <span class="input-glyph-wraper">
                                                        <span class="input-glyph">
                                                            <span class="input-glyph button">
                                                                <svg class="icon-root svg-icon icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                                                                @Icons.Material.Filled.Analytics
                                                                </svg>
                                                            </span>
                                                            <span class="input-glyph error">
                                                                <i class='bx bx-error-circle'></i>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </div>
                                            </form>
                                            <div>
                                                <div class="sidebar-divider mt-5"></div>
                                                <li class="navbar-header">Header</li>
                                                <div>
                                                    <label class="toggle-group reversed" for="toggle-r1">
                                                        <input class="toggle-input" id="toggle-r1" name="toggle" type="checkbox" checked>
                                                        <div class="toggle-fill"></div>
                                                        <label for="toggle-r1" class="toggle-label">Checked</label>
                                                    </label>
                                                </div>


                                                <div>
                                                    <label class="toggle-group reversed" for="toggle-r2">
                                                        <input class="toggle-input" id="toggle-r2" name="toggle" type="checkbox">
                                                        <div class="toggle-fill"></div>
                                                        <label for="toggle-r2" class="toggle-label">Checked</label>
                                                    </label>
                                                </div>
                                            </div>


                                        </ul>
                                    </nav>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">test</div>
                </div>
            </div>
        </aside>
    </div>
    <div class="modal-backdrop fade show"></div>
</body>

@code {
    private string sidebarClosed { get; set; } = "close";

    private void ToggleSidebar()
    {
        sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
    }

    private string sidebarRightClosed { get; set; } = "close-r";

    private void ToggleSidebarRight()
    {
        sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : "";
    }



    private string NavClosed { get; set; } = "";

    private void ToggleNav()
    {
        NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
    }


    private string NextSlide { get; set; } = "";

    private void ToggleNextSlide()
    {
        NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : "";
    }


    private string PreviousSlide { get; set; } = "";

    private void TogglePreviousSlide()
    {
        PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : "";
    }
}




