<!-- -*- mode: html -*- -->
<div class="modal micromodal-slide" id="install-modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="install-modal-title">
      <header class="modal__header">
        <h2 class="modal__title" id="install-modal-title">Install a DamageBDD Node</h2>
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>

      <main class="modal__content" id="install-modal-content">
        <form id="installRequestForm" class="install-form" onsubmit="return false;">
          <div class="note" id="detected-os" style="margin:.25rem 0 .5rem"></div>
          <div class="note" id="installStatus" style="margin:0 0 .75rem"></div>

          <!-- Quick Start: one-click download (auto-detected) -->
          <section aria-label="Quick Start">
            <h3 style="margin:.25rem 0 .5rem">One-click download Mint/Ubuntu/Debian Package</h3>
            <a id="dl-deb" target="blank" class="styled-btn" download>Download for Debian/Ubuntu/Mint.</a>
            <div id="dl-deb-note" class="note" style="opacity:.8;margin:.5rem 0 1rem">
              Deb package for debian linux and variants.
            </div>
            <h3 style="margin:.25rem 0 .5rem">One-click download</h3>

            <a id="dl-auto" class="styled-btn" download>Download for your platform</a>
            <div id="dl-auto-note" class="note" style="opacity:.8;margin:.5rem 0 1rem">
              Detected automatically. Change options in <strong>Advanced</strong> and the file will regenerate.
            </div>
          </section>


          <!-- Copy-paste one-liner (detected platform by default) -->
          <section aria-label="Copy-Paste">
            <h3 style="margin:.25rem 0 .5rem">Copy-paste one-liner</h3>

            <div id="preview-linux-macos" style="display:none;">
              <pre><code id="cmd-bash"></code></pre>
              <button class="styled-btn" type="button" data-copy="#cmd-bash">Copy</button>
            </div>

            <div id="preview-windows" style="display:none;">
              <pre><code id="cmd-ps1"></code></pre>
              <button class="styled-btn" type="button" data-copy="#cmd-ps1">Copy</button>
            </div>

            <div id="preview-android" style="display:none;">
              <pre><code id="cmd-termux"></code></pre>
              <button class="styled-btn" type="button" data-copy="#cmd-termux">Copy</button>
            </div>
          </section>

          <hr style="opacity:.15;margin:1rem 0">

          <!-- Advanced options (progressive + defaults to localhost) -->
          <details id="advanced-details">
            <summary>Advanced</summary>

            <div style="margin:.5rem 0 .25rem">
              <label class="pure-checkbox">
                <input id="inst-localhost" type="checkbox" checked>
                Run on <strong>localhost</strong> (no public IP / domain)
              </label>
              <div class="note" style="font-size:.9em;opacity:.85;margin:.25rem 0 .5rem">
                Binds to <code>127.0.0.1</code> and serves <code>http://localhost:&lt;port&gt;</code>.
              </div>
            </div>

            <!-- Revealed only when not localhost -->
            <div id="inst-remote-fields" style="display:none">
              <div class="pure-g">
                <div class="pure-u-1 pure-u-md-1-2">
                  <label>Domain (TLS host)</label>
                  <input id="inst-domain" name="domain" placeholder="run.example.com">
                </div>
                <div class="pure-u-1 pure-u-md-1-2">
                  <label>Admin Email (Let’s Encrypt)</label>
                  <input id="inst-email" name="email" type="email" placeholder="admin@example.com">
                </div>
              </div>
            </div>

            <div class="pure-g" style="margin-top:.5rem">
              <div class="pure-u-1 pure-u-md-1-3">
                <label>Port</label>
                <input id="inst-port" name="port" value="8080" inputmode="numeric">
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label>Branch</label>
                <input id="inst-branch" name="branch" value="develop">
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label>Repo</label>
                <input id="inst-repo" name="repo" value="https://github.com/DamageBDD/DamageBDD.git">
              </div>
            </div>

            <div class="pure-g" style="margin-top:.5rem">
              <div class="pure-u-1 pure-u-md-1-2">
                <label>Platform override</label>
                <select id="inst-os">
                  <option value="linux">Linux</option>
                  <option value="macos">macOS</option>
                  <option value="windows">Windows</option>
                  <option value="android">Android (Termux)</option>
                </select>
              </div>
              <div class="pure-u-1 pure-u-md-1-2">
                <label>Shell/Distro</label>
                <select id="inst-variant"></select>
              </div>
            </div>
          </details>
        </form>
      </main>

      <footer class="modal__footer">
        <button class="modal__btn modal__btn-primary" data-micromodal-close>Close</button>
      </footer>
    </div>
  </div>
</div>

