{% extends 'base.html' %}

{% block head %}
	<!-- LAOD MAIN CSS FILE  -->
	<link href="{{ url_for('static', filename='css/style.css')}}" rel="stylesheet" media="screen">
{% endblock %}

{% block nav %}
{% include 'menu.html'%}
{% endblock nav %}

{% block content %}

<div class="content_wrapper wide_content">
<div class="page_data">
        {% for a in articles %}
        <article>
	    <div class="{{a.article.category}}">
	    	<span class ="a_title">{{a.article.title}}</span>, 
	    	<span class ="a_meta">{{a.article.date}}</span>, 
            </div>
            <div class="a_content">
                {{a.article}}
            </div>


          {% if a.images %}
    <div class="gallery">
                    {% for image in a.images %}
                    <div class="img_container">
                            <img src="{{ url_for('image', filepath=a.article.path + '/' + image) }}" alt="{{ image }}" class="gallery-thumbnail" data-fullsize="{{ url_for('image', filepath=a.article.path + '/' + image) }}">
                    </div>
                    {% endfor %}
        </div>
            {% endif %}


        </article>
        <div class="separator">
            <img src="{{ url_for('static', filename='img/separator.svg') }}" alt="">
        </div>

    </div>

        {% endfor %}

    <div class="lightbox" id="lightboxModal">
        <button class="close-btn" id="closeLightbox">&times;</button>
        <img id="lightboxImage" src="" alt="Enlarged image">
    </div>


 
{% endblock %}