    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900|Montserrat:100,200,300,400,500,600,700,800,900&display=swap');


        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
        html {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 0;
        }

        .avatar {
            border-radius: 50%;
        }

        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
        .dropdown:hover .dropbtn {
            background-color: #8ca0aa;
        }

        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            /*    position: absolute;*/
            font-size: 1rem;
            background-color: #f1f1f1;
            min-width: 12rem;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
        }

        .links {
            color: #dd810f;
            cursor: pointer;
            margin-right: 1rem;
            margin-right: 1rem;
            text-decoration: none;
        }

        .links:hover {
            color: #e04d2b;
        }


        #breadcrumb-div {
            margin:0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 1rem;
            padding-right: 1rem;
            background-color: #8ca0aa !important;
            height: 1.7rem;
            line-height: 1.5rem;
            text-align: center;
        }
        .breadcrumb-item a {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 0.4rem;
            padding-right: 0.4rem;
            margin: 0;
            border: solid;
            border-color: #213242 !important;
            border-width: 2px;
            border-radius: 0.5rem;
            background-color: #213242 !important;
            color: #ffffff !important;
            font-size: 0.7rem;
            text-decoration: none !important;
        }

    </style>


    <div style="padding-top:10px;padding-bottom:10px;padding-left: 0; padding-right: 0;">
    <div
        style="display:grid; gap:0; grid-template-columns: auto auto 1fr auto auto;grid-template-rows: 1vh 4vh 1vh;background:#213242;color:#ffffff;font-family:'Montserrat', sans-serif;font-weight: 600; font-size: 1.4rem;">

        <div style="grid-row: 1 / SPAN 3; grid-column: 1;padding:0;margin:0;background: #ffffff;" class="card">
            <a href="<?= url_to('Home::index') ?>">
            <img src="<?= base_url('/images/RoastPRO-02.jpg') ?>"
                style="max-height:100%;width:auto;border-style:solid;border-width:3px;border-radius:10px;border-color:#213242;" />
            </a>
        </div>

        <div style="grid-row:1;grid-column:2 /SPAN 4; background: #ffffff;">
        </div>

        <div id="bcr_title" style="grid-row:2;grid-column:2;align-self: center;padding-left: 2rem;padding-right: 4rem;">
            <?= $title ?>
        </div>

        <div style="grid-row:2;grid-column:3;align-self: center;justify-items: stretch;">
            <?php if (!(null == $links || empty($links))): ?>
                <?php foreach ($links as $descr => $link): ?>
                    <?php if ($link['auth_check']): ?>
                        <?php if (auth()->user()->can_edit_by_controller($controller)) : ?>
                            <a class="links" style="text-decoration: none;" href="<?= $link['url'] ?>" target="<?= isset($link['target']) ? $link['target'] : '_self' ?>"><?= $descr ?></a>
                        <?php endif; ?>
                    <?php else: ?>
                        <a class="links" style="text-decoration: none;" href="<?= $link['url'] ?>"><?= $descr ?></a>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php endif;    ?>
        </div>

        <div style="grid-row:3; grid-column:2 /SPAN 4; background: #ffffff;">
        </div>


        <!-- <div class="" style="position:relative; grid-row:2;grid-column: 4; color:#ffffff; justify-self: center; left:9rem; top:1.5rem; font-size: 1rem;width: 7rem;text-align: center; height:1rem;">Tim Young</div> -->
        <div class="dropdown" style="grid-row:2;grid-column:4;margin:0;padding:0;min-width:12rem;">
            <div class="dropbtn" style="height:4vh; width:4vh;">
                <div style="height:4vh;width:auto;">
                    <img src="<?= site_url('images/img_avatar.png'); ?>" alt="Avatar" style="height:60%; width:60%; object-fit: contain; border-radius: 50%;padding:0;margin:0;justify-self: center;display: block;">
                    <div style="padding:0;margin:0;text-align: center;font-size: 1rem;"><?= esc(auth()->user()->username) ?></div>
                </div>
            </div>
            <div class="dropdown-content">
                <div class="dropdown-content">
                    <?php if (auth()->user()->inGroup('admin')): ?>
                        <a href="<?= url_to("users") ?>">Users</a>
                        <a href="<?= url_to("allsettings") ?>">System Settings</a>
                    <?php endif; ?>
                    <?php if (auth()->loggedIn()): ?>
                        <a href="<?= url_to("change-password") ?>">Change Password</a>
                        <a href="<?= url_to("logout") ?>">Log out</a>
                    <?php else: ?>
                        <a class="button" href="<?= url_to("login") ?>">Log in</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

    <?= isset($breadcrumbs) ? "<div id='breadcrumb-div'>$breadcrumbs</div>" : '' ?>

    <?php if (session()->has("message")): ?>
        <div style="padding-top: 3px; padding-bottom: 3px; background-color:#8ca0aa; color: #ffffff;">
            <p style="margin:10px; font-weight: 700;"><?= session("message") ?></p>
        </div>
    <?php endif; ?>

    <?php if (session()->has("errors")): ?>
        <ul style="padding-top: 3px; padding-bottom: 3px; background-color:#e04d2b; color: #ffffff;">
            <?php foreach (session("errors") as $error): ?>
                <li style="color: #ffffff;"><?= $error ?></li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>