{% set error = errors[field.field_name] %}
<div class="form-group control-full{% if error %} error{% endif %}">
  <label class="control-label" for="field-zenodo-doi">
    {{ field.label }}
  </label>
  <div class="controls">
    <div class="input-group" style="width: 100%">
      <input
        id="field-zenodo-doi"
        type="text"
        name="zenodo_doi"
        value="{{ data['zenodo_doi'] or '' }}"
        placeholder="e.g. 10.5281/zenodo.1234567"
        class="form-control"
      />
      <span class="input-group-btn">
        <button
          type="button"
          id="zenodo-prefill-btn"
          class="btn btn-default"
          onclick="marineZenodoPrefill()"
        >
          Prefill from Zenodo
        </button>
      </span>
    </div>
    {% if field.help_text %}
      <p class="help-block">{{ field.help_text }}</p>
    {% endif %}
    {% if error %}
      <span class="error-block">{{ error[0] }}</span>
    {% endif %}
    <p id="zenodo-prefill-msg" style="display: none; margin-top: 6px;"></p>
  </div>
</div>

<script>
(function () {
  function getField(name) {
    return document.querySelector('[name="' + name + '"]');
  }

  function setField(name, value) {
    var el = getField(name);
    if (el && value !== undefined && value !== null && value !== '') {
      el.value = value;
      return true;
    }
    return false;
  }

  /* Auto-trigger on blur so the user doesn't need to click the button. */
  document.addEventListener('DOMContentLoaded', function () {
    var doiInput = document.getElementById('field-zenodo-doi');
    if (doiInput) {
      doiInput.addEventListener('blur', function () {
        if (doiInput.value.trim()) window.marineZenodoPrefill();
      });
      doiInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); window.marineZenodoPrefill(); }
      });
    }
  });

  window.marineZenodoPrefill = function () {
    var doiInput = document.getElementById('field-zenodo-doi');
    var doi = doiInput ? doiInput.value.trim() : '';
    if (!doi) return;

    var btn = document.getElementById('zenodo-prefill-btn');
    var msgEl = document.getElementById('zenodo-prefill-msg');

    btn.disabled = true;
    btn.textContent = 'Fetching…';
    msgEl.style.display = 'none';
    msgEl.textContent = '';

    fetch('/api/action/marinerg_zenodo_prefill?doi=' + encodeURIComponent(doi))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data.success) {
          var err = data.error || {};
          var msg = (err.doi && err.doi[0]) || JSON.stringify(err);
          msgEl.textContent = 'Error: ' + msg;
          msgEl.className = 'text-danger';
          msgEl.style.display = 'block';
          return;
        }

        var r = data.result;
        var populated = [];

        if (setField('title', r.title)) populated.push('title');
        if (setField('notes', r.notes)) populated.push('description');
        if (setField('tag_string', r.tag_string)) populated.push('tags');
        if (setField('license_id', r.license_id)) populated.push('license');
        if (setField('url', r.url)) populated.push('url');
        if (setField('author', r.author)) populated.push('author');
        if (setField('source_kind', r.source_kind)) populated.push('source kind');
        if (setField('publication_date', r.publication_date)) populated.push('publication date');

        /* Keep zenodo_doi in the field so the value is saved with the record. */

        if (populated.length) {
          msgEl.textContent = 'Prefilled: ' + populated.join(', ') + '. Review and adjust before saving.';
          msgEl.className = 'text-success';
        } else {
          msgEl.textContent = 'Zenodo record fetched but no matching form fields found to populate.';
          msgEl.className = 'text-muted';
        }
        msgEl.style.display = 'block';
      })
      .catch(function (err) {
        msgEl.textContent = 'Request failed: ' + err.message;
        msgEl.className = 'text-danger';
        msgEl.style.display = 'block';
      })
      .finally(function () {
        btn.disabled = false;
        btn.textContent = 'Prefill from Zenodo';
      });
  };
}());
</script>