movies-diary/crates/adapters/template-askama/templates/movie_detail.html

{% extends "base.html" %}
{% block content %}
<div class="movie-detail">

  {# ── Hero ── #}
  <article class="entry" style="margin-bottom:1.5rem">
    {% if let Some(poster) = movie.poster_path() %}
    <div class="poster"><img src="{{ poster.value()|poster_src }}" alt=""></div>
    {% endif %}
    <div class="entry-body">
      <div class="entry-title">
        {{ movie.title().value() }}
        <span class="year">({{ movie.release_year().value() }})</span>
      </div>
      <div class="movie-meta">
        {% if let Some(dir) = movie.director() %}{{ dir }}{% endif %}
        {% if let Some(p) = profile %}
          {% if let Some(runtime) = p.runtime_minutes %}· {{ runtime }} min{% endif %}
          {% if let Some(lang) = &p.original_language %}· {{ lang|upper }}{% endif %}
        {% endif %}
      </div>
      {% if let Some(p) = profile %}
        {% if !p.genres.is_empty() %}
        <div class="genre-pills">
          {% for g in &p.genres %}<span class="genre-pill">{{ g.name }}</span>{% endfor %}
        </div>
        {% endif %}
        {% if let Some(tagline) = &p.tagline %}{% if !tagline.is_empty() %}
        <div class="movie-tagline">"{{ tagline }}"</div>
        {% endif %}{% endif %}
      {% endif %}
      <div style="margin-top:0.75rem">
        <a href="/reviews/new" class="btn-small">+ Log a review</a>
        {% if ctx.user_id.is_some() %}
        {% if on_watchlist %}
        <form method="post" action="/watchlist/{{ movie.id().value() }}/remove" style="display:inline">
          <input type="hidden" name="redirect_after" value="/movies/{{ movie.id().value() }}">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
          <button type="submit" class="btn-small" style="color:#4aaa77;border-color:rgba(74,170,119,.3)">✓ On watchlist · Remove</button>
        </form>
        {% else %}
        <form method="post" action="/watchlist/add" style="display:inline">
          <input type="hidden" name="movie_id" value="{{ movie.id().value() }}">
          <input type="hidden" name="redirect_after" value="/movies/{{ movie.id().value() }}">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
          <button type="submit" class="btn-small">＋ Want to watch</button>
        </form>
        {% endif %}
        {% endif %}
      </div>
    </div>
  </article>

  {# ── Stats ── #}
  <div class="stats-bar">
    {% if let Some(avg) = stats.avg_rating %}
    <div class="stat-box">
      <div class="stat-value">{{ format!("{:.1}", avg) }}★</div>
      <div class="stat-label">avg rating</div>
    </div>
    {% endif %}
    <div class="stat-box">
      <div class="stat-value">{{ stats.total_count }}</div>
      <div class="stat-label">reviews</div>
    </div>
    {% if stats.federated_count > 0 %}
    <div class="stat-box">
      <div class="stat-value">{{ stats.federated_count }}</div>
      <div class="stat-label">federated</div>
    </div>
    {% endif %}
    <div class="stat-box histogram">
      <div class="stat-label">distribution</div>
      <div class="histogram-row"><span class="hist-label">5★</span><div class="hist-bar-wrap"><div class="hist-bar" style="width:{% if histogram_max > 0 %}{{ stats.rating_histogram[4] * 100 / histogram_max }}{% else %}0{% endif %}%"></div></div><span class="hist-count">{{ stats.rating_histogram[4] }}</span></div>
      <div class="histogram-row"><span class="hist-label">4★</span><div class="hist-bar-wrap"><div class="hist-bar" style="width:{% if histogram_max > 0 %}{{ stats.rating_histogram[3] * 100 / histogram_max }}{% else %}0{% endif %}%"></div></div><span class="hist-count">{{ stats.rating_histogram[3] }}</span></div>
      <div class="histogram-row"><span class="hist-label">3★</span><div class="hist-bar-wrap"><div class="hist-bar" style="width:{% if histogram_max > 0 %}{{ stats.rating_histogram[2] * 100 / histogram_max }}{% else %}0{% endif %}%"></div></div><span class="hist-count">{{ stats.rating_histogram[2] }}</span></div>
      <div class="histogram-row"><span class="hist-label">2★</span><div class="hist-bar-wrap"><div class="hist-bar" style="width:{% if histogram_max > 0 %}{{ stats.rating_histogram[1] * 100 / histogram_max }}{% else %}0{% endif %}%"></div></div><span class="hist-count">{{ stats.rating_histogram[1] }}</span></div>
      <div class="histogram-row"><span class="hist-label">1★</span><div class="hist-bar-wrap"><div class="hist-bar" style="width:{% if histogram_max > 0 %}{{ stats.rating_histogram[0] * 100 / histogram_max }}{% else %}0{% endif %}%"></div></div><span class="hist-count">{{ stats.rating_histogram[0] }}</span></div>
    </div>
  </div>

  {% if let Some(p) = profile %}

    {# ── Overview ── #}
    {% if let Some(overview) = &p.overview %}{% if !overview.is_empty() %}
    <p class="movie-overview">{{ overview }}</p>
    {% endif %}{% endif %}

    {# ── Cast ── #}
    {% if !p.cast.is_empty() %}
    <div class="feed-section-label">CAST</div>
    <div class="cast-strip">
      {% for (i, member) in p.cast.iter().enumerate() %}{% if i < 10 %}
      <div class="cast-card">
        {% if let Some(path) = &member.profile_path %}
        <img src="https://image.tmdb.org/t/p/w185{{ path }}" alt="{{ member.name }}" loading="lazy">
        {% else %}
        <img src="/static/person-placeholder.svg" alt="{{ member.name }}">
        {% endif %}
        <div class="cast-name">{{ member.name }}</div>
        <div class="cast-char">{{ member.character }}</div>
      </div>
      {% endif %}{% endfor %}
    </div>
    {% endif %}

    {# ── Crew ── #}
    {% if !p.crew.is_empty() %}
    <div class="feed-section-label">CREW</div>
    <ul class="crew-list">
      {% for member in &p.crew %}
      {% if member.job == "Screenplay" || member.job == "Story" || member.job == "Original Music Composer" || member.job == "Director of Photography" %}
      <li><span class="crew-role">{{ member.job }}</span>{{ member.name }}</li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}

  {% endif %}

  {# ── Reviews ── #}
  <div class="feed-section-label">REVIEWS</div>
  <div class="diary">
    {% for entry in reviews %}
    <article class="entry review-card {% if ctx.is_current_user(entry.review().user_id().value()) %}review-own{% endif %} {% if entry.review().is_remote() %}review-federated{% endif %}">
      <div class="entry-body">
        <div class="rating">
          {% for filled in entry.review().stars() %}
          <span class="star {% if filled %}filled{% else %}empty{% endif %}">★</span>
          {% endfor %}
        </div>
        {% if let Some(comment) = entry.review().comment() %}
        <div class="comment">{{ comment.value() }}</div>
        {% endif %}
        <div class="feed-meta">
          {% match entry.review().source() %}
          {% when ReviewSource::Remote with { actor_url } %}
          <a href="{{ actor_url }}" class="feed-user" target="_blank" rel="noopener noreferrer">{{ entry.user_display_name() }}</a>
          <span class="feed-time">{{ entry.review().watched_at().format("%b %-d, %Y") }}</span>
          <span class="remote-badge">&#8599; federated</span>
          {% when ReviewSource::Local %}
          {% if ctx.is_current_user(entry.review().user_id().value()) %}
          <span class="feed-user">you</span>
          {% else %}
          <a href="/users/{{ entry.review().user_id().value() }}" class="feed-user">{{ entry.user_display_name() }}</a>
          {% endif %}
          <span class="feed-time">{{ entry.review().watched_at().format("%b %-d, %Y") }}</span>
          {% endmatch %}
        </div>
        {% if ctx.is_current_user(entry.review().user_id().value()) %}
        <form method="post" action="/reviews/{{ entry.review().id().value() }}/delete" class="delete-form">
          <input type="hidden" name="redirect_after" value="/movies/{{ movie.id().value() }}">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
          <button type="submit">Delete</button>
        </form>
        {% endif %}
      </div>
    </article>
    {% else %}
    <p class="empty">No reviews yet.</p>
    {% endfor %}
  </div>

  <nav class="pagination">
    {% if current_offset >= limit %}
    <a href="/movies/{{ movie.id().value() }}?offset={{ current_offset - limit }}&limit={{ limit }}" class="page-nav">&larr; Prev</a>
    {% endif %}
    {% if has_more %}
    <a href="/movies/{{ movie.id().value() }}?offset={{ current_offset + limit }}&limit={{ limit }}" class="page-nav">Next &rarr;</a>
    {% endif %}
  </nav>

</div>
{% endblock %}