{% extends '_base.html' %}
{% load static %}

{% block title %}<title>{{ v.title }} | TUPY Pipe Fitting Videos</title>{% endblock %}

{% block meta %}
<meta name="description" content="{{ v.title|truncatechars:55 }} — a TUPY pipe fittings video. {{ v.description|truncatechars:60 }}">
<meta name="keywords" content="TUPY video, pipe fittings video, malleable cast iron fittings, {{ v.title }}">
<meta property="og:type" content="video.other">
<meta property="og:title" content="{{ v.title }} | TUPY Pipe Fitting Videos">
<meta property="og:description" content="{{ v.description }}">
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ v.image.url }}">
<meta property="og:video" content="{{ request.scheme }}://{{ request.get_host }}{{ v.video.url }}">
<meta property="og:video:type" content="video/mp4">
<meta name="twitter:card" content="player">
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "VideoObject",
  "name": "{{ v.title|escapejs }} | TUPY Pipe Fitting Videos",
  "description": "{{ v.description|escapejs }}",
  "thumbnailUrl": ["{{ request.scheme }}://{{ request.get_host }}{{ v.image.url }}"],
  "contentUrl": "{{ request.scheme }}://{{ request.get_host }}{{ v.video.url }}",
  "url": "{{ request.scheme }}://{{ request.get_host }}{{ info.url }}",
  "inLanguage": "en",
{% if info.upload_date %}  "uploadDate": "{{ info.upload_date }}",{% endif %}
{% if info.duration %}  "duration": "{{ info.duration }}",{% endif %}
  "publisher": { "@type": "Organization", "name": "TUPY Pipe Fittings Middle East", "logo": { "@type": "ImageObject", "url": "{{ request.scheme }}://{{ request.get_host }}/media/brand/logo-schema.png" } }
}
</script>
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
    { "@type": "ListItem", "position": 2, "name": "Videos", "item": "{{ request.scheme }}://{{ request.get_host }}/videos" },
    { "@type": "ListItem", "position": 3, "name": "{{ v.title|escapejs }}" }
  ] }
</script>
{% endblock %}

{% block content %}
<style>
.vx{max-width:1000px;margin:0 auto;padding:0 20px 60px;direction:ltr}
.vx-crumb{font-size:14px;color:#c8d8ea;padding-top:120px;display:flex;gap:8px;flex-wrap:wrap}
.vx-crumb a{color:#c8d8ea;text-decoration:none}.vx-crumb a:hover{color:#6ecff6}
.vx h1{font-size:34px;color:#fff;margin:18px 0 10px;line-height:1.5}
.vx-meta{color:#8fa3b8;font-size:14.5px;margin-bottom:22px}
.vx-player{width:100%;height:auto;display:block;border-radius:14px;background:#041430;border:2px solid #1d3c68}
.vx-body{color:#c8d8ea;font-size:16.5px;line-height:2.1;margin-top:24px}
.vx-h2{font-size:22px;color:#fff;margin:34px 0 14px}
.vx-rel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vx-rel a{display:block;border:1px solid #1d3c68;border-radius:12px;padding:14px;text-decoration:none;background:#061b3e}
.vx-rel a:hover{border-color:#6ecff6}
.vx-rel .nm{color:#fff;font-size:15.5px;display:block;margin-bottom:4px}
.vx-rel .dm{color:#8fa3b8;font-size:13px}
@media(max-width:700px){.vx h1{font-size:24px}.vx-rel{grid-template-columns:1fr}}
</style>

<div class="vx">
  <nav class="vx-crumb"><a href="/">Home</a><span>/</span><a href="/videos">Videos</a><span>/</span><span>{{ v.title }}</span></nav>

  <h1>{{ v.title }}</h1>
  <p class="vx-meta">{% if info.mmss %}Duration: {{ info.mmss }} min{% endif %}{% if info.upload_date %} — published {{ info.upload_date }}{% endif %}</p>

  <video class="vx-player" controls preload="metadata" playsinline poster="{{ v.image.url }}">
    <source src="{{ v.video.url }}" type="video/mp4">
    Your browser does not support video playback.
  </video>

  <div class="vx-body">
    <p>{{ v.description }}</p>
    <p>This video is part of the <a href="/videos" style="color:#6ecff6">TUPY video library</a> published by Amini Building Materials Trading L.L.C, exclusive agent of TUPY S.A. in the Middle East. For technical specifications and dimension tables see the <a href="/products" style="color:#6ecff6">products</a> pages or the <a href="/catalogs" style="color:#6ecff6">Download Centre</a>.</p>
  </div>

  {% if others %}
  <h2 class="vx-h2">More TUPY videos</h2>
  <div class="vx-rel">
    {% for o in others %}
    <a href="{{ o.url }}"><span class="nm">{{ o.v.title }}</span>{% if o.mmss %}<span class="dm">{{ o.mmss }} min</span>{% endif %}</a>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endblock %}