<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#F5A623">
  
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://accounts.google.com/gsi/client 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://accounts.google.com/gsi/ https://script.google.com https://script.googleusercontent.com; frame-src https://accounts.google.com/; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://lh3.googleusercontent.com;">

  <title>EggspressIloilo</title>
  <link rel="manifest" href="manifest.json">
  <link rel="icon" href="/app/icons/icon-192.png">
  <link rel="stylesheet" href="styles/base.css">
  <link rel="stylesheet" href="styles/components.css">
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>

<div id="screen-auth" class="screen">
  <div class="auth-container">
    <div class="auth-logo">
      <div class="auth-logo-icon">🥚</div>
      <div class="auth-logo-name">EggspressIloilo</div>
      <div class="auth-logo-sub">Field Operations</div>
    </div>
    <div id="signin-button-container"></div>
  </div>
</div>

<div id="screen-app" class="screen" style="display:none">
  <header class="app-header">
    <div class="header-left">
      <span class="header-logo">🥚</span>
      <span id="page-title">Home</span>
    </div>
    <div class="header-right">
      <span id="user-badge" class="user-badge"></span>
      <button class="btn-icon" onclick="signOut()">⎋</button>
    </div>
  </header>
  <main id="main-content"></main>
  <nav id="bottom-nav" class="bottom-nav"></nav>
</div>

<div id="toast" class="toast"></div>

<script src="./core/auth.js"></script>
<script src="./core/sync.js"></script>
<script src="./core/gps.js"></script>
<script src="./core/camera.js"></script>
<script src="./modules/shift/shift.js"></script>
<script src="./modules/sale/sale.js"></script>
<script src="./modules/manager/manager.js"></script>
<script src="./app.js"></script>
</body>
</html>