meal-order-manager/src/server/templates/form.html.j2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Sea Haven — Meal Order ({{ week }})</title>
<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABX0lEQVRYhe3TPWsUURjF8d+dnSxhoxA1xEJnQQsJGbBTrIIIvoEDNqkNiJ9BrPwI4jeY2kmVoKWkSVALK6MgwWLsJIWIBBFZLGaLTTLrJrX3X96X5znnPPcSiUQikf+dcHAhr+qLuIrT2MV77Owv9ycWy6u6i3tnOu5maTg/FUzjOz5gHe/KImsXkFf1ZTzH9ZbaNdbwElvby/0fwzsJFnANN3uJO/00zJ5MxmrcwqOyyD7uE5BX9Q08xh5O4BL+ZXkXvzQp9RKcS4OzaUukh9nDg7LIVkcFGI04r2pDZw+xgrlx1U516KdB93DnGhvYxBd8w08M0MXnssgmCx7O9RZuYzEw30sszATpXCeY2R/3AC/wTMu420gnHbgyHeY1sb3FH9wfc28DT8oiezOx63EE4DeeYqllb4BXGsevj+L4IEd4M6ysf6X5HUu4oEniE9bKIts5dtdIJBKJREb4C8ngTD+C9DtvAAAAAElFTkSuQmCC">
<style>
{{ css|safe }}
</style>
{% if config.authMode == 'google' %}
<script src="https://accounts.google.com/gsi/client" async defer></script>
{% endif %}
</head>
<body>
<!-- FORM_HTML_MARKER -->
<div class="closed-overlay" id="closed-overlay" role="dialog" aria-modal="true" aria-labelledby="closed-title" aria-describedby="closed-description" aria-hidden="true">
  <div class="closed-card" tabindex="-1">
    <div class="logo">&#127869;</div>
    <h1 id="closed-title">Orders Are Closed</h1>
    <p id="closed-description">Orders open again Monday at 8:00 AM ET</p>
    <div class="countdown" id="countdown"></div>
    <div class="countdown-label">until orders open</div>
  </div>
</div>

{% if config.authMode == 'google' %}
<div class="auth-overlay" id="auth-overlay" role="dialog" aria-modal="true" aria-labelledby="auth-title" aria-describedby="auth-description" aria-hidden="false">
  <div class="auth-card" tabindex="-1">
    <div class="logo">&#127869;</div>
    <h1 id="auth-title">Sea Haven Meal Order</h1>
    <p id="auth-description">Sign in with your company Google account to place your order.</p>
    <div id="g-signin-btn" class="g-signin-wrap"></div>
  </div>
</div>
{% endif %}

<div class="container{% if config.authMode == 'google' %} is-hidden{% endif %}" id="app">
  <header>
    <h1>Sea Haven Meal Order</h1>
    <p>Week of {{ week }} &middot; Menu scraped {{ scraped_at[:10] }}</p>
  </header>

  <div class="deadline">Order deadline: {{ deadline }}</div>
  <div class="duplicate-warning is-hidden" id="duplicate-warning">You've already submitted an order this week. Submitting again will replace your previous order.</div>

  {% if has_discount %}
  <div class="discount-banner">Prices reflect employee cost after {% if bulk_discount > 0 %}{{ bulk_discount_label }}% bulk discount{% endif %}{% if bulk_discount > 0 and company_subsidy > 0 %} + {% endif %}{% if company_subsidy > 0 %}{{ company_subsidy_label }}% company subsidy{% endif %}</div>
  {% endif %}

  {% if config.authMode == 'google' %}
  <div class="employee-info">
    <div id="user-info">
      <div class="user-bar">
        <img id="user-avatar" class="user-avatar is-hidden" alt="">
        <div class="user-meta">
          <div id="user-name" class="user-name"></div>
          <div id="user-email" class="user-email"></div>
        </div>
        <button type="button" id="admin-btn" class="btn btn-primary btn-sm is-hidden">Admin</button>
        <button type="button" id="sign-out-btn" class="btn btn-outline btn-sm">Sign out</button>
      </div>
    </div>
  </div>
  {% else %}
  <div class="employee-info">
    <label for="emp-name">Your Name</label>
    <select id="emp-name"><option value="">Loading...</option></select>
    <input type="hidden" id="emp-email">
  </div>
  {% endif %}

  <input type="text" class="search-bar" id="search" placeholder="Search meals...">

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

  <template id="meal-card-tpl">
    <div class="meal-card" data-meal-index="">
      <img class="meal-img is-hidden" alt="" loading="lazy">
      <div class="meal-info">
        <div class="meal-name"></div>
        <div class="meal-desc is-hidden"></div>
        <div class="meal-meta"></div>
        <div class="meal-tags"></div>
      </div>
      <div class="qty-control">
        <button type="button" data-qty-delta="-1" aria-label="Decrease">&minus;</button>
        <input class="qty" type="number" min="0" step="1" value="0">
        <button type="button" data-qty-delta="1" aria-label="Increase">+</button>
      </div>
    </div>
  </template>

  <div id="meals-list"></div>

  <div class="sticky-footer{% if config.authMode == 'google' %} is-hidden{% endif %}" id="sticky-footer">
    <div class="inner">
      <div>
        <span class="total" id="total-display">$0.00</span>
        <span class="count-display" id="count-display">0 meals</span>
      </div>
      <button type="button" class="btn btn-primary submit-btn" id="submit-btn" disabled>Submit Order</button>
    </div>
  </div>

  <div id="admin-panel" class="is-hidden">
    <div class="admin-panel">
      <div class="admin-header">
        <h2>Order Admin</h2>
        <div class="admin-toolbar">
          <select id="admin-week"></select>
          <button type="button" id="admin-download-btn" class="btn btn-primary admin-toolbar-btn" data-admin-action="download-list" disabled>Download order list</button>
          <button type="button" id="admin-pdf-btn" class="btn btn-primary admin-toolbar-btn" data-admin-action="download-pdf">Download summary PDF</button>
          <button type="button" class="btn btn-outline back-btn" data-admin-action="hide-admin">Back to Menu</button>
        </div>
      </div>
      <div id="admin-stats" class="admin-stats"></div>
      <div class="admin-table-wrap">
        <table class="admin-table">
          <thead>
            <tr>
              <th>Employee</th>
              <th>Items</th>
              <th>Total</th>
              <th>Submitted</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="admin-tbody"></tbody>
        </table>
      </div>
      <div id="admin-empty" class="admin-empty is-hidden">No orders for this week.</div>
    </div>
  </div>

  <div id="success" class="success-msg is-hidden">
    <h2>Order submitted!</h2>
    <p id="success-detail"></p>
    <button type="button" id="success-back-btn" class="btn btn-outline back-btn">Back to Menu</button>
  </div>
</div>

<script>
window.CONFIG = {{ config_json|safe }};
</script>
<script>
{
{{ form_js|safe }}
}
</script>
<script>
{
{{ admin_js|safe }}
}
</script>
</body>
</html>