{% extends 'base.html' %}

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

{% block content %}
    <script src="{{ SITE_URL }}/theme/js/slideshow.js"></script>

    <h1 class='article-title'>{{ article.title }}</h1>
    <div class="article">
        <div class='article-img column'>
            {% for i in [1, 2, 3, 4, 5] %}
                <img alt="" onclick="showSlide('img-{{ i }}')" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
            {% endfor %}
        </div>
        <div class='article-content column'> {{ article.content }}</div>
    </div>

    <div id="slide-container">
        <div id="close-modal" onclick="closeModal()">X</div>
        <div id="slides" class="modal">
            {% for i in [1, 2, 3, 4, 5] %}
                <img class="slide" id="img-{{ i }}" alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
            {% endfor %}
        </div>
    </div> 
{% endblock content %}