{% extends "base.html" %}
{% block title %}
{{page.title}}
{% endblock title %}

{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"
    integrity="sha512-Oy18vBnbSJkXTndr2n6lDMO5NN31UljR8e/ICzVPrGpSud4Gkckb8yUpqhKuUNoE+o9gAb4O/rAxxw1ojyUVzg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

{{ super() }}

{% if page.extra.uses_katex %}
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [ ['$$','$$'], ['\[','\]'] ]}});
</script>
{% endif %}

<meta property="og:title" content="{{page.title}} - Evan Pratten" />
<meta property="og:type" content="article" />
{% if page.description %}
<meta property="og:description" content="{{page.description}}" />
<meta property="description" content="{{page.description}}" />
{% else %}
<meta property="og:description" content="{{config.description}}" />
<meta property="description" content="{{config.description}}" />
{% endif %}
<meta property="article:published_time" content="{{page.date}}T00:00:00" />

{# Handle auto-centering request #}
{% if page.extra.auto_center_images %}
<style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
{% endif %}

{# Handle flags #}
{% if page.extra.uses_flags %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.4.3/css/flag-icons.min.css"
    integrity="sha512-uvXdJud8WaOlQFjlz9B15Yy2Au/bMAvz79F7Xa6OakCl2jvQPdHD0hb3dEqZRdSwG4/sknePXlE7GiarwA/9Wg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endif %}

{# Handle loading JSONLD #}
{% if page.extra.is_rfc or page.description and page.date %}
<script type="application/ld+json">
    {# Import our template file #}
    {% set template = load_data(path="jsonld_templates/blog_post.jsonld") %}
    {# Now we can fill in any additional data #}
    {{ template | 
        replace(from="{{url}}", to=config.base_url ~ page.path) | 
        replace(from="{{title}}", to=page.title) | 
        replace(from="{{date}}", to=page.date) | 
        replace(from="{{profile_pic}}", to=config.extra.profile_photo) | 
        safe 
    }}
</script>
{% endif %}
{% endblock head %}

{% block profile %}
<div class="row">
    <div class="headshot-container">
        <img src="{{config.extra.profile_photo}}" alt="Headshot" style="height:50px;width:auto;">
    </div>
    <div class="text-container">
        <h1>{{config.extra.name}}</h1>
        <p>
            {{config.extra.profession}}
        </p>
    </div>
</div>
{% endblock profile %}

{% block content %}
<br><br>
<article class="markdown-body">
    {% if page.description %}
    <h1 style="border:none;margin-bottom:0;padding-bottom:0">{{page.title}}</h1>
    <h3 style="margin-top:0;color:gray;padding-bottom:.3em;border-bottom:1px solid #eaecef;">
        <em>
            <span style="color:rgb(186, 186, 186)">/*</span>
            {{page.description}}
            <span style="color:rgb(186, 186, 186)">*/</span>
        </em>
    </h3>
    {% else %}
    <h1>{{page.title}}</h1>
    {% endif %}
    <div style="text-align: justify;">
        {{page.content | safe}}
    </div>

    {# Comments only on blog posts #}
    {% if page.extra.is_rfc or page.description and page.date %}
    <br>
    <hr>
    <script src="https://utteranc.es/client.js" repo="ewpratten/va3zza.com" issue-term="title" label="comment"
        theme="github-light" crossorigin="anonymous" async>
        </script>
    {% endif %}

</article>

{% if page.extra.uses_twitter %}
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
{% endif %}
{% if page.extra.uses_graphviz %}
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
{% endif %}
{% endblock content %}