{% extends 'base.html' %}
{% load markdownify %}

{% block title %}{{ article.title }}{% endblock %}

{% block header %}
    <span class="scroll"></span>

    <header>
        <img src="{{ article.thumb.url }}" alt="{{ article.title }}">
        <h1>{{ article.title }}</h1>
        <p>{{ article.date|date:"jS M, Y" }}</p>
    </header>
{% endblock %}

{% block content %}
    <div class="markdown">{{ article.body|markdownify }}</div>
    <a href="{% url 'articles:list' %}" class="back" aria-label="Back to article list">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M232,144a64.07,64.07,0,0,1-64,64H80a8,8,0,0,1,0-16h88a48,48,0,0,0,0-96H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,45.66L51.31,80H168A64.07,64.07,0,0,1,232,144Z"></path>
        </svg>
    </a>
{% endblock %}