{% 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="#newsletter-modal">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" 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" style="overflow:hidden;">
                            {{ newsletter.body | safe }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="newsletter-modal" class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="col-12">
                        <h3 class="modal-title text-dark-primary"><i class="fa fa-envelope-o"></i> Newsletter Sign Up</h3>
                        <div class="my-3">
                            <p>
                                Want to keep up to date with all our latest news?
                                <br>
                                Enter your email below to be added to our mailing list.
                            </p>
                            <div id="emailInputGroup" class="input-group">
                                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                <input id="email" class="form-control" type="email">
                            </div>
                        </div>
                        <div class="float-right">
                            <button id="subscribe" type="button" class="btn btn-primary"><i class="fa fa-check-circle"></i> Subscribe</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        $('#subscribe').click(function() {
            var email = $('#email').val();
            if(email && email.match(/.+@.+\..+/g)) {
                var csrfToken = $("[name='csrfmiddlewaretoken']").val();
                $.post('/newsletter/subscribe', {csrfmiddlewaretoken: csrfToken, email: email}, function(resp) {
                    if(resp.success) {
                        $('#email').val('');
                        $('#newsletter-modal').modal('hide');
                    } else {
                        $('#emailInputGroup').effect('shake')
                    }
                }, 'json');
            } else {
                $('#emailInputGroup').effect('shake')
            }
        });

        if(!sessionStorage.getItem('newsletter') && {% if request.user.is_anonymous %} true {% else %} false {% endif %}) {
            $('#newsletter-modal').modal('show');
            sessionStorage.setItem('newsletter', true);
        }
    </script>
{% endblock %}