<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <?php do_action('get_header'); ?>

    <div id="app" class="banner bg-jlg-dark-blue text-jlg-white font-authentic flex w-full flex-col justify-center items-center">
      <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // CLEANER LE TABLEAU
        let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
        minHeadTh.style.width = `${100 / 8}%`;

        let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)");
        for (let otherHeadTh of otherHeadThs) {
          otherHeadTh.style.width = `${100 / 8 * 1.75}%`;
        }
        
        let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
        for (let minTableTd of minTableTds) {
          minTableTd.style.width = `${100 / 8}%`;
        }

        let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
        for (let otherTableTd of otherTableTds) {
          otherTableTd.style.width = `${100 / 8 * 1.75}%`;
        }
        // HEADER AU SCROLL
        let tableHead = document.querySelector("thead tr");
        let tHeadHeight = tableHead.offsetHeight;
        window.onscroll = () => {
          tableHead.style.minHeight = `${document.querySelector("header").offsetHeight + 72}px`;
          let scroll = window.pageYOffset;
          let headerNewHeight = tHeadHeight - scroll;
          tableHead.style.height = `${headerNewHeight}px`;
        }
      }, false);
    </script>

    <?php do_action('get_footer'); ?>
    <?php wp_footer(); ?>
  </body>
</html>
