<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Cards";
    include('partials/app-meta-title.php') ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Cards"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "UI Components"; $pageSubText = "Cards provide a flexible and extensible content container with multiple variants and options."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="info-container">
                            <div class="d-flex flex-start w-100">
                                <div class="d-flex flex-fill">
                                    <div class="flex-fill">
                                        <p class="mb-0">Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no <code>margin</code> by default, so use spacing utilities as needed. Although cards are a lightweight solution for 'widget' or 'panel', we recommend you check out SmartAdmin's <a href="panels.php" title="Components Panels" target="_blank">panels page</a> for further flexible and an alternative option.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <!-- Kitchen sink example -->
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Kitchen <span class="fw-300"><i>sink example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                The most basic example of cards with enforced width
                                            </div>
                                            <div class="card m-auto m-lg-0" style="max-width: 18rem;">
                                                <img src="/public/img/cardcovers/cover-1-lg.png" class="card-img-top" alt="...">
                                                <div class="card-body">
                                                    <h5 class="card-title">Card title</h5>
                                                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                                </div>
                                                <ul class="list-group list-group-flush">
                                                    <li class="list-group-item">Cras justo odio</li>
                                                    <li class="list-group-item">Dapibus ac facilisis in</li>
                                                    <li class="list-group-item">Vestibulum at eros</li>
                                                </ul>
                                                <div class="card-body">
                                                    <a href="#" class="card-link">Card link</a>
                                                    <a href="#" class="card-link">Another link</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- List group -->
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            List <span class="fw-300"><i>group</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Create lists of content in a card with a flush list group.
                                            </div>
                                            <div class="card m-auto m-lg-0" style="width: 18rem;">
                                                <div class="card-header">
                                                    Featured
                                                </div>
                                                <ul class="list-group list-group-flush">
                                                    <li class="list-group-item">Cras justo odio</li>
                                                    <li class="list-group-item">Dapibus ac facilisis in</li>
                                                    <li class="list-group-item">Vestibulum at eros</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Quote -->
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Quote <span class="fw-300"><i>example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Here we adjust <code>card-header</code> padding using provided <a href="#" title="utility classes">utility classes</a>
                                            </div>
                                            <div class="card m-auto border">
                                                <div class="card-header py-2">
                                                    <div class="card-title">
                                                        Quote
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <blockquote class="blockquote mb-0">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                                    </blockquote>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Header and footer -->
                                <div id="panel-4" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Header <span class="fw-300"><i>and footer</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add an optional header and/or footer within a card.
                                            </div>
                                            <div class="card m-auto border">
                                                <div class="card-header">
                                                    Featured
                                                </div>
                                                <div class="card-body">
                                                    <h5 class="card-title">Special title treatment</h5>
                                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                                </div>
                                                <div class="card-footer text-muted py-2">
                                                    2 days ago
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Background & borders -->
                                <div id="panel-5" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Background <span class="fw-300"><i>&amp; Borders</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <code>.card-header</code>, <code>.card-body</code>, and <code>.card-footer</code> background cam be changed using <a href="utilities_color_pallet.php" target="_blank" title="BG Color Utility">color</a> and <a href="utilities_borders.php" target="_blank" title="border utilities">border</a> utilities
                                            </div>
                                            <!-- demo controls -->
                                            <div class="mb-4">
                                                <div class="row">
                                                    <div class="col-sm-6 col-xl-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Select target</label>
                                                            <select class="js-bg-target form-select">
                                                                <option value="#cp-2 .card-header">card-header</option>
                                                                <option value="#cp-2 .card-body">card-body</option>
                                                                <option value="#cp-2 .card-footer">card-footer</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 col-xl-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Select background</label>
                                                            <select class="js-bg-color form-select"></select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12 col-xl-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Card border</label>
                                                            <select class="js-border-color form-select">
                                                                <option value="border-primary">border-primary</option>
                                                                <option value="border-secondary">border-secondary</option>
                                                                <option value="border-info">border-info</option>
                                                                <option value="border-danger">border-danger</option>
                                                                <option value="border-warning">border-warning</option>
                                                                <option value="border-success">border-success</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="cp-2" class="card border">
                                                <div class="card-header bg-info-600">
                                                    Different colors
                                                </div>
                                                <div class="card-body p-0 bg-info-300">
                                                    <div class="" style="height: 160px; overflow-y: auto; overflow-x: hidden;">
                                                        <div class="px-4 py-3">
                                                            <div class="fs-xl fw-500 mb-3">
                                                                He system office. Of to wonder, windshield to seven. Whenever
                                                                <div class="fs-nano fw-300">SATURDAY, 27TH JANUARY 2018 15 minutes ago.</div>
                                                            </div>
                                                            <div class="fs-lg mb-3">Of totally to issues for to the decelerate city, the at how discharge than like…. It history; Their letters, away, the and stupid employees, divine them his a only live lobby, little regretting conduct, know out testimony the latest even and systematic be service, name of every accept bits turned.</div>
                                                            In the a soon in facilitate reflections, he more had from preceding think the lay low the where initial feedback dropped at be its to in little instruments, of himself found phase they poverty disappointment is her and to thought, that the by is really chime in the of we sovereignty. On which, office. The that he each been ago she from these is name much phase. Counter-productive towards far and transmitting offers in of the with between was and over since failing. Slowly cheating far with gone in, irregular refute. No success six way differences authentic destined pass pouring.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-footer bg-info-800 py-2">
                                                    2 days ago
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <!-- Collapse -->
                                <div id="panel-6" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Collapse <span class="fw-300"><i>example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Utilizing bootstrap's collapse component with <code>.card</code>
                                            </div>
                                            <div id="cp-1" class="card border">
                                                <div class="card-header">
                                                    <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="collapse" data-bs-target="#cp-1 > .card-body" aria-expanded="true">
                                                        <span class="collapsed-hidden">Expand</span>
                                                        <span class="collapsed-reveal">Collapse</span>
                                                    </button>
                                                </div>
                                                <div class="card-body p-0 show">
                                                    <!-- notice we place the padding inside another div and remove the padding from the card body -->
                                                    <div class="p-4">
                                                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Navigation tabs -->
                                <div id="panel-7" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Navigation <span class="fw-300"><i>tabs</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add some navigation to a card's header (or block) with built-in nav components.
                                            </div>
                                            <div class="card border">
                                                <div class="card-header">
                                                    <ul class="nav nav-tabs card-header-tabs">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" href="#">Active</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="#">Link</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="card-body">
                                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Navigation pills -->
                                <div id="panel-8" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Navigation <span class="fw-300"><i>pills</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add some navigation to a card's header (or block) with built-in nav components.
                                            </div>
                                            <div class="card border">
                                                <div class="card-header">
                                                    <ul class="nav nav-pills card-header-pills">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" href="#">Active</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="#">Link</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="card-body">
                                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Header options -->
                                <div id="panel-9" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Header <span class="fw-300"><i>Options</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Display of some example optional "stuff" you can add to <code>.card-header</code>
                                            </div>
                                            <div class="row">
                                                <div class="col-xl-6">
                                                    <div class="card mb-4">
                                                        <div class="card-header bg-fusion-500 d-flex align-items-center justify-content-between">
                                                            <div class="card-title">Dropdowns</div>
                                                            <button type="button" class="btn btn-icon btn-danger btn-sm" data-bs-toggle="dropdown">
                                                                <i class="fal fa-ellipsis-v"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-end">
                                                                <a href="#" class="dropdown-item">Option 1</a>
                                                                <a href="#" class="dropdown-item">Option 2</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a href="#" class="dropdown-item">Refresh</a>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                    </div>
                                                    <div class="card mb-4">
                                                        <div class="card-header d-flex align-items-center justify-content-between bg-trans-gradient py-2 pe-2">
                                                            <div class="card-title text-white">Input</div>
                                                            <div class="d-flex position-relative" style="max-width: 10rem;">
                                                                <i class="fal fa-search position-absolute" style="left: 10px; top: 50%; transform: translateY(-50%);"></i>
                                                                <input type="text" class="form-control bg-white" style="padding-left: 2rem;" placeholder="Search">
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6">
                                                    <div class="card mb-4">
                                                        <div class="card-header d-flex align-items-center justify-content-between bg-warning py-2 pe-2">
                                                            <div class="card-title text-white">Buttons</div>
                                                            <div>
                                                                <button type="button" class="btn btn-info btn-sm">Add new</button>
                                                                <button type="button" class="btn btn-success btn-sm">
                                                                    <i class="fal fa-arrow-down"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                    </div>
                                                    <div class="card">
                                                        <div class="card-header d-flex align-items-center justify-content-between bg-success">
                                                            <div class="card-title text-white">Checkbox</div>
                                                            <div class="form-check form-switch form-check-reverse">
                                                                <input id="demo-switch" type="checkbox" class="form-check-input" checked>
                                                                <label class="form-check-label" for="demo-switch"></label>
                                                            </div>
                                                        </div>
                                                        <div class="card-body">
                                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Card group -->
                                <div id="panel-10" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Card <span class="fw-300"><i>Group</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use <code>display: flex;</code> to achieve their uniform sizing.
                                            </div>
                                            <div class="card-group">
                                                <div class="card">
                                                    <div class="w-100 bg-fusion-50 rounded-top border-top-right-radius-0" style="padding:40px 0 40px;"></div>
                                                    <div class="card-body">
                                                        <h5 class="card-title">Card title</h5>
                                                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                        <small class="text-muted">Last updated 3 mins ago</small>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="w-100 bg-fusion-50" style="padding:40px 0 40px;"></div>
                                                    <div class="card-body">
                                                        <h5 class="card-title">Card title</h5>
                                                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                        <small class="text-muted">Last updated 3 mins ago</small>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <div class="w-100 bg-fusion-50 rounded-top border-top-left-radius-0 " style="padding:40px 0 40px;"></div>
                                                    <div class="card-body">
                                                        <h5 class="card-title">Card title</h5>
                                                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                        <small class="text-muted">Last updated 3 mins ago</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Card decks -->
                                <div id="panel-11" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Card <span class="fw-300"><i>Decks</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Need a set of equal width and height cards that aren't attached to one another? Use card decks.
                                            </div>
                                            <div class="row row-cols-1 row-cols-md-3 g-4">
                                                <div class="col">
                                                    <div class="card h-100">
                                                        <div class="w-100 bg-fusion-50 rounded-top" style="padding:40px 0 40px;"></div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                        <div class="card-footer">
                                                            <small class="text-muted">Last updated 3 mins ago</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="card h-100">
                                                        <div class="w-100 bg-fusion-50 rounded-top" style="padding:40px 0 40px;"></div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                        <div class="card-footer">
                                                            <small class="text-muted">Last updated 3 mins ago</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="card h-100">
                                                        <div class="w-100 bg-fusion-50 rounded-top" style="padding:40px 0 40px;"></div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                                        </div>
                                                        <div class="card-footer">
                                                            <small class="text-muted">Last updated 3 mins ago</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div id="panel-12" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Card <span class="fw-300"><i>Columns</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Cards can be organized into <a href="https://masonry.desandro.com/" target="_blank">Masonry</a>-like columns with just CSS by wrapping them in <code>.card-columns</code>. Cards are built with CSS <code>column</code> properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
                                            </div>
                                            <div class="alert alert-warning">
                                                <strong>Heads up!</strong> Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to <code>display: inline-block</code> as <code>column-break-inside: avoid</code> isn't a bulletproof solution yet.
                                            </div>

                                            <div class="row" data-masonry='{"percentPosition": true }'>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card">
                                                        <div class="w-100 bg-fusion-300" style="padding:40px 0 40px;"></div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title that wraps to a new line</h5>
                                                            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card p-3">
                                                        <blockquote class="blockquote mb-0">
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                            <footer class="blockquote-footer">
                                                                <small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small>
                                                            </footer>
                                                        </blockquote>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card">
                                                        <div class="w-100 bg-fusion-300" style="padding:40px 0 40px;"></div>
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card bg-primary text-white text-center p-3">
                                                        <blockquote class="blockquote mb-0">
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                                                            <footer class="blockquote-footer text-white">
                                                                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                                                            </footer>
                                                        </blockquote>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card text-center">
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                                                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card">
                                                        <div class="w-100 bg-fusion-300" style="padding:40px 0 40px;"></div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card p-3 text-end">
                                                        <blockquote class="blockquote mb-0">
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                            <footer class="blockquote-footer">
                                                                <small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small>
                                                            </footer>
                                                        </blockquote>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-lg-4 mb-4">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
                                                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

    <script src="/public/plugins/masonry/masonry.pkgd.min.js"></script>

    <script>
        /* Inject additional scripts dynamically */
        // Menu Slider function
        function MenuSlider(options) {
            this.element = options.element;
            this.wrapperId = options.wrapperId;
            this.init();
        }
        // Background colors handling
        var ng_bgColors = ["bg-danger-50", "bg-danger-100", "bg-danger-200", "bg-danger-300", "bg-danger-400", "bg-danger-500", "bg-danger-600", "bg-danger-700", "bg-danger-800", "bg-danger-900", "bg-fusion-50", "bg-fusion-100", "bg-fusion-200", "bg-fusion-300", "bg-fusion-400", "bg-fusion-500", "bg-fusion-600", "bg-fusion-700", "bg-fusion-800", "bg-fusion-900", "bg-gray-50", "bg-gray-100", "bg-gray-200", "bg-gray-300", "bg-gray-400", "bg-gray-500", "bg-gray-600", "bg-gray-700", "bg-gray-800", "bg-gray-900", "bg-info-50", "bg-info-100", "bg-info-200", "bg-info-300", "bg-info-400", "bg-info-500", "bg-info-600", "bg-info-700", "bg-info-800", "bg-info-900", "bg-primary-50", "bg-primary-100", "bg-primary-200", "bg-primary-300", "bg-primary-400", "bg-primary-500", "bg-primary-600", "bg-primary-700", "bg-primary-800", "bg-primary-900", "bg-success-50", "bg-success-100", "bg-success-200", "bg-success-300", "bg-success-400", "bg-success-500", "bg-success-600", "bg-success-700", "bg-success-800", "bg-success-900", "bg-warning-50", "bg-warning-100", "bg-warning-200", "bg-warning-300", "bg-warning-400", "bg-warning-500", "bg-warning-600", "bg-warning-700", "bg-warning-800", "bg-warning-900"];
        var formatBgColors = [];
        // Initialize background colors immediately
        (function handleBgColors() {
            if (ng_bgColors) {
                // Create default option
                var defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.textContent = 'select background';
                formatBgColors.push(defaultOption);
                // Create options for each color
                ng_bgColors.forEach(function (item) {
                    var option = document.createElement('option');
                    option.value = item;
                    option.className = item;
                    option.textContent = item;
                    formatBgColors.push(option);
                });
                // Update select elements
                var bgColorSelects = document.querySelectorAll('select.js-bg-color');
                bgColorSelects.forEach(function (select) {
                    select.innerHTML = '';
                    formatBgColors.forEach(function (option) {
                        select.appendChild(option.cloneNode(true));
                    });
                });
            }
            else {
                console.log("something went wrong!");
            }
        })();

        // Remove class prefix helper function
        function removeClassByPrefix(element, prefix) {
            var classes = element.className.split(" ").filter(function (c) {
                return c.lastIndexOf(prefix, 0) !== 0;
            });
            element.className = classes.join(" ").trim();
        }

        // Change background handler
        document.addEventListener('change', function (e) {
            if (e.target.matches('.js-bg-color')) {
                var bgColorSelect = document.querySelector('select.js-bg-color');
                var targetSelect = document.querySelector('select.js-bg-target');
                var setBgColor = bgColorSelect.value;
                var setValue = targetSelect.value;
                removeClassByPrefix(bgColorSelect, 'bg-');
                bgColorSelect.classList.add(setBgColor);
                var targetElement = document.querySelector(setValue);
                if (targetElement) {
                    removeClassByPrefix(targetElement, 'bg-');
                    targetElement.classList.add(setBgColor);
                }
            }
        });
    </script>

</body>

</html>