<div class="form-page" style="max-width:860px">
  <a href="/member/agreements" class="back-link"><i class="bi bi-arrow-left"></i> Back to Agreements</a>
  <div class="form-card">
    <h2>Create New Agreement</h2>
    <% if (typeof error !== 'undefined' && error && error.length) { %><div class="alert alert-error"><%= error[0] %></div><% } %>
    <form action="/member/agreements" method="POST" id="agreementForm">
      <div class="form-row">
        <div class="form-group"><label>Agreement Title *</label><input type="text" name="title" required placeholder="e.g., NDA with Acme Corp"></div>
        <div class="form-group"><label>Type *</label>
          <select name="agreement_type" required id="typeSelect">
            <option value="NDA">Non-Disclosure Agreement (NDA)</option>
            <option value="service">Service Agreement</option>
            <option value="vendor">Vendor Agreement</option>
            <option value="employment">Employment Agreement</option>
            <option value="partnership">Partnership Agreement</option>
            <option value="custom">Custom Agreement</option>
          </select>
        </div>
      </div>
      <% if (templates && templates.length) { %>
      <div class="form-group"><label>Load from Template (optional)</label>
        <select id="templateSelect">
          <option value="">— Select a template —</option>
          <% templates.forEach(t => { %><option value="<%= t.id %>"><%= t.title %> (<%= t.template_type %>)</option><% }) %>
        </select>
      </div>
      <% } %>
      <div class="form-group"><label>Agreement Content *</label>
        <textarea name="content" id="agreementContent" rows="16" required placeholder="Enter or paste your agreement content here. Use [PARTY A], [PARTY B], [DATE] as placeholders..."></textarea>
        <small class="form-help">Use placeholders like [PARTY NAME], [DATE], [AMOUNT] that will be filled in.</small>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Effective Date</label><input type="date" name="effective_date"></div>
        <div class="form-group"><label>Expiration Date</label><input type="date" name="expires_at"></div>
        <div class="form-group"><label>Signature Deadline</label><input type="date" name="signature_deadline"></div>
      </div>
      <div class="form-card" style="background:#f8fafc;margin:0 -24px;padding:20px 24px">
        <h4 style="margin-bottom:14px">Signatories (who needs to sign)</h4>
        <div id="signersContainer">
          <div class="signer-row form-row" style="margin-bottom:10px">
            <div class="form-group"><label>Name</label><input type="text" name="signer_names" placeholder="Jane Smith"></div>
            <div class="form-group"><label>Email *</label><input type="email" name="signer_emails" placeholder="jane@company.com"></div>
          </div>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm" id="addSigner"><i class="bi bi-plus-circle"></i> Add Another Signer</button>
      </div>
      <div class="form-actions" style="margin-top:20px">
        <button type="submit" name="submit_action" value="send" class="btn btn-primary"><i class="bi bi-send-fill"></i> Create & Send for Signature</button>
        <button type="submit" name="submit_action" value="draft" class="btn btn-outline-primary"><i class="bi bi-file-earmark-text"></i> Save as Draft</button>
        <a href="/member/agreements" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script>
document.getElementById('addSigner').addEventListener('click', () => {
  const div = document.createElement('div');
  div.className = 'signer-row form-row';
  div.style.marginBottom = '10px';
  div.innerHTML = `<div class="form-group"><label>Name</label><input type="text" name="signer_names" placeholder="Name"></div><div class="form-group"><label>Email</label><input type="email" name="signer_emails" placeholder="email@company.com"></div><button type="button" onclick="this.closest('.signer-row').remove()" class="btn btn-ghost btn-sm" style="align-self:flex-end;margin-bottom:0"><i class="bi bi-trash"></i></button>`;
  document.getElementById('signersContainer').appendChild(div);
});

const templateSelect = document.getElementById('templateSelect');
if (templateSelect) {
  templateSelect.addEventListener('change', async function() {
    if (!this.value) return;
    try {
      const res = await fetch(`/member/agreements/template/${this.value}`);
      const t = await res.json();
      document.getElementById('agreementContent').value = t.content;
      document.getElementById('typeSelect').value = t.template_type;
    } catch {}
  });
}
</script>
