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

{% block content %}
<div class="entry-view">

  <!-- SUBJECT PILLS -->
  <div class="section" style="margin-top:0;">
    <div class="subject-chip-row" style="display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;">
      {% 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"
            title="Search WOL for {{ s }}"
          >{{ s }}</a>
        {% endfor %}
      {% else %}
        <span class="chip chip-muted">(no subject)</span>
      {% endif %}
    </div>
  </div>

  <!-- SCRIPTURES -->
  {% if scripture_list %}
    <div class="section scripture-links" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;">
      {% for sc in scripture_list %}
        <a
          class="chip chip-link"
          href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ sc }}"
          target="_blank" rel="noopener"
          title="Search WOL for {{ sc }}"
        >{{ sc }}</a>
      {% endfor %}
    </div>
  {% endif %}

  <!-- Illustration -->
  {% if entry.illustration %}
    <div class="section">
      <h2>Illustration</h2>
      <p>{{ entry.illustration|linebreaksbr }}</p>
    </div>
  {% endif %}

  <!-- Application -->
  {% if entry.application %}
    <div class="section">
      <h2>Application</h2>
      <p>{{ entry.application|linebreaksbr }}</p>
    </div>
  {% endif %}

  <!-- Source -->
  {% if entry.source %}
    <div class="section">
      <h2>Source</h2>
      <p>{{ entry.source }}</p>
    </div>
  {% endif %}

  <!-- Talk Info -->
  {% if entry.talk_number or entry.talk_title %}
    <div class="section">
      <h2>Talk Info</h2>
      {% if entry.talk_number %}
        <p><strong>Number:</strong> {{ entry.talk_number }}</p>
      {% endif %}
      {% if entry.talk_title %}
        <p><strong>Title:</strong> {{ entry.talk_title }}</p>
      {% endif %}
    </div>
  {% endif %}

  <!-- Navigation Buttons -->
  <div class="nav-buttons" style="margin-top: 20px; display:flex;gap:10px;flex-wrap:wrap;">
    <a class="btn btn-secondary" href="{% url 'nav_prev' %}?i={{ position|add:'-1' }}">Previous</a>
    <a class="btn btn-secondary" href="{% url 'nav_next' %}?i={{ position|add:'-1' }}">Next</a>
    {% if user.is_authenticated %}
      <a class="btn btn-primary" href="{% url 'entry_edit' entry.id %}">Edit</a>
      {% if user.is_staff %}
        <a class="btn btn-danger" href="{% url 'entry_delete' entry.id %}">Delete</a>
      {% endif %}
    {% endif %}
  </div>

</div>

<style>
  .chip-subject {
    font-weight: bold;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eef2f7;
    border: 1px solid #d1d5db;
    color: #1f2937;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s;
  }
  .chip-subject:hover {
    background: #dbeafe;
    border-color: #93c5fd;
  }
  .chip {
    padding: 4px 10px;
    border-radius: 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
  }
  .chip-link:hover {
    background: #e5e7eb;
    border-color: #cbd5e1;
  }
  .section h2 {
    margin-bottom: 6px;
  }
</style>
{% endblock %}