{% extends "base.html" %}
{% block html_lang %}{{ article.lang }}{% endblock %}

{% block title %}{{ SITENAME|striptags }} - {{ article.title|striptags  }}{% endblock %}

{% block head %}
    {{ super() }}

    {% if article.description %}
        <meta name="description" content="{{article.description}}" />
    {% endif %}

    {% for tag in article.tags %}
        <meta name="tags" content="{{tag}}" />
    {% endfor %}

{% endblock %}

{% block content %}
  <article class="prose dark:prose-dark md:prose-base lg:prose-lg prose-img:rounded hyphens-auto">
    <header>
        <h3 class="text-3xl md:text-5xl">
            {{ article.title }}</a>
            <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-rp-dawn-overlay">#</a>
        </h3>
        <ul class="list-none border-b-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
            <li>
                <span class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
                    </svg>
                    &nbsp;{{ article.stats['read_mins']*1.5|round|int }} min. read
                </span>
                <span class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                        <path d="M10.75 16.82A7.462 7.462 0 0 1 15 15.5c.71 0 1.396.098 2.046.282A.75.75 0 0 0 18 15.06v-11a.75.75 0 0 0-.546-.721A9.006 9.006 0 0 0 15 3a8.963 8.963 0 0 0-4.25 1.065V16.82ZM9.25 4.065A8.963 8.963 0 0 0 5 3c-.85 0-1.673.118-2.454.339A.75.75 0 0 0 2 4.06v11a.75.75 0 0 0 .954.721A7.506 7.506 0 0 1 5 15.5c1.579 0 3.042.487 4.25 1.32V4.065Z" />
                    </svg>
                    &nbsp;<a href="https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests" target="_blank">Flesch-Kincaid reading ease</a>:&nbsp;<abbr title="0-30: very hard, 30-50: hard, 50-70: moderate-medium, 70-100: simple">{{ article.stats['fi']|int }}</abbr>
                </span>
            </li>
            <li>
                <time class="flex items-center" datetime="{{ article.date.isoformat() }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                        <title>Publication date</title>
                        <path fill-rule="evenodd" d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z" clip-rule="evenodd" />
                    </svg>
                    &nbsp;{{ article.locale_date }}
                </time>
            {% if article.modified %}
                <time class="flex items-center" datetime="{{ article.modified.isoformat() }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                        <title>Modification date</title>
                        <path fill-rule="evenodd" d="M10 4.5c1.215 0 2.417.055 3.604.162a.68.68 0 0 1 .615.597c.124 1.038.208 2.088.25 3.15l-1.689-1.69a.75.75 0 0 0-1.06 1.061l2.999 3a.75.75 0 0 0 1.06 0l3.001-3a.75.75 0 1 0-1.06-1.06l-1.748 1.747a41.31 41.31 0 0 0-.264-3.386 2.18 2.18 0 0 0-1.97-1.913 41.512 41.512 0 0 0-7.477 0 2.18 2.18 0 0 0-1.969 1.913 41.16 41.16 0 0 0-.16 1.61.75.75 0 1 0 1.495.12c.041-.52.093-1.038.154-1.552a.68.68 0 0 1 .615-.597A40.012 40.012 0 0 1 10 4.5ZM5.281 9.22a.75.75 0 0 0-1.06 0l-3.001 3a.75.75 0 1 0 1.06 1.06l1.748-1.747c.042 1.141.13 2.27.264 3.386a2.18 2.18 0 0 0 1.97 1.913 41.533 41.533 0 0 0 7.477 0 2.18 2.18 0 0 0 1.969-1.913c.064-.534.117-1.071.16-1.61a.75.75 0 1 0-1.495-.12c-.041.52-.093 1.037-.154 1.552a.68.68 0 0 1-.615.597 40.013 40.013 0 0 1-7.208 0 .68.68 0 0 1-.615-.597 39.785 39.785 0 0 1-.25-3.15l1.689 1.69a.75.75 0 0 0 1.06-1.061l-2.999-3Z" clip-rule="evenodd" />
                    </svg>
                    &nbsp;{{ article.locale_modified }}
                </time>
            {% endif %}
            </li>
        </ul>

        {% if article.series %}
            <div class="m-10 pl-4 bg-rp-dawn-overlay text-rp-dawn-text dark:bg-rp-moon-surface dark:text-rp-moon-text">
                <p>This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:
                <ol class="parts">
                    {% for part_article in article.series.all %}
                        <li {% if part_article == article %}class="active"{% endif %}>
                            <a href='{{ SITEURL }}/{{ part_article.url }}'>{{ part_article.title }}</a>
                        </li>
                    {% endfor %}
                </ol>
            </div>
        {% endif %}
    </header>
    {{ article.content }}
    <div class="grid grid-cols-3 p-3 border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
        <div class="col-span-1">
            <!--Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>-->
        {% if article.category %}
        <p>
            Category
        </p>
        {% endif %}
        {% if article.tags %}
        <p>
            Tags
        </p>
        {% endif %}
        </div>
        <div class="col-span-2">
        {% if article.category %}
        <p>
            <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
        </p>
        {% endif %}
        {% if article.tags %}
        <p>
            {% for tag in article.tags %}
                <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
            {% endfor %}
        </p>
        {% endif %}
        </div>
    </div>
  </article>
{% endblock %}