{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Compose email{% endblock %}
{% block content %}
    <h1>Compose an email</h1>
    {% if error %}
        {{ error }}
    {% elif generic_email_sample %}
        <div class="row">
            <form action="{% url 'send_broadcast_email' %}"
                  id="email_form"
                  method="post"
                  enctype="multipart/form-data">
                {% csrf_token %}
                {% if user.is_any_part_of_staff %}
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col-sm-6 h3">Recipients</div>
                            <div class="col-sm-6 h3">
                                {% if user_emails %}
                                    {% button type="export" size="small" value="Export user list" onclick="export_user_emails();" %}
                                {% endif %}
                            </div>
                        </div>
                        Active users are listed below in black.
                        <div class="inactive-label" style="display: none">
                            Inactive users are <span class="light-grey strikethrough">crossed out</span>.
                        </div>
                        <div class="access-expired-label" style="display: none">
                            Users with expired access are <span class="light-grey strikethrough-double">double-crossed out</span>.
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="only_active_users" onclick="updated_email_link()" checked>
                                Only send this email to users with an active account
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="only_active_access_users" onclick="updated_email_link()" checked>
                                Only send this email to users with active access (no access expiration or set in the future)
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="copy_me" onclick="updated_email_link()" checked>
                                Send a copy of this email to myself
                            </label>
                        </div>
                        {% for u in users %}
                            <div {% if not u.is_active %}class="light-grey strikethrough" style="display: none" {% elif u.has_access_expired %}class="light-grey strikethrough-double" style="display: none"{% endif %}>
                                {{ u }} - {{ u.email }}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="col-sm-6">
                    <h3>Email content</h3>
                    <input type="hidden" name="audience" value="{{ audience }}">
                    <input type="hidden" name="no_type" value="{{ no_type }}">
                    {% for selection_value in selection %}
                        <input type="hidden" name="selection" value="{{ selection_value }}" oninput="updated_email_link()">
                    {% endfor %}
                    <div class="form-group">
                        {% if topic %}
                            <div class="input-group">
                                <span class="input-group-addon">[{{ topic }}]</span>
                            {% endif %}
                            <input type="text"
                                   name="subject"
                                   class="form-control"
                                   aria-label="Email subject"
                                   placeholder="Subject line"
                                   oninput="updated_email_link()"
                                   autofocus
                                   required>
                            {% if topic %}</div>{% endif %}
                    </div>
                    <div class="form-group">
                        Title background color:
                        <div class="radio" style="background-color:#5bc0de; padding:5px">
                            <label>
                                <input type="radio" name="color" value="#5bc0de" checked>
                                Blue, for conveying information
                            </label>
                        </div>
                        <div class="radio" style="background-color:#5cb85c; padding:5px">
                            <label>
                                <input type="radio" name="color" value="#5cb85c">
                                Green, for conveying success
                            </label>
                        </div>
                        <div class="radio" style="background-color:#f0ad4e; padding:5px">
                            <label>
                                <input type="radio" name="color" value="#f0ad4e">
                                Orange, for conveying a warning
                            </label>
                        </div>
                        <div class="radio" style="background-color:#d9534f; padding:5px">
                            <label>
                                <input type="radio" name="color" value="#d9534f">
                                Red, for conveying danger
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text"
                               name="title"
                               aria-label="Email title"
                               class="form-control"
                               style="text-transform:uppercase"
                               placeholder="Title (always uppercase)"
                               oninput="updated_email_link()">
                    </div>
                    <div class="form-group">
                        <input type="text"
                               name="greeting"
                               aria-label="Email greeting"
                               class="form-control"
                               placeholder="Greeting"
                               oninput="updated_email_link()">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control"
                                  name="contents"
                                  aria-label="Email contents"
                                  rows="6"
                                  placeholder="What would you like to say?"
                                  oninput="updated_email_link()"
                                  required></textarea>
                    </div>
                    <div class="form-group">
                        <input name="attachments" type="file" multiple>
                    </div>
                    {% button type="view" onclick="update_preview();document.getElementById('email_preview').scrollIntoView();" value="Preview" %}
                    {% button type="save" value="Send" icon="glyphicon-send" %}
                    {% if user.is_any_part_of_staff and user_emails %}
                        {% if active_user_emails|length > 2000 %}
                            <div class="pull-right"
                                 style="display: inline-block"
                                 id="default_client_email_wrapper"
                                 data-title="There are too many email addresses to use the default email client. Use the export function instead.">
                                {% button type="info" value="Use default email client" icon="glyphicon-envelope" disabled="disabled" %}
                            </div>
                        {% else %}
                            <a id="email_client_link" href="" target="_blank" class="pull-right">{% button type="info" value="Use default email client" icon="glyphicon-envelope" %}</a>
                        {% endif %}
                    {% endif %}
                    <div style="height:50px"></div>
                    <h3>Your email will look like this...</h3>
                    <table style="width:100%; border-width: 1px;border-style: solid;">
                        <tr>
                            <td id="email_preview">{{ generic_email_sample|safe }}</td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    {% else %}
        A generic email format has not been customized for your organization yet. You'll need to create one before you can send email broadcasts from within {{ site_title }}. Please visit the <a href="{% url 'customization' %}">customizations page</a> to upload a template.
    {% endif %}
    <script type="application/javascript">
        window.addEventListener('load', function()
        {
            $('#default_client_email_wrapper').tooltip();
            updated_email_link();
        });
        {% if user.is_any_part_of_staff %}
        function export_user_emails()
        {
            let export_url = "{% url 'export_email_addresses' %}?"
            let active_users_only = $('input[name=only_active_users]').is(':checked') ? 'on' : '';
            let access_active_users_only = $('input[name=only_active_access_users]').is(':checked') ? 'on' : '';
            export_url += "&active=" + active_users_only;
            export_url += "&active_access=" + access_active_users_only;
            export_url += "&audience=" + "{{ audience }}";
            export_url += "&no_type=" + "{{ no_type|yesno:'on,' }}";
            {% for selection_item in selection %}
                export_url += "&selection=" + "{{ selection_item }}";
            {% endfor %}
            window.open(export_url);
        }
        {%  endif %}
        function updated_email_link()
        {
            {# If the user is not staff member, the email link is not visible, this function will be a NO OP #}
            {% if user.is_any_part_of_staff %}
                email_using_client('{{ user.email }}', '{{ user_emails }}', '{{ active_user_emails }}', '{{ active_access_user_emails }}', '{{ active_active_access_user_emails }}')
            {%  endif %}
        }
		function update_preview()
        {
			ajax_post('{% url 'email_preview' %}', $('#email_form').serialize(), refresh_preview);
        }
        function refresh_preview(response, status, xml_http_request)
        {
			if(response) {
			    $('#email_preview').html(response);
			}
        }
        {% if user.is_any_part_of_staff %}
        function email_using_client(user_email, user_emails, active_user_emails, active_access_user_emails, active_active_access_user_emails)
        {
            let inactive_users = $("div.strikethrough, div.inactive-label");
            let access_expired_users = $("div.strikethrough-double, div.access-expired-label");
            let only_active = $('input[name=only_active_users]')[0].checked;
            let only_active_access = $('input[name=only_active_access_users]')[0].checked;
            let copy_me = $('input[name=copy_me]')[0].checked;
            let subject = $('input[name=subject]').val();
            let title = $('input[name=title]').val();
            let greeting = $('input[name=greeting]').val();
            let message = $('textarea[name=contents]').val();
            let mailto = 'mailto:?bcc=';
            if (copy_me)
            {
                mailto = mailto + user_email + ';';
            }
            if (only_active && only_active_access)
            {
                mailto = mailto + active_active_access_user_emails;
                inactive_users.hide();
                access_expired_users.hide();
            }
            else if (only_active)
            {
                mailto = mailto + active_user_emails;
                inactive_users.hide();
                access_expired_users.show();
            }
            else if (only_active_access)
            {
                inactive_users.show();
                access_expired_users.hide();
                mailto = mailto + active_access_user_emails;
            }
            else
            {
                mailto = mailto + user_emails;
                inactive_users.show();
                access_expired_users.show();
            }
            if (subject)
            {
                mailto = mailto + '&subject=' + subject;
            }
            let email_body = '';
            if (title)
            {
                email_body = email_body + title + '\n\n';
            }
            if (greeting)
            {
                email_body = email_body + greeting + '\n';
            }
            if (message)
            {
                email_body = email_body + message;
            }
            if (email_body)
            {
                mailto = mailto + '&body=' + encodeURIComponent(email_body);
            }
            let mailto_link = $('#email_client_link')[0];
            mailto_link.href = mailto;
        }
        {%  endif %}
	
    </script>
{% endblock %}
