{% extends "base.html" %}
{% block title %}Record - Illustrations DB{% endblock %}
{% block content %}
  <div class="stats" style="margin-bottom:8px;">
    <div>Total: <strong>{{ total }}</strong></div>
    <div>Results: <strong>{{ results_count }}</strong></div>
    <div>Viewing: <strong>{{ position }}</strong> of <strong>{{ results_count|default:1 }}</strong></div>
  </div>

  <div class="panel">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <div class="nav">
        <a class="btn" href="/nav/prev/">&larr; Prev</a>
        <a class="btn" href="/nav/next/">Next &rarr;</a>
      </div>
      <div>
        <button class="btn" id="unlockBtn">Unlock to Edit</button>
        <form method="post" action="/record/{{ entry.id }}/delete/" style="display:inline;" onsubmit="return confirm('Are you sure you want to permanently delete this entry?');">
          {% csrf_token %}
          <button class="btn danger">Delete</button>
        </form>
      </div>
    </div>

    <form id="entryForm" method="post" action="/record/{{ entry.id }}/save/" style="margin-top:14px;">
      {% csrf_token %}
      <div class="row">
        <div>
          <label>Subject</label>
          <input type="text" name="subject" value="{{ entry.subject|default:'' }}" readonly />
        </div>
        <div>
          <label>Scripture</label>
          <input type="text" name="scripture_raw" value="{{ entry.scripture_raw|default:'' }}" readonly />
        </div>
      </div>

      <div style="margin-top:12px;">
        <label>Illustration</label>
        <textarea name="illustration" rows="5" readonly>{{ entry.illustration|default:'' }}</textarea>
      </div>

      <div style="margin-top:12px;">
        <label>Application</label>
        <textarea name="application" rows="5" readonly>{{ entry.application|default:'' }}</textarea>
      </div>

      <div class="row3" style="margin-top:12px;">
        <div>
          <label>Source</label>
          <input type="text" name="source" value="{{ entry.source|default:'' }}" readonly />
        </div>
        <div>
          <label>Talk Number</label>
          <input type="text" name="talk_number" value="{{ entry.talk_number|default:'' }}" readonly />
        </div>
        <div>
          <label>Code</label>
          <input type="text" name="entry_code" value="{{ entry.entry_code|default:'' }}" readonly />
        </div>
      </div>

      <div class="row" style="margin-top:12px;">
        <div>
          <label>Talk Title</label>
          <input type="text" name="talk_title" value="{{ entry.talk_title|default:'' }}" readonly />
        </div>
        <div class="row" style="grid-template-columns: 1fr 1fr; gap:12px;">
          <div>
            <label>Date</label>
            <input type="text" name="date_added" value="{{ entry.date_added|default:'' }}" readonly />
          </div>
          <div>
            <label>Date Edited</label>
            <input type="text" name="date_edited" value="{{ entry.date_edited|default:'' }}" readonly />
          </div>
        </div>
      </div>

      <div style="margin-top:16px; display:flex; gap:10px; justify-content:flex-end;">
        <a class="btn" href="/search/">Back to Search</a>
        <button class="btn primary" id="saveBtn" type="submit" disabled>Save Changes</button>
      </div>
    </form>
  </div>

  <script>
    const unlockBtn = document.getElementById('unlockBtn');
    const form = document.getElementById('entryForm');
    const saveBtn = document.getElementById('saveBtn');
    unlockBtn.addEventListener('click', function(){
      form.querySelectorAll('input, textarea').forEach(el=>{
        if(el.name !== 'csrfmiddlewaretoken'){ el.removeAttribute('readonly'); }
      });
      saveBtn.disabled = false;
      unlockBtn.disabled = true;
      unlockBtn.textContent = 'Unlocked';
    });
  </script>
{% endblock %}