Illustrations/web/templates/entry_view.html

{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}

{% block content %}
<div class="result-wrap">

  <!-- Top bar: back + counter + clear Prev/Next -->
  <div class="result-toolbar">
    <div class="rt-left">
      <a class="btn btn-secondary" href="{% url 'search' %}">← Back to Search</a>
      {% if count %}
        <span class="rt-count">{{ position }} of {{ count }}</span>
      {% endif %}
    </div>
    <div class="rt-right">
      <form method="get" action="{% url 'nav_prev' %}" class="inline">
        <input type="hidden" name="i" value="{{ position|add:'-1' }}">
        <button class="btn btn-lg" {% if position <= 1 %}disabled{% endif %}>‹ Prev</button>
      </form>
      <form method="get" action="{% url 'nav_next' %}" class="inline">
        <input type="hidden" name="i" value="{{ position|add:'-1' }}">
        <button class="btn btn-lg btn-primary" {% if position >= count %}disabled{% endif %}>Next ›</button>
      </form>

      {% if user.is_authenticated and user.is_staff %}
        <a class="btn btn-outline" href="{% url 'entry_edit' entry.id %}">Unlock / Edit</a>
        <a class="btn btn-danger" href="{% url 'entry_delete' entry.id %}">Delete</a>
      {% endif %}
    </div>
  </div>

  <!-- Main card -->
  <div class="result-card">
    <!-- SUBJECT pills (WOL-linked) -->
    <div class="subject-pills">
      {% if subject_list %}
        {% for s in subject_list %}
          <a
            class="chip chip-subject"
            href="https://wol.jw.org/en/wol/s/r1/lp-e?q={{ s }}"
            target="_blank" rel="noopener noreferrer"
            title="Search WOL for {{ s }}"
          >{{ s }}</a>
        {% endfor %}
      {% else %}
        <span class="chip chip-muted">(no subject)</span>
      {% endif %}
    </div>

    <!-- ILLUSTRATION -->
    <div class="section">
      <div class="section-label">Illustration</div>
      <div class="section-body lead-text">
        {{ entry.illustration|linebreaksbr|default:"—" }}
      </div>
    </div>

    <!-- APPLICATION -->
    <div class="section">
      <div class="section-label">Application</div>
      <div class="section-body lead-text">
        {{ entry.application|linebreaksbr|default:"—" }}
      </div>
    </div>

    <!-- Meta (smaller) -->
    <div class="meta-grid">
      <div class="meta-item">
        <div class="meta-label">Source</div>
        <div class="meta-value">
          {% if entry.source %}
            <a class="chip chip-link"
               href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ entry.source|urlencode }}"
               target="_blank" rel="noopener noreferrer">
              {{ entry.source }}
            </a>
          {% else %}—{% endif %}
        </div>
      </div>

      <div class="meta-item">
        <div class="meta-label">Scripture</div>
        <div class="meta-value">
          {% if scripture_list %}
            {% for sc in scripture_list %}
              <a class="chip chip-link"
                 href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ sc|urlencode }}"
                 target="_blank" rel="noopener noreferrer">
                {{ sc }}
              </a>
            {% endfor %}
          {% else %}—{% endif %}
        </div>
      </div>

      <div class="meta-item">
        <div class="meta-label">Code</div>
        <div class="meta-value">{{ entry.entry_code|default:"—" }}</div>
      </div>

      <div class="meta-item">
        <div class="meta-label">Talk</div>
        <div class="meta-value">
          {% if entry.talk_title %}{{ entry.talk_title }}{% else %}—{% endif %}
          {% if entry.talk_number %}<span class="chip chip-muted">#{{ entry.talk_number }}</span>{% endif %}
        </div>
      </div>

      <div class="meta-item">
        <div class="meta-label">Dates</div>
        <div class="meta-value small">
          {% if entry.date_added %}Added: {{ entry.date_added }}{% else %}Added: —{% endif %}
          {% if entry.date_edited %} • Edited: {{ entry.date_edited }}{% endif %}
        </div>
      </div>
    </div>
  </div>

</div>

<style>
  .subject-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
  }
  .chip-subject {
    font-weight: 700;
    font-size: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef5fc;
    border: 1px solid #d7e6f7;
    color: #0f172a;
    text-decoration: none;
    text-transform: capitalize;
  }
  .chip-subject:hover {
    background: #e2effc;
    border-color: #c9def5;
  }
</style>
{% endblock %}