<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $this->renderSection("title") ?></title>
    <link rel="stylesheet" href="
    <?=
    base_url('/css/water.css-master/dist/light.min.css')
    ?> 
    " />

    <link rel="stylesheet" href="<?= '' //base_url('/css/pico-main/css/pico.fluid.classless.min.css') 
                                    ?>" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!--     <style>
        :root {
            --button-base: #1E90FF;
            --button-hover: #63B8FF;
        }
    </style>
 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="<?= base_url('/css/style.css') . '?' . rand() ?>" />
    <link rel="stylesheet" href="<?= base_url('/css/home.css') . '?' . rand() ?>" />
    <?= $this->renderSection("header") ?>
    <style>
        nav a {
            text-decoration: none;
            color: #dd810f;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #e04d2b;
            font-weight: 700;
        }
    </style>
</head>

<body style="height: 100%; margin: 0;">

    <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> -->
    <div style="position: relative; z-index: 1; height: 7.5rem;">

        <div style="position: absolute; z-index: 10;">
            <a class="/*button*/" href="<?= url_to('Home::index') ?>"><img style="max-width: 20rem; border-style: solid; border-width: 2px; border-radius: 10px; border-color:#213242 ;" src="<?= base_url('/images/RoastPRO-02.jpg') ?>" alt=""></a>
        </div>


        <!-- <div style="position: relative; top: 10px; left:296px; z-index: 3;"> -->
            <nav style="position: relative; top: 1.1rem; left:20rem; z-index: 3;  display:flex; align-items:center; justify-content:space-between; padding:10px 20px; background:#213242; border-bottom:1px solid #ddd; font-family: 'Montserrat', sans-serif; font-size:18px;">
                <div style="display:flex; align-items:center; gap:25px;left: 15vw;">
                    <div style="color:#ffffff; font-size: 20px; font-weight: 700;">
                        <?= $this->renderSection("heading-title") ?>
                    </div>
                    <!-- <a href=""><img src="<?= base_url('/images/RoastPRO-02.jpg') ?>" alt="RoastPRO Logo" style="height: 12px; cursor:pointer;"></a> -->
                    <a style="text-decoration: none;" href="#">Back</a>
                    <a href="#">Next</a>
                </div>
                <!-- <div> -->
                    <!-- <img src="user-image.jpg" alt="User" style="height:40px; width:40px; border-radius:50%; object-fit:cover; cursor:pointer;"> -->
                    <div class="dropdown" style="position: absolute; max-width: 30rem; left: calc(100% - 32rem); /*margin-right: 25rem;*/">
                        <div class="dropbtn">
                            <img src="<?= site_url('images/img_avatar.png'); ?> " alt="Avatar" class="avatar">
                            <?= esc(auth()->user()->username) ?>
                        </div>
                        <div class="dropdown-content">
                            <?php if (auth()->user()->inGroup('admin')): ?>
                                <a href="<?= url_to("users") ?>">Users</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> -->
            </nav>
        <!-- </div> -->
    </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; ?>

    <!--     <div class="layout-menu">
        <div>
            <a class="/*button*/" href="<?= url_to('Home::index') ?>"><img style="max-width: 12.6vw;" src="<?= base_url('/images/RoastPRO-02.jpg') ?>" alt=""></a>
        </div>
        <div>
        </div>
        <div class="dropdown">
            <div class="dropbtn">
                <img src="<?= site_url('images/img_avatar.png'); ?> " alt="Avatar" class="avatar">
                <?= esc(auth()->user()->username) ?>
            </div>
            <div class="dropdown-content">
                <?php if (auth()->user()->inGroup('admin')): ?>
                    <a href="<?= url_to("users") ?>">Users</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>
 -->
    <?= $this->renderSection("content") ?>
    <?= $this->renderSection("javascript") ?>
</body>

</html>