{% 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 release in pressRelease %}
                <div class="col-12 p-0 mb-3 bg-white newsletter">
                    <div class="p-3 newsletter-header" style="overflow:hidden" data-toggle="collapse"
                         data-target="#newsletter-body-{{ release.id }}" aria-expanded="false"
                         aria-controls="newsletter-body-{{ release.id }}">
                        <h2 class="float-left">{{ release.title }}</h2>
                        <span class="text-muted float-right">{{ release.created }}</span>
                    </div>
                    <div id="newsletter-body-{{ release.id }}" class="bg-light-blue collapse">
                        <div class="p-3" style="overflow:hidden;">
                            {% for attachment in release.attachments.all %}
                                {{ attachment.name }}
                                <a class="inline" href="/media/{{ attachment }}" target="_blank">view</a> |
                                <a class="inline" href="/media/{{ attachment }}" target="_blank" download>download</a>
                                <br>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}