{% extends "base.html" %}
{% load static %}
{% block title %}Edit Entry #{{ entry.id }} - Illustrations DB{% endblock %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Edit Illustration</h1>
  <p class="page-subtitle">
    Update the details below. Subjects should be comma‑separated; keep scriptures in standard abbreviations.
  </p>

  <form id="entry-edit-form" method="post" class="search-form card">
    {% csrf_token %}

    <div class="form-grid">
      <div class="form-row">
        <label>Subject</label>
        {{ form.subject }}
        {% if form.subject.errors %}<div class="err">{{ form.subject.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row">
        <label>Illustration</label>
        {{ form.illustration }}
        {% if form.illustration.errors %}<div class="err">{{ form.illustration.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row">
        <label>Application</label>
        {{ form.application }}
        {% if form.application.errors %}<div class="err">{{ form.application.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row two">
        <div>
          <label>Scripture</label>
          {{ form.scripture_raw }}
          {% if form.scripture_raw.errors %}<div class="err">{{ form.scripture_raw.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Source</label>
          {{ form.source }}
          {% if form.source.errors %}<div class="err">{{ form.source.errors|striptags }}</div>{% endif %}
        </div>
      </div>

      <div class="form-row two">
        <div>
          <label>Talk Title</label>
          {{ form.talk_title }}
          {% if form.talk_title.errors %}<div class="err">{{ form.talk_title.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Talk Number</label>
          {{ form.talk_number }}
          {% if form.talk_number.errors %}<div class="err">{{ form.talk_number.errors|striptags }}</div>{% endif %}
        </div>
      </div>

      <div class="form-row two">
        <div>
          <label>Code</label>
          {{ form.entry_code }}
          {% if form.entry_code.errors %}<div class="err">{{ form.entry_code.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Dates</label>
          <div class="two">
            {{ form.date_added }} {{ form.date_edited }}
          </div>
          {% if form.date_added.errors %}<div class="err">{{ form.date_added.errors|striptags }}</div>{% endif %}
          {% if form.date_edited.errors %}<div class="err">{{ form.date_edited.errors|striptags }}</div>{% endif %}
        </div>
      </div>
    </div>

    <div class="result-toolbar" style="margin-top:18px;">
      <div class="rt-left">
        <a class="btn" href="{% url 'entry_view' entry.id %}">← Back to Entry</a>
      </div>
      <div class="rt-right">
        <a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">Cancel</a>
        <button class="btn btn-primary" type="submit">Save</button>
      </div>
    </div>
  </form>
</div>

<!-- Same talk-title autofill behavior as entry_add -->
<script>
(function () {
  const talksUrl = "{% static 'talks.json' %}";

  function wireAutofill(talkMap) {
    const numberEl = document.getElementById("id_talk_number");
    const titleEl  = document.getElementById("id_talk_title");
    if (!numberEl || !titleEl) return;

    let userTyped = false;
    titleEl.addEventListener("input", () => {
      userTyped = titleEl.value.trim().length > 0;
      if (!userTyped) titleEl.dataset.autofilled = "0";
    });

    function maybeAutofill() {
      const n = numberEl.value;
      const mapped = talkMap && talkMap[n] ? talkMap[n] : "";
      if (!userTyped) {
        if (mapped) {
          titleEl.value = mapped;
          titleEl.dataset.autofilled = "1";
        } else if (titleEl.dataset.autofilled === "1") {
          titleEl.value = "";
          titleEl.dataset.autofilled = "0";
        }
      }
    }

    numberEl.addEventListener("change", maybeAutofill);

    // Initial fill: if empty, we allow autofill; if not, respect user content.
    if (titleEl.value.trim() === "") {
      userTyped = false;
      maybeAutofill();
    } else {
      userTyped = true;
    }
  }

  fetch(talksUrl, {cache: "no-store"})
    .then(r => r.ok ? r.json() : {})
    .then(map => wireAutofill(map))
    .catch(() => wireAutofill({}));
})();
</script>
{% endblock %}