{% 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">×</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 %}