<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- A constante BASE_URL foi definida no seu Router.php -->
    <link href="<?= BASE_URL ?>/assets/css/style.css" rel="stylesheet">
    <!-- O título pode ser passado dinamicamente a partir do controller -->
    <title><?= e($title ?? 'Meu Projeto') ?></title>
</head>

<body class="bg-slate-200">

    <!-- Aqui você pode adicionar um menu, header, etc. -->

    <main class="p-4">
        <?= $content ?? '' ?>
    </main>


    <section rule="dialog">
        <div id="appDialog" class="dialog hidden">
            <!-- backdrop -->
            <div class="dialog-backdrop"></div>

            <!-- box -->
            <div class="dialog-box" role="dialog" aria-modal="true">

                <!-- header -->
                <div class="dialog-header">
                    <span class="dialog-title"></span>
                    <button type="button" class="dialog-close" aria-label="Fechar">
                        &times;
                    </button>
                </div>

                <!-- body -->
                <div class="dialog-body">
                    <p class="dialog-message"></p>

                    <!-- input opcional (JS controla se existe ou não) -->
                    <div class="dialog-input-wrapper"></div>
                </div>

                <!-- footer -->
                <div class="dialog-footer">
                    <button type="button" class="dialog-btn dialog-cancel">
                        Cancelar
                    </button>
                    <button type="button" class="dialog-btn dialog-approve">
                        Confirmar
                    </button>
                </div>
            </div>
        </div>



    </section>
    <script src="<?= BASE_URL ?>/assets/js/shared/dialog.js"></script>
</body>

</html>