{# Fragment returned by POST /session/start — analysis result + confirm form #}

{% if error %}
<div class="panel error-panel">
  <h2>Analysis Failed</h2>
  <div class="error">{{ error }}</div>
  <a href="/" class="btn">Try Again</a>
</div>
{% else %}
<div class="panel" id="step2">
  <h2>Analysis Result</h2>

  <table>
    <tr><td>File</td><td>{{ analysis.filename }}</td></tr>
    <tr><td>Disk Format</td><td>{{ analysis.disk_format }}</td></tr>
    <tr><td>Disk Size</td><td>{{ analysis.disk_size_gb }} GB</td></tr>
    <tr><td>Operating System</td><td>{{ analysis.os_type or 'Unknown' }}</td></tr>
    <tr><td>EFI Bootable</td><td>{{ 'Yes' if analysis.efi_detectable else 'Unknown' }}</td></tr>
  </table>

  <p class="confirm-text">Is this correct? Configure the VM below and submit the conversion job.</p>

  <form id="confirm-form" onsubmit="submitJob(event)">
    <input type="hidden" name="vmid" value="{{ vmid }}">
    <input type="hidden" name="source_filename" value="{{ source_filename }}">
    <input type="hidden" name="disk_format" value="{{ analysis.disk_format }}">

    <div class="row">
      <div class="form-group">
        <label>VM Name *</label>
        <input type="text" name="vm_name" required value="{{ vm_name or '' }}"
               placeholder="my-converted-vm">
      </div>
      <div class="form-group">
        <label>Target Disk Size (GB)</label>
        <input type="number" name="target_disk_size_gb"
               value="{{ analysis.disk_size_gb }}"
               placeholder="Leave blank for auto-shrink">
        <span class="hint">{{ analysis.disk_size_gb }} GB detected. Omit to auto-shrink to 30 GB.</span>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <label>CPU Cores</label>
        <input type="number" name="cpu_cores" value="2" min="1">
      </div>
      <div class="form-group">
        <label>RAM (MB)</label>
        <input type="number" name="ram_mb" value="4096" min="512">
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <label>Storage Pool</label>
        <input type="text" name="target_storage" value="local-lvm">
      </div>
      <div class="form-group">
        <label>Boot Detection</label>
        <select name="auto_detect_boot">
          <option value="true" selected>Auto-detect (recommended)</option>
          <option value="false">Manual</option>
        </select>
      </div>
    </div>
    <div class="form-group" id="boot-type-group" style="display:none;">
      <label>Boot Type</label>
      <select name="boot_type">
        <option value="uefi">UEFI</option>
        <option value="legacy">Legacy BIOS</option>
      </select>
    </div>

    <button type="submit" id="submit-btn">Start Conversion</button>
  </form>

  <div id="submit-status" class="hidden" style="margin-top:1rem;"></div>
</div>
{% endif %}

<script>
document.querySelector('select[name="auto_detect_boot"]')?.addEventListener('change', function(e) {
  document.getElementById('boot-type-group').style.display =
    e.target.value === 'false' ? 'block' : 'none';
});

async function submitJob(e) {
  e.preventDefault();
  const btn = document.getElementById('submit-btn');
  const status = document.getElementById('submit-status');
  btn.disabled = true;
  status.classList.remove('hidden');
  status.innerHTML = '<div class="spinner"></div> Submitting job...';

  const formData = new FormData(e.target);

  try {
    const resp = await fetch('/session/confirm', { method: 'POST', body: formData });
    const html = await resp.text();
    document.body.innerHTML = html;  // Replace page with polling view
  } catch (err) {
    status.innerHTML = `<div class="error">Failed: ${err.message}</div>`;
    btn.disabled = false;
  }
}
</script>