oacpl/newsletters/templates/newsletters.html

{% 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">
            {% if request.user.is_anonymous %}
                <button class="btn btn-secondary mx-auto d-block mb-3" data-toggle="modal"
                        data-target="#subscribeModal">Subscribe To The Newsletter
                </button>
            {% endif %}
            {% for newsletter in newsletters %}
                <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-{{ newsletter.id }}" aria-expanded="false"
                         aria-controls="newsletter-body-{{ newsletter.id }}">
                        <h2 class="float-left">{{ newsletter.subject }}</h2>
                        <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" style="overflow:hidden;">
                            {{ newsletter.body | safe }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="subscribeModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-dark-primary">Newsletter Sign Up</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Want to keep up to date with all our latest news?
                    <br>
                    Enter your email below to be added to our mailing list.
                    <form id="subscribeForm" method="post">
                        {% csrf_token %}
                        <div class="input-group pt-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-envelope-o"></i></span>
                            </div>
                            <input name="email" class="form-control" type="email">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="subscribe" type="submit" form="subscribeForm" class="btn btn-primary">Subscribe</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}