<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <script
    type="module"
    src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
  ></script>
  <style>
    :root {
      --primary-color: #0366d6;
      --bg-color: #ffffff;
      --text-color: #24292e;
      --border-color: #e1e4e8;
      --card-bg: #f6f8fa;
      --warning-bg: #fff8e6;
      --warning-border: #f0c36d;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --primary-color: #58a6ff;
        --bg-color: #0d1117;
        --text-color: #c9d1d9;
        --border-color: #30363d;
        --card-bg: #161b22;
        --warning-bg: #3d2e00;
        --warning-border: #6e5a1f;
      }
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      background: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
    }

    h1 {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 0.5rem;
    }

    .version-badge {
      font-size: 0.5em;
      font-weight: normal;
      color: var(--text-color);
      opacity: 0.6;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    h2 {
      margin-top: 2rem;
    }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.5rem;
      margin: 1rem 0;
    }

    .install-section {
      text-align: center;
      padding: 2rem;
    }

    .install-section h2 {
      margin-top: 0;
    }

    esp-web-install-button {
      --esp-tools-button-color: var(--primary-color);
    }

    a {
      color: var(--primary-color);
    }

    code {
      background: var(--card-bg);
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      font-size: 0.9em;
    }

    /* Tabs */
    .tabs {
      margin: 1rem 0;
    }

    .tabs input[type="radio"] {
      display: none;
    }

    .tab-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 0;
    }

    .tab-labels label {
      padding: 0.5rem 1rem;
      cursor: pointer;
      border: 1px solid transparent;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      margin-bottom: -1px;
      background: var(--bg-color);
    }

    .tab-labels label:hover {
      background: var(--card-bg);
    }

    .tab-content {
      display: none;
      padding: 1rem;
      border: 1px solid var(--border-color);
      border-top: none;
      border-radius: 0 0 8px 8px;
      background: var(--card-bg);
    }

    {{ tab_css }}

    .firmware-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      font-weight: 500;
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 0.5rem;
    }

    .yaml-details {
      margin: 0.5rem 0 0 0;
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }

    .yaml-details summary {
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-weight: 500;
      background: var(--card-bg);
      border-radius: 8px;
    }

    .yaml-details summary .summary-content {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      width: calc(100% - 1.5em);
      margin-left: 8px;
    }

    .yaml-details summary .download-link {
      font-weight: normal;
      font-size: 0.85em;
    }

    .yaml-details[open] summary {
      border-bottom: 1px solid var(--border-color);
      border-radius: 8px 8px 0 0;
    }

    .yaml-details pre {
      margin: 0;
      padding: 1rem;
      overflow-x: auto;
      background: var(--bg-color);
      border-radius: 0 0 8px 8px;
    }

    .yaml-details pre code {
      background: none;
      padding: 0;
      font-size: 0.85em;
      line-height: 1.5;
    }

    ol {
      padding-left: 1.5rem;
    }

    li {
      margin: 0.5rem 0;
    }

    .not-supported {
      display: none;
      color: #b00;
      padding: 1rem;
      background: #fee;
      border-radius: 4px;
      margin-top: 1rem;
    }

    esp-web-install-button[install-unsupported] + .not-supported {
      display: block;
    }

    .insecure-context {
      display: none;
    }

    .insecure-context .warning {
      background: var(--warning-bg);
      border: 1px solid var(--warning-border);
      border-radius: 8px;
      padding: 1rem 1.5rem;
      margin-bottom: 1.5rem;
    }

    body.insecure .secure-only {
      display: none;
    }

    body.insecure .insecure-context {
      display: block;
    }

    footer {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border-color);
      font-size: 0.85rem;
      color: var(--text-color);
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <h1>{{ title }}{{ version_badge }}</h1>

  <div class="card install-section secure-only">
    <h2>Install Firmware</h2>
    <p>Connect your device via USB and click the button below to install.</p>

    <esp-web-install-button manifest="manifest.json"></esp-web-install-button>

    <div class="not-supported">
      <strong>Browser not supported.</strong><br>
      ESP Web Tools requires a Chromium-based browser (Chrome, Edge) with Web Serial support.
      Please use one of these browsers, or follow the manual installation instructions below.
    </div>
  </div>

  <div class="insecure-context">
    <div class="warning">
      <strong>Browser-based installation requires HTTPS.</strong><br>
      This page is not served over a secure connection, so the install button won't work.
      Use <a href="https://web.esphome.io" target="_blank">web.esphome.io</a> to install the firmware instead.
    </div>
  </div>

  <div class="tabs">
    {{ tab_inputs }}
    <div class="tab-labels">
      {{ tab_labels }}
    </div>
    {{ tab_contents }}
  </div>

  <footer>
    <p>
      Generated on {{ build_date }} by <a href="https://github.com/esphome/ewt-gen" target="_blank">ewt-gen</a>.
      Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">ESP Web Tools</a>
      and <a href="https://esphome.io" target="_blank">ESPHome</a>
      by the <a href="https://www.openhomefoundation.org/" target="_blank">Open Home Foundation</a>.
    </p>
  </footer>

  <script>
    if (!window.isSecureContext) {
      document.body.classList.add('insecure');
    }
  </script>
</body>
</html>
