Illustrations/web/templates/record.html
2025-08-12 20:50:46 -05:00

102 lines
3.8 KiB
HTML

{% 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 %}