import { navBar } from './nav-bar.js';

export function appShell(appName, appVersion, runtimeMode) {
  const currentYear = new Date().getFullYear();

  return `
    <div class="app-shell d-flex flex-column min-vh-100">
      <div id="app-nav">
        ${navBar(appName)}
      </div>
      <main id="route-view" class="flex-grow-1"></main>
      <footer class="app-footer border-top mt-auto py-3">
        <div class="container-xxl d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-1 small">
          <div>&copy; ${currentYear} AKLARO</div>
          <div class="text-body-secondary">
            ${appName} v${appVersion} • ${runtimeMode} mode • PWA frontend for Tryton kitchen
          </div>
        </div>
      </footer>
      <div class="toast-stack" x-data="alertsData()">
        <template x-for="alert in alerts" :key="alert.id">
          <div class="toast show align-items-center border-0 mb-2 text-bg-dark" role="status">
            <div class="d-flex">
              <div class="toast-body">
                <span class="badge me-2 text-uppercase" :class="badgeClass(alert.type)" x-text="alert.type"></span>
                <span x-text="alert.message"></span>
              </div>
              <button
                type="button"
                class="btn-close btn-close-white me-2 m-auto"
                @click="dismiss(alert.id)"
                aria-label="Close"
              ></button>
            </div>
          </div>
        </template>
      </div>
    </div>
  `;
}