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

{% block title %}<title>{{ catalog.title }} | Download PDF</title>{% endblock %}

{% block meta %}
<meta name="description" content="{{ catalog.lead }} Free PDF download of TUPY Brazil fittings literature from the exclusive TUPY distributor in the Middle East.">
<meta name="keywords" content="{{ catalog.keywords }}">
<meta property="og:type" content="article">
<meta property="og:title" content="{{ catalog.title }} | Download PDF">
<meta property="og:description" content="{{ catalog.lead }}">
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/cover.png' %}">
<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": "Download Centre", "item": "{{ request.scheme }}://{{ request.get_host }}/catalogs" },
    { "@type": "ListItem", "position": 3, "name": "{{ catalog.title|escapejs }}" }
  ] }
</script>
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "DigitalDocument",
  "name": "{{ catalog.title|escapejs }}",
  "description": "{{ catalog.lead|escapejs }}",
  "inLanguage": "en",
  "encodingFormat": "application/pdf",
{% if catalog.url %}  "url": "{{ request.scheme }}://{{ request.get_host }}{{ catalog.url }}",{% endif %}
  "about": { "@type": "Brand", "name": "TUPY" },
  "publisher": { "@type": "Organization", "name": "TUPY Pipe Fittings Middle East", "url": "{{ request.scheme }}://{{ request.get_host }}/" },
  "isAccessibleForFree": true }
</script>
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "How do I download the {{ catalog.title|escapejs }}?",
      "acceptedAnswer": { "@type": "Answer", "text": "Use the Download PDF button on this page. The file is free and needs no registration." } },
    { "@type": "Question", "name": "What is in this file?",
      "acceptedAnswer": { "@type": "Answer", "text": "{{ catalog.lead|escapejs }}" } },
    { "@type": "Question", "name": "How do I get a price for these fittings?",
      "acceptedAnswer": { "@type": "Answer", "text": "Prices are not published on this site. Send the figure numbers and sizes you need to our Dubai office through the request a quote page and we will come back with a quotation, stock position and lead time." } }
  ] }
</script>
{% endblock %}

{% block content %}
<style>
.ct{max-width:1200px;margin:0 auto;padding:0 20px;direction:ltr}
.ct-crumb{font-size:14px;color:#c8d8ea;padding-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.ct-crumb a{color:#c8d8ea;text-decoration:none}.ct-crumb a:hover{color:#6ecff6}.ct-crumb .cur{color:#6ecff6}.ct-crumb .sep{color:#4a5a6e}
.ct-head{padding:30px 0 6px}
.ct-h1{font-size:38px;line-height:1.3;color:#fff;margin:0 0 16px}
.ct-lead{font-size:17px;line-height:2.1;color:#c8d8ea;margin:0;max-width:820px;text-align:left}
.ct-rule{height:1px;background:#173059;margin:26px 0}
.ct-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:70px}
.ct-card{background:#061b3e;border:1px solid #1d3c68;border-radius:22px;padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.ct-card:before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--c)}
.ct-card:hover{border-color:var(--c);transform:translateY(-3px)}
.ct-name{font-size:21px;color:#fff;margin:0 0 10px}
.ct-desc{font-size:14.5px;line-height:2;color:#8fa3b8;margin:0 0 18px;flex:1 1 auto;text-align:left}
.ct-acts{display:flex;gap:10px;flex-wrap:wrap}
.ct-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:8px;font-size:14.5px;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease}
.ct-btn.dl{background:var(--c);color:#041430;font-weight:700}
.ct-btn.dl:hover{filter:brightness(1.1)}
.ct-btn.more{border:1px solid #24446c;color:#c8d8ea}
.ct-btn.more:hover{border-color:var(--c);color:#fff}
.ct-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.ct-list li{position:relative;padding-left:20px;color:#c8d8ea;font-size:15px;line-height:2}
.ct-list li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;background:var(--c)}
.ct-panel{background:#061b3e;border:1px solid #1d3c68;border-radius:24px;padding:30px;margin-bottom:24px}
.ct-meta{display:flex;gap:26px;flex-wrap:wrap;color:#8fa3b8;font-size:14px;margin-top:6px}
.ct-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ct-rel a{display:block;background:#061b3e;border:1px solid #1d3c68;border-radius:16px;padding:16px 18px;color:#c8d8ea;text-decoration:none;font-size:14.5px;transition:border-color .2s ease,color .2s ease}
.ct-rel a:hover{border-color:#6ecff6;color:#fff}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}.ct-rel{grid-template-columns:1fr}.ct-h1{font-size:28px}}
</style>
<div class="ct" style="--c:{{ catalog.color }}">
  <div class="ct-crumb font-YekanRegular"><a href="/">Home</a><span class="sep">/</span><a href="/catalogs">Download Centre</a><span class="sep">/</span><span class="cur">{{ catalog.short }}</span></div>
  <div class="ct-head">
    <h1 class="ct-h1 font-YekanExtraBold">{{ catalog.title }}</h1>
    <p class="ct-lead font-YekanRegular">{{ catalog.lead }}</p>
    <div class="ct-meta font-YekanRegular"><span>Format: PDF</span><span>Language: English</span><span>Free download</span></div>
  </div>
  <div class="ct-rule"></div>

  <div class="ct-panel" data-anim="up" style="--c:{{ catalog.color }}">
    <h2 class="ct-name font-YekanExtraBold">What is in this file?</h2>
    <ul class="ct-list font-YekanRegular">
      {% for b in catalog.bullets %}<li>{{ b }}</li>{% endfor %}
    </ul>
    <div class="ct-acts font-YekanRegular">
      {% if catalog.url %}<a class="ct-btn dl" href="{{ catalog.url }}" download>Download {{ catalog.short }} (PDF)</a>{% endif %}
      <a class="ct-btn more" href="/products#fittings">Browse all fittings</a>
    </div>
  </div>

  <div class="ct-panel" data-anim="up">
    <h2 class="ct-name font-YekanExtraBold">Frequently asked questions</h2>
    <div class="fx-faq font-YekanRegular">
      <details class="fx-q"><summary>How do I download the {{ catalog.title }}?</summary><p>Use the Download PDF button on this page. The file is free and needs no registration.</p></details>
      <details class="fx-q"><summary>What is in this file?</summary><p>{{ catalog.lead }}</p></details>
      <details class="fx-q"><summary>How do I get a price for these fittings?</summary><p>Prices are not published on this site. Send the figure numbers and sizes you need to our Dubai office from the <a href="/request-a-quote" style="color:#6ecff6">request a quote</a> page and we will come back with a quotation, stock position and lead time.</p></details>
    </div>
  </div>

  <!-- Prices are intentionally not shown on the English site.
       /catalogs/price-list on the Persian site printed every fitting's rial
       price here, size by size, in galvanised and black columns, from the
       `price_lines` context variable (FittingPrice via home.views.CatalogDetail).
       The whole block is kept below inside a {% templatetag openblock %} comment {% templatetag closeblock %} so the structure
       stays readable, and this quote call-to-action stands in its place. The
       view still builds `price_lines`; nothing renders it. -->
  <div class="quote-cta">
    <div class="quote-cta__text">
      <p class="quote-cta__title">Need pricing for these fittings?</p>
      <p class="quote-cta__sub">Send us the figures and sizes you need and our Dubai
        office will come back with a quotation, stock position and lead time.</p>
    </div>
    <a class="quote-cta__btn" href="/request-a-quote">
      Request a quote
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
           stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h14"/><path d="M13 6l6 6-6 6"/></svg>
    </a>
  </div>

{% comment %}
{% if price_lines %}
<style>
.pl-wrap{max-width:1200px;margin:0 auto;padding:0 0 10px;direction:ltr}
.pl-h2{font-size:26px;color:#fff;margin:10px 0 8px}
.pl-sub{color:#8fa3b8;font-size:14.5px;margin-bottom:20px}
.pl-card{background:#061b3e;border:1px solid #1d3c68;border-radius:14px;padding:18px 18px 8px;margin-bottom:18px}
.pl-card h3{font-size:18px;color:#fff;margin:0 0 4px}
.pl-card h3 a{color:#6ecff6;text-decoration:none;font-size:14px;margin-left:8px}
.pl-fig{color:#8fa3b8;font-size:13.5px;margin-bottom:12px}
.pl-t{width:100%;border-collapse:collapse;font-size:15px}
.pl-t th{color:#8fa3b8;font-weight:normal;text-align:left;padding:7px 6px;border-bottom:1px solid #1d3c68;font-size:13.5px}
.pl-t td{color:#e6eefb;padding:7px 6px;border-bottom:1px solid #12294d}
.pl-note{color:#8fa3b8;font-size:13.5px;margin:10px 0 40px}
</style>
<div class="pl-wrap">
  <h2 class="pl-h2">Price list{% if price_date %} — {{ price_date }}{% endif %}</h2>
  <p class="pl-sub">Price per fitting, by figure and size. Click a fitting name for its technical specification.</p>
  {% for line in price_lines %}
  <div class="pl-card">
    <h3>{{ line.f.name }} <a href="{{ line.f.get_absolute_url }}">View technical specification</a></h3>
    <p class="pl-fig">Figure {{ line.f.figure }}{% if line.f.thread %} — {{ line.f.thread }} thread{% endif %}</p>
    <table class="pl-t">
      <thead><tr><th>Size</th><th>Galvanised</th>{% if line.has_black %}<th>Black</th>{% endif %}</tr></thead>
      <tbody>
        {% for p in line.rows %}
        <tr><td>{{ p.size }}</td><td>{% if p.gal_fa %}{{ p.gal_fa }}{% else %}—{% endif %}</td>{% if line.has_black %}<td>{% if p.black_fa %}{{ p.black_fa }}{% else %}—{% endif %}</td>{% endif %}</tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endcomment %}

  <div style="margin-bottom:70px">
    <h2 class="ct-name font-YekanExtraBold" style="margin-bottom:14px">Other files</h2>
    <div class="ct-rel font-YekanRegular">
      {% for o in others %}{% if o.slug != 'price-list' %}<a href="/catalogs/{{ o.slug }}">{{ o.title }}</a>{% endif %}{% endfor %}
    </div>
  </div>
</div>

<style>
.fx-faq{display:flex;flex-direction:column}
.fx-q{border-top:1px solid #0f2547}
.fx-q:first-child{border-top:0}
.fx-q summary{list-style:none;cursor:pointer;color:#fff;font-size:16px;line-height:1.7;padding:18px 34px 18px 0;position:relative}
.fx-q summary::-webkit-details-marker{display:none}
.fx-q summary:hover{color:#6ecff6}
.fx-q summary:after{content:"";position:absolute;right:6px;top:25px;width:9px;height:9px;border-right:1.7px solid #6ecff6;border-bottom:1.7px solid #6ecff6;transform:rotate(45deg)}
.fx-q[open] summary:after{transform:rotate(-135deg);top:29px}
.fx-q p{color:#c8d8ea;font-size:15px;line-height:2.1;margin:0 0 20px;text-align:left}
</style>
{% endblock %}