<%# Shared pop-up editor for a contact. Params: channel, field, fieldLabel, hasExtra %>
<dialog id="edit-contact-dialog" class="rounded-2xl p-0 w-full max-w-md shadow-2xl backdrop:bg-black/40">
  <form id="edit-contact-form" method="POST" action="" class="p-6 space-y-4">
    <div class="flex items-start justify-between">
      <h3 class="text-lg font-bold text-slate-900">Edit contact</h3>
      <button type="button" id="edit-contact-close" class="text-slate-400 hover:text-slate-600 text-xl leading-none" aria-label="Close">&times;</button>
    </div>

    <div>
      <label class="block text-xs font-medium text-slate-600 mb-1">Name</label>
      <input type="text" name="name" id="edit-contact-name" class="block w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-600 mb-1"><%= fieldLabel %></label>
      <input type="text" name="<%= field %>" id="edit-contact-value" required class="block w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
    </div>
    <% if (hasExtra) { %>
      <div id="edit-contact-extra" class="space-y-4"></div>
    <% } %>

    <div class="flex justify-end gap-2 pt-1">
      <button type="button" id="edit-contact-cancel" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800">Cancel</button>
      <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-lg shadow-sm transition">Save changes</button>
    </div>
  </form>
</dialog>

<script>
  (function () {
    var dialog = document.getElementById('edit-contact-dialog');
    var form = document.getElementById('edit-contact-form');
    var extraBox = document.getElementById('edit-contact-extra');

    document.addEventListener('click', function (e) {
      var btn = e.target.closest('.edit-contact');
      if (!btn) return;
      form.action = '/<%= channel %>/contacts/' + btn.dataset.id + '/update';
      document.getElementById('edit-contact-name').value = btn.dataset.name || '';
      document.getElementById('edit-contact-value').value = btn.dataset.value || '';

      if (extraBox) {
        extraBox.textContent = '';
        var extra = {};
        try { extra = btn.dataset.extra ? JSON.parse(btn.dataset.extra) : {}; } catch (err) { extra = {}; }
        Object.keys(extra).forEach(function (key) {
          var wrap = document.createElement('div');
          var label = document.createElement('label');
          label.className = 'block text-xs font-medium text-slate-600 mb-1';
          label.textContent = key;
          var input = document.createElement('input');
          input.type = 'text';
          input.name = 'extra[' + key + ']';
          input.value = extra[key];
          input.className = 'block w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500';
          wrap.appendChild(label);
          wrap.appendChild(input);
          extraBox.appendChild(wrap);
        });
      }
      dialog.showModal();
    });

    function close() { dialog.close(); }
    document.getElementById('edit-contact-close').addEventListener('click', close);
    document.getElementById('edit-contact-cancel').addEventListener('click', close);
    dialog.addEventListener('click', function (e) { if (e.target === dialog) close(); });
  })();
</script>
