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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>

  <?= css([
    'assets/css/styles.css',
    'assets/css/chess.css',
    'assets/css/pgn4web.css',
    'assets/css/fonts.css',
  ]) ?>

  <?= js([
    'assets/js/pgn4web.js'
  ]) ?>

  <link rel="shortcut icon" type="image/x-icon"
    href="<?= url('assets/favicon.ico') ?>">

  <script defer src="https://cdn.commented.io/latest.js"></script>
</head>

<body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
  <header>
    <?php snippet('navbar') ?>
  </header>

  <main>

    <?php if ($page->isHomePage()): ?>
      <?php snippet('hero') ?>
    <?php endif ?>

    <?php if ($page->heroText()->isNotEmpty()): ?>
      <?php snippet('titel') ?>
    <?php endif ?>

    <?php if ($page->dark()->isNotEmpty()): ?>
      <section id="content" class="py-24 bg-sf_grau-900 text-sf_grau-50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <?= $slot ?>
        </div>
      </section>
    <?php else: ?>
      <section id="content" class="py-24 bg-sf_grau-50 text-sf_grau-900">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <?= $slot ?>
        </div>
      </section>
    <?php endif ?>
  </main>

  <footer class="bg-sf_grau-400 w-full" id="footer">
    <?php snippet('footer') ?>
  </footer>
  <?= js([
    'assets/js/navbar.js'
  ]) ?>
</body>

</html>
