{% 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">
        <!-- send current zero-based index (position-1); view will subtract 1 -->
        <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">
        <!-- send current zero-based index (position-1); view will add 1 -->
        <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 %}
            {% with s=entry.source|trim %}
            {% with sl=s|lower %}
              {% if
                sl|startswith:"w" or sl|startswith:"wp" or sl|startswith:"ws" or sl|startswith:"g" or
                sl|startswith:"yb" or sl|startswith:"kt" or
                sl|startswith:"km" or sl|startswith:"mwb" or
                sl|startswith:"ap" or sl|startswith:"apf" or sl|startswith:"be" or sl|startswith:"bh" or
                sl|startswith:"br" or sl|startswith:"bt" or sl|startswith:"btg" or sl|startswith:"cf" or
                sl|startswith:"cl" or sl|startswith:"ct" or sl|startswith:"dp" or sl|startswith:"fg" or
                sl|startswith:"fy" or sl|startswith:"gt" or sl|startswith:"hb" or sl|startswith:"im" or
                sl|startswith:"ip" or sl|startswith:"it" or sl|startswith:"jv" or sl|startswith:"ka" or
                sl|startswith:"kj" or sl|startswith:"kl" or sl|startswith:"lf" or sl|startswith:"lff" or
                sl|startswith:"ll" or sl|startswith:"ly" or sl|startswith:"my" or sl|startswith:"od" or
                sl|startswith:"pe" or sl|startswith:"po" or sl|startswith:"pt" or sl|startswith:"rr" or
                sl|startswith:"rs" or sl|startswith:"sg" or sl|startswith:"sh" or sl|startswith:"si" or
                sl|startswith:"td" or sl|startswith:"tp" or sl|startswith:"tr" or sl|startswith:"ts" or
                sl|startswith:"un"
              %}
                <a class="chip chip-link"
                   href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ s|urlencode }}"
                   target="_blank" rel="noopener noreferrer">
                  {{ s }}
                </a>
              {% else %}
                <a class="chip chip-link"
                   href="https://www.google.com/search?q={{ s|urlencode }}"
                   target="_blank" rel="noopener noreferrer">
                  {{ s }}
                </a>
              {% endif %}
            {% endwith %}
            {% endwith %}
          {% 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; /* Capitalize each word */
  }
  .chip-subject:hover{
    background:#e2effc;
    border-color:#c9def5;
  }
</style>
{% endblock %}