<!DOCTYPE html>
<html lang="fr" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial=1.0">
    <title><?= esc($title ?? 'MS1 Reader') ?></title>

    <!-- Favicon -->
    <link rel="icon" href="<?= base_url('images/favicon.png?v=2') ?>" type="image/png">

    <!-- Fonts -->
    <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=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap"
          rel="stylesheet">

    <!-- MAIN RAVEN CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/raven/css/style.css') ?>">

    <!-- VENDOR CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/raven/vendor/css/simplebar.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/raven/vendor/css/tom-select.min.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/raven/vendor/css/daterangepicker.css') ?>">

    <?= $this->renderSection('styles') ?>
</head>

<body class="font-theme flex flex-col h-full bg-zinc-50 dark:bg-zinc-950">

<div class="app-wrapper flex flex-row w-full">

    <!-- SIDEBAR -->
    <?php if (isset($menu) && $menu !== "null") echo $this->include($menu); ?>

    <!-- MAIN CONTENT AREA -->
    <main class="flex-1 flex flex-col app-content <?= (isset($menu) && $menu !== 'null') ? 'lg:ms-64' : '' ?>">

        <!-- HEADER -->
        <?php if (isset($header) && $header !== "null") echo $this->include($header); ?>

        <!-- PAGE CONTENT -->
        <div class="flex-grow p-6 pt-6">
            <div class="max-w-6xl mx-auto">

                    <?= $this->renderSection('content') ?>

            </div>
        </div>

    </main>

</div>

<!-- RAVEN SCRIPTS -->
<script src="<?= base_url('assets/raven/vendor/js/jquery.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/moment.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/daterangepicker.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/sweetalert2.all.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/tom-select.complete.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/dropzone-min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/echarts.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/swiper-bundle.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/Sortable.min.js') ?>"></script>
<script src="<?= base_url('assets/raven/vendor/js/quill.js') ?>"></script>
<script src="<?= base_url('assets/raven/js/theme.js') ?>"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

<script>
    document.addEventListener('click', function(e) {
        if (e.target.closest('[data-collapse-btn]')) {
            const root = e.target.closest('[data-collapse-root]');
            const target = root.querySelector('[data-collapse-content]');
            target.classList.toggle('hidden');
        }
    });
</script>

<?= $this->renderSection('scripts') ?>

</body>
</html>
