{% if username %}
  <p>👋 Selamat datang, <strong>{{ username }}</strong> | <a href="{{ url_for('logout') }}">Logout</a></p>
{% else %}
  <p><a href="{{ url_for('login') }}">Login</a> | <a href="{{ url_for('register') }}">Register</a></p>
{% endif %}

<hr><br>

<form id="pdfForm" method="POST">
  <label><strong>Pilih Template:</strong></label>
  <select name="template" onchange="this.form.submit()">
    {% for tmpl in templates %}
      <option value="{{ tmpl }}" {% if tmpl == selected_template %}selected{% endif %}>{{ tmpl }}</option>
    {% endfor %}
  </select><br><br>

  {% for field in config["fields"] %}
    {% if field.type == 'manual' %}
      <label>{{ field.name.replace('_', ' ').title() }}:</label>
      <input type="text" name="{{ field.name }}" required><br><br>
    {% endif %}
  {% endfor %}

  <!-- Tombol untuk preview (submit POST) -->
  <input type="submit" value="Generate + Preview (Reload)">

  <!-- Tombol Preview Live -->
  <button type="button" onclick="previewLive()">Preview Live (No Reload)</button>

  <!-- Tombol Download -->
  {% if preview %}
    <a href="/download" target="_blank">
      <button type="button">Download PDF</button>
    </a>
  {% endif %}
</form>

<!-- Preview iframe -->
<h3>Live Preview:</h3>
<iframe id="pdfPreview" style="width:100%; height:600px; border:1px solid #ccc;"></iframe>

<script>
function previewLive() {
  const form = document.getElementById('pdfForm');
  const formData = new FormData(form);

  fetch('/preview-pdf-bytes', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    const base64pdf = data.pdf_base64;
    document.getElementById('pdfPreview').src = "data:application/pdf;base64," + base64pdf;
  })
  .catch(err => {
    alert("Gagal preview PDF");
    console.error(err);
  });
}
</script>