{{define "new_license.html"}}
{{template "base" .}}
{{end}}

{{define "new-license-title"}}Issue New License{{end}}

{{define "new-license-content"}}
<div style="max-width:600px">
  <div class="card">
    <div class="card-header">
      <span class="card-title">New License</span>
    </div>

    {{if .Error}}
    <div class="alert alert-error">{{.Error}}</div>
    {{end}}

    <form method="POST" action="/licenses">

      <div class="form-row">
        <div class="form-group">
          <label>Customer Name</label>
          <input type="text" name="customer_name" placeholder="Acme Corp" required>
        </div>
        <div class="form-group">
          <label>Customer Email</label>
          <input type="email" name="customer_email" placeholder="admin@acme.com" required>
        </div>
      </div>

      <div class="form-group">
        <label>Product Name</label>
        <input type="text" name="product_name" placeholder="My App Pro" required>
      </div>

      <div class="form-group">
        <label>License Key</label>
        <input type="text" name="key" value="{{.GeneratedKey}}" required
               style="font-family:var(--mono);letter-spacing:0.05em;color:var(--accent)">
      </div>

      <div class="form-group">
        <label>License Type</label>
        <div class="type-toggle">
          <button type="button" class="type-btn selected" id="btn-expiry"
            onclick="setType('expiry')">⏱ Expiry Date</button>
          <button type="button" class="type-btn" id="btn-usage"
            onclick="setType('usage')">🔢 Usage Count</button>
        </div>
        <input type="hidden" name="type" id="type-input" value="expiry">
      </div>

      <div id="expiry-fields">
        <div class="form-group">
          <label>Expires On</label>
          <input type="date" name="expires_at">
        </div>
      </div>

      <div id="usage-fields" style="display:none">
        <div class="form-group">
          <label>Max Activations</label>
          <input type="number" name="max_uses" placeholder="5" min="1" value="5">
        </div>
      </div>

      <div class="form-group">
        <label>Bind to Machine ID <span style="color:var(--muted)">(optional)</span></label>
        <input type="text" name="machine_id" placeholder="Hardware fingerprint hash — leave blank for floating license"
               style="font-family:var(--mono);font-size:11px">
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Issue License</button>
        <a href="/" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script>
function setType(type) {
  document.getElementById('type-input').value = type;
  document.getElementById('expiry-fields').style.display = type === 'expiry' ? '' : 'none';
  document.getElementById('usage-fields').style.display  = type === 'usage'  ? '' : 'none';
  document.getElementById('btn-expiry').classList.toggle('selected', type === 'expiry');
  document.getElementById('btn-usage').classList.toggle('selected',  type === 'usage');
}
</script>
{{end}}