<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="color-scheme" content="dark light" />
  <title>{{ app_name }} — your AI personal shopper</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
  <link
    rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c5cff'/%3E%3Cstop offset='1' stop-color='%23ff6ec7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect rx='14' width='64' height='64' fill='url(%23g)'/%3E%3Cpath d='M20 24h24l-3 22a4 4 0 0 1-4 3.6H27a4 4 0 0 1-4-3.6Z' fill='none' stroke='white' stroke-width='3'/%3E%3Cpath d='M26 24v-4a6 6 0 0 1 12 0v4' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E"
  />
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar" aria-label="Conversations">
      <div class="brand">
        <div class="brand__mark" aria-hidden="true">
          <svg viewBox="0 0 32 32" width="32" height="32">
            <defs>
              <linearGradient id="bg" x1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#7c5cff" />
                <stop offset="1" stop-color="#ff6ec7" />
              </linearGradient>
            </defs>
            <rect width="32" height="32" rx="9" fill="url(#bg)" />
            <path
              d="M10 13h12l-1.5 11a2 2 0 0 1-2 1.8H13.5a2 2 0 0 1-2-1.8Z"
              fill="none" stroke="white" stroke-width="1.6" />
            <path d="M13 13v-2.2a3 3 0 0 1 6 0V13" fill="none" stroke="white" stroke-width="1.6" />
          </svg>
        </div>
        <div class="brand__text">
          <div class="brand__name">{{ app_name }}</div>
          <div class="brand__tag">Your AI personal shopper</div>
        </div>
      </div>

      <button class="btn btn--primary new-chat" id="newChat">
        <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
          <path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
        New conversation
      </button>

      <nav class="sidebar__section" aria-label="Quick prompts">
        <h3>Try asking</h3>
        <ul class="quick-list">
          <li><button class="quick" data-prompt="Show me white cotton shirts under $40">White cotton shirts under $40</button></li>
          <li><button class="quick" data-prompt="What outfit do you suggest for a wedding?">Outfit for a wedding</button></li>
          <li><button class="quick" data-prompt="What is your return policy?">Return policy</button></li>
          <li><button class="quick" data-prompt="Do you have any black dresses in size M?">Black dress, size M</button></li>
          <li><button class="quick" data-prompt="Recommend a winter outfit under $200">Winter outfit under $200</button></li>
        </ul>
      </nav>

      <div class="sidebar__footer">
        <button class="icon-btn" id="themeToggle" aria-label="Toggle theme">
          <svg class="icon-sun" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
            <circle cx="10" cy="10" r="4" fill="currentColor" />
            <g stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
              <path d="M10 1.5v2M10 16.5v2M1.5 10h2M16.5 10h2M3.5 3.5l1.4 1.4M15.1 15.1l1.4 1.4M3.5 16.5l1.4-1.4M15.1 4.9l1.4-1.4" />
            </g>
          </svg>
          <svg class="icon-moon" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
            <path d="M15.5 12.5A6 6 0 0 1 7.5 4.5a6 6 0 1 0 8 8Z" fill="currentColor" />
          </svg>
        </button>
        <span class="status-dot" id="status" title="Connected"></span>
        <span class="muted small" id="statusLabel">Online</span>
      </div>
    </aside>

    <main class="chat" aria-label="Conversation">
      <header class="chat__header">
        <div class="chat__title">
          <h1>
            <span class="chat__eyebrow">In-store assistant</span>
            Find it. Style it. Ship it.
          </h1>
          <p class="muted">Catalogue lookups, policy answers, and outfit advice — straight from our store.</p>
        </div>
        <div class="chat__actions">
          <span class="badge" id="modelBadge">gpt-4o-mini</span>
        </div>
      </header>

      <section class="messages" id="messages" aria-live="polite"></section>

      <div class="composer">
        <form id="composerForm" autocomplete="off">
          <div class="composer__field">
            <textarea
              id="messageInput"
              rows="1"
              maxlength="2000"
              placeholder="Ask anything — e.g. ‘Find me a linen shirt in size L’"
              aria-label="Message"></textarea>
            <div class="composer__actions">
              <button type="button" class="icon-btn" id="micBtn" aria-label="Voice input" title="Voice input">
                <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
                  <rect x="7" y="2" width="6" height="10" rx="3" fill="currentColor" />
                  <path d="M4 10a6 6 0 0 0 12 0M10 16v2" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" />
                </svg>
              </button>
              <button type="submit" class="btn btn--send" id="sendBtn" aria-label="Send">
                <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
                  <path d="M3 10l14-7-5 17-3-7-6-3z" fill="currentColor" />
                </svg>
              </button>
            </div>
          </div>
          <div class="composer__hint muted small">
            <span><kbd>Enter</kbd> send · <kbd>Shift</kbd>+<kbd>Enter</kbd> new line</span>
            <span id="charCount">0 / 2000</span>
          </div>
        </form>
      </div>
    </main>
  </div>

  <template id="msgTemplate">
    <article class="msg">
      <div class="msg__avatar"></div>
      <div class="msg__body">
        <div class="msg__meta">
          <span class="msg__role"></span>
          <span class="msg__time muted small"></span>
          <span class="msg__route badge badge--ghost" hidden></span>
        </div>
        <div class="msg__content"></div>
        <div class="msg__products" hidden></div>
      </div>
    </article>
  </template>

  <template id="cardTemplate">
    <a class="product-card" href="#" target="_blank" rel="noopener">
      <div class="product-card__img" aria-hidden="true"></div>
      <div class="product-card__body">
        <div class="product-card__name"></div>
        <div class="product-card__meta muted small"></div>
        <div class="product-card__row">
          <span class="product-card__price"></span>
          <span class="product-card__stock"></span>
        </div>
      </div>
    </a>
  </template>

  <script src="{{ url_for('static', filename='app.js') }}" defer></script>
</body>
</html>
