{% extends "base.html" %}

{% block seo %}
<meta property="og:title" content="{{content.title}}">
{% if content.description %}
<meta property="og:description" content="{{ content.description | replace(from='"', to="") | truncate(length=100, end="...") }}">
{% else %}
<meta property="og:description" content="{{ content.html | striptags | trim_start_matches(pat=content.title) | truncate(length=100, end="...") }}">
{%- endif %}
{% if content.card_image %}
<meta property="og:image" content="{{url_for(path=content.card_image, abs=true)}}">
{% elif site.card_image %}
<meta property="og:image" content="{{url_for(path=site.card_image, abs=true)}}">
{% endif %}
{% if site.url %}
<meta property="og:url" content="{{url_for(path=content.slug, abs=true)}}.html">
{% endif %}
<meta property="og:type" content="article">
<meta property="og:site_name" content="{{site.name}}">
{% if content.date %}
<meta property="article:published_time" content="{{content.date | date(format=' %+')}}">
{% endif %}
{% if site.url and content.authors %}
<meta property="article:author" content="{{url_for(path='author-' ~ content.authors.0 ~ '.html', abs=true)}}">
{% endif %}

{% include "json_ld_content.html" ignore missing%}
{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css" id="highlightjs-theme" />
{%if content.extra.math %}
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
{% endif %}

{% endblock %}


{% block main %}

{% if content.banner_image %}
<div class="content-banner-image" style="background-image: url({{content.banner_image}});"></div>
{% endif %}

<article class="h-entry">
  <data class="p-name" value="{{ content.title }}"></data>
  <a class="u-url" href="{{url_for(path=content.slug ~ '.html')}}" style="display: none;"></a>
  {% if content.date %}
  <time class="dt-published" datetime="{{ content.date | date(format='%+') }}" style="display: none;">{{ content.date | default_date_format }}</time>
  {% endif %}

  {% if content.stream == "draft" %}
  <div class="draft-warning" style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; margin-bottom: 20px; color: #856404;">
    <strong>⚠️ Draft Post:</strong> This post is a draft and may not be complete yet.
  </div>
  {% endif %}

  {% include "content_title.html" ignore missing %}
  {% if content.series %}
  <div class="content-series">
    <p><small>Published as part of '<a href="{{ url_for(path='series-' ~ content.series ~ '.html') }}">{{ series_display_name(series=content.series) }}</a>' series.</small></p>
  </div>
  {% endif %}
  {% if content.toc %}
  <div class="content-toc">
    <a href="#" id="toc"></a>
    <details>
    <summary>🗒️</summary>
    {{ content.toc }}
    </details>
  </div>
  {% endif %}

  <div class="content-html e-content">{{ content.html }}</div>
  {% if content.date %}
  <footer class="data-tags-footer">

    <div class="content-authors-flex">
      <div class="content-authors-full">
        {% include "content_authors.html" ignore missing %}
      </div>

      <div class="date-tags-container">
        <div class="content-date">
          {% include "content_date.html" ignore missing %}
          {% if content.stream and content.stream != "index" %}
          <div class="content-stream">
            {% set slug = content.stream | trim | slugify %}
            {% set link = slug ~ ".html"%}
            <small><a href="{{url_for(path=link)}}">{{ stream_display_name(stream=content.stream) }}</a></small>
          </div>
          {% endif %}
        </div>

        <ul class="content-tags">
          {% for tag in content.tags %}
          {% set slug = "tag-" ~ tag | trim | slugify %}
          {% set link = slug ~ ".html"%}
          <li><a href="{{url_for(path=link)}}" class="p-category">{{ tag }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </footer>
  {% endif %}
</article>

{% if site.enable_related_content and not content.series %}
{% if content.back_links %}
<article>
  Back-links
  <ul>
    {% for item in content.back_links | slice(end=10) %}
    <li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
    {% endfor %}
  </ul>
</article>
{% endif %}

{% if content.tags %}
  {# Only the first tag for now #}
  {% set tag = content.tags[0] %}
  {% set tag_slug = tag | slugify %}
  {% set related_content = site_data.tag.map[tag_slug] %}
  {% if related_content | length > 1 %}
  <article>
    Related {{tag}} content
    <ul>
      {% for item in related_content | sort(attribute="date") | reverse | slice(end=5) %}
      {% if item.slug == content.slug or item in content.back_links %}
      {% continue %}
      {% endif %}
      <li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
      {% endfor %}
    </ul>
  </article>
  {% endif %}
{% endif %}
{% endif %}

{% if site.show_next_prev_links and (content.previous or content.next) %}
<article>
  <nav style="display: flex; justify-content: space-between;">
    <div>
      {% if content.previous %}<a href="{{url_for(path=content.previous.slug ~ '.html')}}">← {{ content.previous.title }}</a>{% endif %}
    </div>
    <div>
      {% if content.next %}<a href="{{url_for(path=content.next.slug ~ '.html')}}">{{ content.next.title }} →</a>{% endif %}
    </div>
  </nav>
</article>
{% endif %}

{% if comments is defined %}
    <article>{{ comments }}</article>
{% elif site.extra.comments.source is defined and content.date %}
    {%include "comments.html" ignore missing %}
{% endif %}

{% if content.source_path is string and (site.publish_md or site.source_repository) %}
<article>
<div class="content-source">
  {% set source_url = source_link(content=content) %}
  {% if source_url %}
    <a href="{{url_for(path=source_url)}}" rel="nofollow">📄 View source</a>
  {% endif %}
</div>
</article>
{% endif %}


{% endblock %}

{% block tail %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script>
  hljs.highlightAll();
</script>

{%if content.extra.mermaid %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.3.0/mermaid.min.js"></script>
<script>
  var config = {
    startOnLoad: true,
    theme: '{{content.extra.mermaid_theme | default(value="default") }}',
    flowchart: { useMaxWidth: false, htmlLabels: true }
  };
  mermaid.initialize(config);
  window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
{% endif %}
{% endblock %}