<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>{{#if title}}{{title}}{{else}}Suvarna Bandhan{{/if}}</title>
  
  <!-- Core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/theme.css">
  <link rel="stylesheet" href="/assets/components/drawer.css">
  
  {{#if isWeddings}}
  <link rel="stylesheet" href="/css/weddings.css">
  {{/if}}

  <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
  
  {{{_sections.head}}}
</head>
<body class="{{bodyClass}}">

  <script>
    // Make server master data available to client-side scripts
    window.masterData = {{{json masterData}}};
  </script>

  {{{body}}}

  {{#if isInternalPage}}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      if (document.querySelector('.back-btn, [data-back-button]')) return;
      const button = document.createElement('button');
      button.className = 'internal-back-button';
      if (document.querySelector('.bottom-nav')) button.classList.add('has-bottom-nav');
      button.type = 'button';
      button.setAttribute('aria-label', 'Go back');
      button.innerHTML = '<i class="bi bi-chevron-left"></i>';
      button.addEventListener('click', goToPreviousPage);
      document.body.appendChild(button);
    });
  </script>
  <style>
    .internal-back-button {
      position: fixed;
      bottom: 20px;
      left: 16px;
      z-index: 250;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 50%;
      background: var(--card);
      box-shadow: var(--shadow-sm);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .internal-back-button.has-bottom-nav {
      bottom: calc(var(--nav-height, 72px) + 18px);
    }
  </style>
  {{/if}}

  <!-- Drawer Partial -->
  {{> drawer}}

  <!-- Core Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
  <script src="/js/app.js"></script>
  <script src="/js/master-data.js"></script>
  <script src="/assets/components/drawer.js"></script>
  
  {{#if isWeddings}}
  <script src="/js/data.js"></script>
  <script src="/js/weddings.js"></script>
  {{/if}}

  {{{_sections.scripts}}}
</body>
</html>
