{% extends "base.html" %}
{% block title %}{{ pub.topic }} | {{ settings.site_name }}{% endblock %}

{% block content %}

<!-- Single Blog Navy Hero Banner -->
<section class="single-blog-hero">
  <div class="container">
    <a href="{{ url_for('main.publications') }}" class="back-to-blog-link">
      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
      Back to Blog
    </a>
    <h1 class="single-blog-title">{{ pub.topic }}</h1>
    <p class="single-blog-meta">
      {{ pub.created_at.strftime('%B %d, %Y') }}
      {% if pub.author %} &bull; By {{ pub.author }}{% endif %}
    </p>
  </div>
</section>

<!-- Single Blog Article Body Container -->
<section class="section single-blog-section">
  <div class="single-blog-container">
    
    {% if pub.cover_image_path %}
    <div class="single-blog-cover">
      <img src="{{ url_for('static', filename=pub.cover_image_path) }}" alt="{{ pub.topic }}">
    </div>
    {% endif %}

    {% set feature_video = pub.feature_video_url or (pub.feature_video_path and url_for('static', filename=pub.feature_video_path)) %}
    {% if feature_video %}
    <div class="single-blog-video">
      {% set vinfo = feature_video | video_embed %}
      <div class="video-frame">
        {% if vinfo.kind == 'direct' %}
          <video controls src="{{ vinfo.embed_src_controls }}"></video>
        {% else %}
          <iframe src="{{ vinfo.embed_src_controls }}" allow="autoplay; encrypted-media; fullscreen" allowfullscreen></iframe>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {% if pub.description %}
    <div class="single-blog-lead">
      {% for para in pub.description.split('\n') %}
        {% if para.strip() %}
          <p>{{ para.strip() }}</p>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {% if pub.about_description or pub.about_photo_path %}
    <div class="single-blog-about-box">
      {% if pub.about_photo_path %}
        <img src="{{ url_for('static', filename=pub.about_photo_path) }}" alt="About {{ pub.topic }}">
      {% endif %}
      {% if pub.about_description %}
        <div class="about-text">
          <h3>About This Article</h3>
          {% for para in pub.about_description.split('\n') %}
            {% if para.strip() %}<p>{{ para.strip() }}</p>{% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </div>
    {% endif %}

    {% if pub.subtopics %}
    <div class="single-blog-subtopics">
      {% for sub in pub.subtopics %}
      <div class="subtopic-block">
        <div class="subtopic-text">
          {% set lines = sub.description.split('\n') %}
          {% if lines|length > 0 and lines[0].strip() %}
            {% set first_line = lines[0].strip() %}
            {% if lines|length > 1 or (first_line|length < 100 and not first_line.endswith('.')) or (first_line[0:2] in ['1.', '2.', '3.', '4.', '5.', '6.', '7.', '8.', '9.']) %}
              <h4>{{ first_line }}</h4>
              {% for line in lines[1:] %}
                {% if line.strip() %}<p>{{ line.strip() }}</p>{% endif %}
              {% endfor %}
            {% else %}
              {% for line in lines %}
                {% if line.strip() %}<p>{{ line.strip() }}</p>{% endif %}
              {% endfor %}
            {% endif %}
          {% endif %}
        </div>
        {% if sub.photo_path %}
        <div class="subtopic-media">
          <img src="{{ url_for('static', filename=sub.photo_path) }}" alt="Subtopic Image">
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <hr class="single-blog-hr">

    <!-- Share Section (Formatted like Image 2) -->
    <div class="single-blog-share">
      <h4>Share this story</h4>
      <div class="share-buttons-row">
        <!-- Facebook -->
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}" 
           target="_blank" rel="noopener noreferrer" 
           class="social-icon-btn btn-fb" title="Share on Facebook" aria-label="Share on Facebook">
          <svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>
        </a>

        <!-- WhatsApp -->
        <a href="https://wa.me/?text={{ (pub.topic ~ ' - ' ~ request.url)|urlencode }}" 
           target="_blank" rel="noopener noreferrer" 
           class="social-icon-btn btn-wa" title="Share on WhatsApp" aria-label="Share on WhatsApp">
          <svg viewBox="0 0 32 32"><path d="M16 2A13.94 13.94 0 0 0 4.07 23.09L2 30l7.1-1.87A13.95 13.95 0 1 0 16 2zm0 25.5a11.5 11.5 0 0 1-5.87-1.6l-.42-.25-4.36 1.14 1.16-4.25-.28-.44A11.52 11.52 0 1 1 16 27.5zm6.33-8.62c-.35-.17-2.06-1.02-2.38-1.13s-.55-.17-.78.17-.9 1.13-1.1 1.36-.4.26-.75.09a9.5 9.5 0 0 1-2.79-1.72 10.45 10.45 0 0 1-1.93-2.4c-.2-.35-.02-.54.15-.71.16-.16.35-.41.52-.61a2.36 2.36 0 0 0 .35-.58.65.65 0 0 0 0-.61c-.09-.17-.78-1.88-1.07-2.58s-.57-.59-.78-.6h-.67a1.28 1.28 0 0 0-.93.43 3.9 3.9 0 0 0-1.22 2.89c0 1.7 1.24 3.35 1.41 3.58s2.44 3.73 5.92 5.23c.83.36 1.48.57 1.99.73.83.26 1.59.23 2.19.14a3.58 3.58 0 0 0 2.36-1.66 2.92 2.92 0 0 0 .2-1.66c-.08-.18-.34-.35-.69-.52z"/></svg>
        </a>

        <!-- Instagram -->
        <button type="button" onclick="shareToInstagram('{{ request.url }}')" 
                class="social-icon-btn btn-ig" title="Share to Instagram" aria-label="Share to Instagram">
          <svg viewBox="0 0 24 24"><path d="M12 2c2.7 0 3.1 0 4.1.1 1.1 0 1.8.2 2.5.5.7.3 1.2.6 1.7 1.1.5.5.9 1 1.1 1.7.3.7.4 1.4.5 2.5.1 1 .1 1.4.1 4.1s0 3.1-.1 4.1c0 1.1-.2 1.8-.5 2.5-.3.7-.6 1.2-1.1 1.7-.5.5-1 .9-1.7 1.1-.7.3-1.4.4-2.5.5-1 .1-1.4.1-4.1.1s-3.1 0-4.1-.1c-1.1 0-1.8-.2-2.5-.5-.7-.3-1.2-.6-1.7-1.1-.5-.5-.9-1-1.1-1.7-.3-.7-.4-1.4-.5-2.5C2 15.1 2 14.7 2 12s0-3.1.1-4.1c0-1.1.2-1.8.5-2.5.3-.7.6-1.2 1.1-1.7.5-.5 1-.9 1.7-1.1.7-.3 1.4-.4 2.5-.5C8.9 2 9.3 2 12 2zm0 1.8c-2.6 0-3 0-4 .1-.9 0-1.4.2-1.7.3-.4.2-.7.3-1 .6-.3.3-.5.6-.6 1-.1.3-.3.8-.3 1.7-.1 1-.1 1.4-.1 4s0 3 .1 4c0 .9.2 1.4.3 1.7.2.4.3.7.6 1 .3.3.6.5 1 .6.3.1.8.3 1.7.3 1 .1 1.4.1 4 .1s3 0 4-.1c.9 0 1.4-.2 1.7-.3.4-.2.7-.3 1-.6.3-.3.5-.6.6-1 .1-.3.3-.8.3-1.7.1-1 .1-1.4.1-4s0-3-.1-4c0-.9-.2-1.4-.3-1.7-.2-.4-.3-.7-.6-1-.3-.3-.6-.5-1-.6-.3-.1-.8-.3-1.7-.3-1-.1-1.4-.1-4-.1zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm5.2-2.1a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z"/></svg>
        </button>

        <!-- Twitter / X -->
        <a href="https://twitter.com/intent/tweet?text={{ pub.topic|urlencode }}&url={{ request.url }}" 
           target="_blank" rel="noopener noreferrer" 
           class="social-icon-btn btn-tw" title="Share on Twitter/X" aria-label="Share on Twitter/X">
          <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>

        <!-- LinkedIn -->
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.url }}" 
           target="_blank" rel="noopener noreferrer" 
           class="social-icon-btn btn-li" title="Share on LinkedIn" aria-label="Share on LinkedIn">
          <svg viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 10.9v8.37H9.25V10.9H6.46M7.86 6.64a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24z"/></svg>
        </a>

        <!-- Telegram -->
        <a href="https://t.me/share/url?url={{ request.url }}&text={{ pub.topic|urlencode }}" 
           target="_blank" rel="noopener noreferrer" 
           class="social-icon-btn btn-tg" title="Share on Telegram" aria-label="Share on Telegram">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
        </a>

        <!-- Email -->
        <a href="mailto:?subject={{ pub.topic|urlencode }}&body={{ request.url|urlencode }}" 
           class="social-icon-btn btn-email" title="Share via Email" aria-label="Share via Email">
          <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
        </a>

        <!-- Copy Link -->
        <button type="button" onclick="copyBlogLink('{{ request.url }}')" 
                class="social-icon-btn btn-copy" title="Copy Link" aria-label="Copy Link">
          <svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
        </button>

        <!-- Native Share -->
        <button type="button" onclick="triggerNativeShare({{ pub.topic|tojson }}, '{{ request.url }}')" 
                class="social-icon-btn btn-share" title="Share Story" aria-label="Share Story">
          <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 10.07c-.54-.5-1.25-.81-2.04-.81-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
        </button>
      </div>

      <p class="share-tip-note">
        <strong>Tip:</strong> Instagram doesn't allow direct web sharing &mdash; tapping the Instagram icon copies the link and, on mobile, opens the Instagram app so you can paste it straight into a Story or Post. On mobile, the share icon (<svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:middle; fill:currentColor;"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 10.07c-.54-.5-1.25-.81-2.04-.81-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>) opens your device's full share menu with every app you have installed.
      </p>
    </div>

  </div>
</section>

<!-- Toast for link copy -->
<div id="copy-toast" class="copy-toast">Link copied to clipboard!</div>

<script>
function copyBlogLink(url) {
  navigator.clipboard.writeText(url).then(function() {
    showCopyToast("Link copied to clipboard!");
  }).catch(function() {
    var tempInput = document.createElement("input");
    tempInput.value = url;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    showCopyToast("Link copied to clipboard!");
  });
}

function shareToInstagram(url) {
  navigator.clipboard.writeText(url);
  showCopyToast("Link copied! Opening Instagram...");
  setTimeout(function() {
    window.location.href = "instagram://app";
    setTimeout(function() {
      window.open("https://www.instagram.com/", "_blank");
    }, 1200);
  }, 600);
}

function triggerNativeShare(title, url) {
  if (navigator.share) {
    navigator.share({
      title: title,
      url: url
    }).catch(function(err) {});
  } else {
    copyBlogLink(url);
  }
}

function showCopyToast(msg) {
  var toast = document.getElementById("copy-toast");
  if (!toast) return;
  toast.innerText = msg;
  toast.classList.add("show");
  setTimeout(function() {
    toast.classList.remove("show");
  }, 2500);
}
</script>

{% endblock %}