{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <link rel="canonical" href="{{ product.absolute_url(request) }}" />
  <title>{{ product.title }}</title>
  <meta property="og:title" content="{{ product.title }}" />
  <meta name="description" content="{{ product.description|truncate(500) }}">
  <meta property="og:description" content="{{ product.description|truncate(500) }}" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="{{ product.absolute_url(request) }}" />
  <meta property="og:site_name" content="{{ request.shop.name }}" />
  {%- if "thumbnail1" in product.extensions %}
  <meta property="og:image" content="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ product.title }}" />
  <meta name="twitter:description" content="{{ product.description|truncate(500) }}" />
  <meta name="twitter:image" content="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" />
  {%- endif %}

  {# Removed auto-refresh timer - better UX to let download links expire than interrupt reading #}
{%- endblock append_to_head_tag_section -%}


{%- block call_to_action -%}
{% if request.user and request.user.can_edit_shop(request.shop) %}
<a href="{{ product.absolute_edit_url(request) }}" class="product-edit-button mps-button mps-button-small">&#9998; Edit</a>
{% endif %}
{%- endblock call_to_action -%}


{% block content -%}

<section class="two-column{% if request.shop.watch_mode_enabled %} watch-mode{% endif %}" data-signal-product-id="{{ product.id }}" data-signal-shop-id="{{ product.shop_id }}"{% if request.user and request.user.can_edit_shop(request.shop) %} data-signal-is-owner="1"{% endif %}>

{% if request.shop.watch_mode_enabled %}<div class="watch-left" data-watch-product-id="{{ product.id }}"{% if request.user and request.user.can_edit_shop(request.shop) %} data-watch-is-mod="1"{% endif %}>{% endif %}

  <div class="product-images">
    {% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
    {% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
    {% if request.shop.watch_mode_enabled and product.extensions.get("product") in video_extensions %}
      {# Watch mode: direct video render with autoplay #}
      {% set watch_video_url = request.shop_cdn_endpoint ~ "/" ~ product.s3_path ~ "/product" %}
      <div id="watch-media-container"{% if instrumentals_url %} data-instrumentals-url="{{ instrumentals_url }}"{% endif %}{% if vocals_url %} data-vocals-url="{{ vocals_url }}"{% endif %}{% if karaoke_eligible %} data-karaoke-eligible="1"{% endif %}>
        <div class="watch-video-container">
          <video id="watch-video" src="{{ watch_video_url }}" autoplay controls playsinline class="product-main"></video>
          <button class="unmute-overlay">Tap to unmute</button>
        </div>
      </div>
      <div id="watch-countdown" class="watch-countdown js-only" style="display:none">
        <img id="countdown-thumb" class="countdown-thumb" />
        <div class="countdown-text">
          <span id="countdown-title">Up next: ...</span>
          <span id="countdown-number">7</span>
        </div>
        <button id="countdown-play-now" class="mps-button mps-button-blue">Play Now</button>
        <button id="countdown-cancel" class="mps-button">Cancel</button>
      </div>
      <noscript>
        <a href="{{ watch_video_url }}" target="_blank">Open video</a>
      </noscript>
    {% elif request.shop.watch_mode_enabled and product.extensions.get("product") in audio_extensions %}
      {# Watch mode: audio with album art #}
      {% set watch_audio_url = request.shop_cdn_endpoint ~ "/" ~ product.s3_path ~ "/product" %}
      <div id="watch-media-container"{% if instrumentals_url %} data-instrumentals-url="{{ instrumentals_url }}"{% endif %}{% if vocals_url %} data-vocals-url="{{ vocals_url }}"{% endif %}{% if karaoke_eligible %} data-karaoke-eligible="1"{% endif %}>
        <div class="watch-audio-container">
          {% if "thumbnail1" in product.extensions %}
          <img src="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main audio-cover" />
          {% endif %}
          <audio id="watch-audio" src="{{ watch_audio_url }}" autoplay controls></audio>
        </div>
      </div>
      <div id="watch-countdown" class="watch-countdown js-only" style="display:none">
        <img id="countdown-thumb" class="countdown-thumb" />
        <div class="countdown-text">
          <span id="countdown-title">Up next: ...</span>
          <span id="countdown-number">7</span>
        </div>
        <button id="countdown-play-now" class="mps-button mps-button-blue">Play Now</button>
        <button id="countdown-cancel" class="mps-button">Cancel</button>
      </div>
      <noscript>
        <a href="{{ watch_audio_url }}" target="_blank">Listen</a>
      </noscript>
    {% elif "thumbnail1" in product.extensions %}
      {% if product.extensions.get("product") in video_extensions %}
      {# Video: play button overlay, click to play inline #}
      {% set video_url = request.shop_cdn_endpoint ~ "/" ~ product.s3_path ~ "/product" %}
      <div id="video-container-{{ product.id }}" class="video-thumbnail-container" onclick="playInline(this, '{{ video_url }}')">
        <img src="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
        <div class="video-play-overlay"></div>
      </div>
      <noscript>
        <a href="{{ video_url }}" target="_blank">Open video</a>
      </noscript>
      <div class="video-click-to-play">click ▶ to play</div>
      {% else %}
      {# Non-video: click to open in new window #}
      <a target="_blank" href="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/product?ts={{ product.updated_timestamp }}">
        <img src="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
      </a>
      {% endif %}
    {% endif %}
    {% if request.shop.watch_mode_enabled and product.extensions.get("product") not in video_extensions and product.extensions.get("product") not in audio_extensions %}
    {# Countdown overlay for static content (PDFs, images) #}
    <div id="watch-countdown" class="watch-countdown js-only" style="display:none">
      <img id="countdown-thumb" class="countdown-thumb" />
      <div class="countdown-text">
        <span id="countdown-title">Up next: ...</span>
        <span id="countdown-number">7</span>
      </div>
      <button id="countdown-play-now" class="mps-button mps-button-blue">Play Now</button>
      <button id="countdown-cancel" class="mps-button">Cancel</button>
    </div>
    {% endif %}
    <br/>

    <h1>{{ product.title }}<br/><span class="subtitle-text">uploaded to <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
  </div>

  <div class="cinema-content-stack">
  <div class="product-description">
    <br/>

    <b>Description</b>
    <section>{{ product.description_html | safe }}</section>

    <br/>
    <br/>

    {% if product.has_product_file %}
      <b>File Type</b>
      <br/>
      {{ product.get_content_type("product") }} {{ product_size }}
      <br/>
    {% endif %}

    {% if request.shop.show_dates %}
    <div class="product-meta-dates">
      Created {{ product.human_created_timestamp }}{% if product.human_created_timestamp != product.human_updated_timestamp %} · Updated {{ product.human_updated_timestamp }}{% endif %}{% if product.human_view_count %} · <span class="product-view-count">{{ product.human_view_count }}</span>{% endif %}
    </div>
    {% endif %}

    {% set cs = product.checksums.get("product", {}) %}
    {% if cs.get("sha256") or cs.get("md5") %}
    <details class="product-checksums">
      <summary>Checksums</summary>
      <table class="checksum-table">
        {% if cs.get("sha256") %}<tr><td>SHA-256</td><td><code>{{ cs["sha256"] }}</code></td></tr>{% endif %}
        {% if cs.get("md5") %}<tr><td>MD5</td><td><code>{{ cs["md5"] }}</code></td></tr>{% endif %}
      </table>
    </details>
    {% endif %}
  </div>

  <div class="product-comments">
    <br/>
    <br/>

    <!-- Comments Section -->
    {% include 'snippets/comments.j2' %}
  </div>
  </div>

{% if request.shop.watch_mode_enabled %}</div>{% endif %}

  <section class="product-right">
    {% if product.has_product_file %}
    <div class="well">
      {% if signed_get_object_url is not none %}
        <a href="{{ signed_get_object_url }}" class="product-download-button mps-button" target="_blank" download>&#11123 Download</a>
      {% endif %}
      {% if torrent_magnet_link %}
        <a href="{{ torrent_magnet_link }}" class="mps-button" style="margin-left:.5rem">&#9697; Magnet</a>
      {% endif %}
      {% if torrent_file_url %}
        <a href="{{ torrent_file_url }}" class="mps-button" style="margin-left:.5rem" download>&#8615; .torrent</a>
      {% endif %}
    </div>
    {% endif %}
    <div id="watch-queue" class="js-only" style="display:none">
      <h4>Queue</h4>
      <div id="queue-items"></div>
    </div>
    {% include 'snippets/related_content.j2' %}
  </section>

</section>

<script>
// Replace thumbnail with inline video player
function playInline(container, videoUrl) {
  // Create video element
  const video = document.createElement('video');
  video.src = videoUrl;
  video.controls = true;
  video.autoplay = true;
  video.className = 'product-main';
  video.style.maxWidth = '100%';

  // Replace container content with video
  container.innerHTML = '';
  container.onclick = null;
  container.appendChild(video);
}
</script>
{% if request.shop.watch_mode_enabled %}
<script src="/static/js/watch.js"></script>
{% endif %}
<script src="/static/js/signals.js"></script>

{%- endblock -%}
