{% 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">
				{% csrf_token %}
				<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. Inactive users are <span class="light-grey strikethrough">crossed out</span>.
					<div class="checkbox">
						<label><input type="checkbox" name="only_active_users" onclick="updated_email_link()" checked> Only send this email to active users</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 %}
						<span {% if not u.is_active %}class="light-grey strikethrough"{% endif %}>{{ u }} - {{ u.email }}</span><br>
					{% endfor %}
				</div>
				<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">
						<input type="text" name="subject" class="form-control" aria-label="Email subject" placeholder="Subject line" oninput="updated_email_link()" autofocus required>
					</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>
                    {% button type="view" onclick="update_preview()" value="Preview" %}
					{% button type="save" value="Send" icon="glyphicon-send" %}
                    {% if 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();
        });
        function export_user_emails()
        {
            let export_url = "{% url 'export_email_addresses' %}?"
            let active_users_only = $('input[name=only_active_users]').is(':checked') ? 'on' : '';
            export_url += "&active=" + 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);
        }
        function updated_email_link()
        {
            email_using_client('{{ user.email }}', '{{ user_emails }}', '{{ active_user_emails }}')
        }
		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);
			}
        }
        function email_using_client(user_email, user_emails, active_user_emails)
        {
            let only_active = $('input[name=only_active_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)
            {
                mailto = mailto + active_user_emails;
            }
            else
            {
                mailto = mailto + user_emails;
            }
            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;
        }
	</script>
{% endblock %}