{% extends 'base.html' %}

{% block body %}
    <style>
        .newsletter-header {
            cursor: pointer;
            user-select: none;
        }

        .newsletter-header:hover {
            background-color: rgba(0, 0, 0, 0.1)
        }
    </style>

    <div class="container-fluid bg-dark-primary">
        <div class="container py-3">
            {% for newsletter in newsletters %}
                <div class="col-12 p-0 mb-3 bg-white newsletter">
                    <div class="p-3 newsletter-header" data-toggle="collapse" data-target="#newsletter-body-{{ newsletter.id }}" aria-expanded="false" aria-controls="newsletter-body-{{ newsletter.id }}">
                        <h2>{{ newsletter.subject }}</h2>
                        <span class="text-muted">By: {{ newsletter.creator }}</span>
                        <span class="text-muted float-right">{{ newsletter.publish }}</span>
                    </div>
                    <div  id="newsletter-body-{{ newsletter.id }}" class="bg-light-blue collapse">
                        <div class="p-3">
                            {{ newsletter.body }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}