{% extends 'base.html' %}
{% block title %}{{ post.title }} | Eternity Project{% endblock %}
{% block content %}
<article class="article"><div class="post-meta"><span>{{ post.category }}</span><time datetime="{{ post.created_at }}">{{ post.created_at[:10] }}</time></div><h1>{{ post.title }}</h1><p class="article-lead">{{ post.excerpt }}</p><div class="byline">WRITTEN BY {{ post.username }}{% if post.updated_at != post.created_at %} / UPDATED {{ post.updated_at[:10] }}{% endif %}</div>{% if post.image_filename %}<button class="article-image-button" type="button" aria-label="Open full-size article image"><img class="article-image" src="{{ url_for('uploaded_image', filename=post.image_filename) }}" alt="Image for {{ post.title }}"></button><dialog class="image-dialog"><button class="dialog-close" type="button" aria-label="Close full-size image">Close</button><img src="{{ url_for('uploaded_image', filename=post.image_filename) }}" alt="Full-size image for {{ post.title }}"></dialog>{% endif %}<div class="article-body">{{ post.body }}</div>{% if current_user and current_user.id == post.author_id %}<a class="button compact" href="{{ url_for('edit_post', slug=post.slug) }}">Edit post</a>{% endif %}</article>
{% if post.image_filename %}<script>const imageButton=document.querySelector('.article-image-button'),imageDialog=document.querySelector('.image-dialog');imageButton.addEventListener('click',()=>imageDialog.showModal());imageDialog.querySelector('.dialog-close').addEventListener('click',()=>imageDialog.close());imageDialog.addEventListener('click',event=>{if(event.target===imageDialog)imageDialog.close()});</script>{% endif %}
{% endblock %}