{% extends 'generic/base.html' %}

{% block content %}
    {{users_count}} emails to send.

    <h2>Emails to send:</h2>
    <div class="sending"><div class="lds-ripple"><div></div><div></div></div> Emailing <span id="active-email"></span></div>
    <ul id="user-list">
        {% for user in  users %}
            <li data-email={{user.email}}
                {% if results %}
                    data-posturl='{{user.get_email_results_url}}'
                {% else %}
                    data-posturl='{{user.get_email_details_url}}'
                {% endif %}
            >{{user.cid}}/{{user.name}}: {{user.email}} [{{user.supervisor.email}}] </li>
        {% endfor %}
    </ul>

    <button id="send-emails">Send emails</button>

    <script>
        $('document').ready(() => {

            $("#send-emails").click(() => {
                //$("#user-list li").each((n, el) => {
                //    console.log(n, el);
                //})
                li_list = $("#user-list li").get();
                sendEmail(li_list);
            });
        })

        function sendEmail(li_list) {
            //console.log(li_list)
            $(".sending").show()
            li = li_list.shift();
            //console.log(li)
            url = li.dataset.posturl;

            $("#active-email").text(li.dataset.email)

            console.log(url)

            $.get(url, function(data, status) {
                if (status == "success") {
                    if (data.sent) {
                        $(li).append("Email Sent");
                        $(li).addClass("email-sent");
                    } else {
                        $(li).append(`Error ${data.comment}`);
                        $(li).addClass("email-error");

                    }

                } else {
                    $(li).append(`Error ${status}`);
                    $(li).addClass("email-error");

                }

            }).fail(function(jqXHR, textStatus, errorThrown) {
                $(li).append(`Error ${textStatus} / ${errorThrown}`);
                $(li).addClass("email-error");
            }).always(() => {
                if (li_list.length > 0) {
                    sendEmail(li_list)
                } else {
                    $(".sending").hide()
                }

            })



        }

    </script>
    <style>
        .email-sent {
            color: purple;
        }
        .email-error {
            color: red;
        }
        .sending {
            display: none;
            color: darkblue;
            font-size: larger;

        }

        .lds-ripple {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }
        .lds-ripple div {
            position: absolute;
            border: 4px solid blue;
            opacity: 1;
            border-radius: 50%;
            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }
        .lds-ripple div:nth-child(2) {
            animation-delay: -0.5s;
        }
        @keyframes lds-ripple {
            0% {
                top: 36px;
                left: 36px;
                width: 0;
                height: 0;
                opacity: 1;
            }
            100% {
                top: 0px;
                left: 0px;
                width: 72px;
                height: 72px;
                opacity: 0;
            }
        }


    </style>


{% endblock %}