{% extends "base.html" %}
{% from "_macros.html" import status_pill, media_pill, cover_url, loan_pill %}
{% block title %}{{ work.title }} — {{ library_name() }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/ui/catalog">Catalog</a></li>
    <li>{{ work.title }}</li>
  </ul>
</nav>

<div class="work-header">
  <div class="cover-thumb cover-thumb-lg" aria-hidden="true">
    {% if work.cover_image_url %}
    <img src="{{ cover_url(work.cover_image_url, work.updated_at) }}" alt="" loading="lazy">
    {% endif %}
  </div>
  <div class="work-header-text">
    <hgroup>
      <h2>{{ work.title }}</h2>
      {% if work.subtitle %}<p>{{ work.subtitle }}</p>{% endif %}
    </hgroup>
    {% if work.creators %}
    <p class="work-detail-byline">
      {% for wc in work.creators %}{{ wc.creator.display_name }}{% if not loop.last %}, {% endif %}{% endfor %}
    </p>
    {% endif %}
  </div>
</div>

{% if message %}<p class="success-banner">{{ message }}</p>{% endif %}
{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}
{% if all_withdrawn %}<p class="warning-banner">All copies of this title have been withdrawn and it is no longer available to borrow.</p>{% endif %}

{% if has_permission(user, 'work.edit') %}
<p>
  <a href="/ui/catalog/{{ work.id }}/edit" role="button" class="outline"><span class="btn-icon" aria-hidden="true">✏</span>Edit work</a>
  <a href="/ui/catalog/{{ work.id }}/creators" role="button" class="outline"><span class="btn-icon" aria-hidden="true">👥</span>Manage creators</a>
</p>
{% endif %}
{% if has_permission(user, 'curatedlist.manage') %}
{# Librarians navigate to the list admin to add this work. A full inline
   list-picker widget would require a new route; this is the pragmatic v1 choice. #}
<p>
  <a href="/ui/curated-lists" class="outline secondary" role="button" style="width:auto">Manage curated lists</a>
</p>
{% endif %}

<hr class="work-detail-rule">

<section class="work-detail-body">
  <div class="work-detail-narrative">
    {% if work.description %}
    <p class="work-detail-description">{{ work.description }}</p>
    {% endif %}
    {% if work.extra_metadata and work.extra_metadata.get('tagline') %}
    <h3>Tagline</h3>
    <p><em>{{ work.extra_metadata['tagline'] }}</em></p>
    {% endif %}
    {% if work.extra_metadata and work.extra_metadata.get('cast') %}
    <h3>Cast</h3>
    <p>{{ work.extra_metadata['cast'] | join(", ") }}</p>
    {% endif %}
    {% if work.extra_metadata and work.extra_metadata.get('tracks') %}
    <h3>Tracklist</h3>
    <ol class="tracklist">
      {% for track in work.extra_metadata['tracks'] %}
      <li>
        {{ track['title'] }}
        {% if track['length_ms'] %}
        {% set s = track['length_ms'] // 1000 %}
        <small class="track-duration">{{ s // 60 }}:{{ "0" if s % 60 < 10 else "" }}{{ s % 60 }}</small>
        {% endif %}
      </li>
      {% endfor %}
    </ol>
    {% endif %}
  </div>
  <div class="work-detail-meta">
    <dl>
      {% if work.creators %}
      <dt>Creator(s)</dt>
      <dd>{% for wc in work.creators %}{{ wc.creator.display_name }} ({{ wc.role }}){% if not loop.last %}, {% endif %}{% endfor %}</dd>
      {% endif %}
      <dt>Type</dt><dd>{{ media_pill(work.media_type) }}</dd>
      {% if work.publisher %}<dt>Publisher</dt><dd>{{ work.publisher }}</dd>{% endif %}
      {% if work.publication_year %}<dt>Year</dt><dd>{{ work.publication_year }}</dd>{% endif %}
      {% if work.isbn %}<dt>ISBN</dt><dd><code class="identifier">{{ work.isbn }}</code></dd>{% endif %}
      {% if work.upc %}<dt>UPC</dt><dd><code class="identifier">{{ work.upc }}</code></dd>{% endif %}
      {% if work.classification_code %}<dt>Classification</dt><dd><span class="call-number">{{ work.classification_scheme | upper }}: {{ work.classification_code }}</span></dd>{% endif %}
      {% if work.extra_metadata and work.extra_metadata.get('format') %}<dt>Format</dt><dd>{{ work.extra_metadata['format'] }}</dd>{% endif %}
      {% if work.extra_metadata and work.extra_metadata.get('runtime_minutes') %}<dt>Runtime</dt><dd>{{ work.extra_metadata['runtime_minutes'] }} min</dd>{% endif %}
      {% if work.extra_metadata and work.extra_metadata.get('genres') %}<dt>Genres</dt><dd>{{ work.extra_metadata['genres'] | join(", ") }}</dd>{% endif %}
    </dl>
  </div>
</section>

<div class="copies-card">
  <div class="copies-card-head">
    <h3>Copies</h3>
    {% if user and ("*" in user.role.permissions or "item.create" in user.role.permissions) %}
    <a href="/ui/items/new?work_id={{ work.id }}" role="button" class="outline secondary" style="padding:0.2rem 0.6rem;font-size:0.85rem">+ Add copy</a>
    {% endif %}
  </div>
  {% if work.items %}
  <table class="responsive-table">
    <thead><tr><th>Barcode</th><th>Branch</th><th>Status</th><th>Call #</th></tr></thead>
    <tbody>
      {% for item in work.items %}
      <tr>
        <td data-label="Barcode"><a href="/ui/items/{{ item.barcode }}"><code>{{ item.barcode }}</code></a></td>
        <td data-label="Branch">{{ item.branch.name }}</td>
        <td data-label="Status">
          {{ status_pill(item.status) }}
          {{ loan_pill(item) }}
          {% if item.status == "checked_out" and item_due.get(item.id) %}
          <br><small style="color:var(--pico-muted-color)">due {{ item_due[item.id].strftime("%Y-%m-%d") }}</small>
          {% endif %}
        </td>
        <td data-label="Call #"><span class="call-number">{{ item.call_number or "—" }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p class="empty-inline">No copies on record.</p>
  {% endif %}
</div>

{% if not has_loanable %}
<p class="empty-inline" style="margin-top:1rem">No loanable copies of this work are available — holds are disabled.</p>
{% else %}
  {% if patron %}
  <div class="hold-cta">
    <p class="hold-cta-title">Reserve this work</p>
    <div id="hold-action">
      <form
        hx-post="/ui/catalog/{{ work.id }}/hold"
        hx-target="#hold-action"
        hx-swap="innerHTML"
        hx-include="[name='csrf_token']"
        hx-indicator="#hold-ind"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" style="width:auto">Place Hold</button>
        <span id="hold-ind" class="htmx-indicator" aria-label="Placing hold…"></span>
      </form>
    </div>
  </div>
  {% elif user %}
    <p class="empty-inline" style="margin-top:1rem">Your account has no patron record — contact a librarian to place holds.</p>
  {% else %}
    <p style="margin-top:1rem"><a href="/ui/login?next=/ui/catalog/{{ work.id }}">Log in</a> to place a hold.</p>
  {% endif %}

  {% if has_permission(user, 'hold.place.any') %}
  <hr>
  <div id="hold-for-action">
    <form
      hx-post="/ui/catalog/{{ work.id }}/hold-for"
      hx-target="#hold-for-action"
      hx-swap="innerHTML"
      hx-include="[name='csrf_token']"
      hx-indicator="#hold-for-ind"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label for="hold-for-card">Place hold for patron <span id="hold-for-ind" class="htmx-indicator" aria-label="Placing hold…"></span></label>
      <fieldset role="group">
        <input type="text" id="hold-for-card" name="card_number" placeholder="Library card number" required>
        <button type="button" class="outline secondary" data-scan-target="hold-for-card">Scan</button>
        <button type="submit">Place Hold</button>
      </fieldset>
    </form>
  </div>
  {% include "_partials/scanner_dialog.html" %}
  {% endif %}
{% endif %}

{% if has_permission(user, 'hold.view.any') %}
<hr>
<h3>Hold queue</h3>
{% if queue %}
<table class="responsive-table">
  <thead>
    <tr><th>#</th><th>Patron</th><th>Placed</th><th>Status</th><th>Suspended</th></tr>
  </thead>
  <tbody>
    {% for h in queue %}
    <tr>
      <td data-label="#">{{ loop.index }}</td>
      <td data-label="Patron">
        <a href="/ui/patrons/{{ h.patron.library_card_number }}">{{ h.patron.full_name }}</a>
        <br><small><code>{{ h.patron.library_card_number }}</code></small>
      </td>
      <td data-label="Placed"><small>{{ h.placed_at.strftime("%Y-%m-%d") }}</small></td>
      <td data-label="Status">{{ status_pill(h.status) }}</td>
      <td data-label="Suspended"><small>{% if h.suspended_until %}Until {{ h.suspended_until.isoformat() }}{% else %}—{% endif %}</small></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<p class="empty-inline">No active holds.</p>
{% endif %}
{% endif %}

{% if work.external_ids and work.external_ids.get('tmdb') %}
<hr>
<p style="font-size:0.8rem; color:var(--pico-muted-color)">
  Film data provided by TMDb.
  This product uses the TMDB API but is not endorsed or certified by TMDB.
</p>
{% endif %}
{% endblock %}

{% block scripts %}
{% if has_permission(user, 'hold.place.any') %}
{% include "_partials/scanner_scripts.html" %}
{% endif %}
{% endblock %}