{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Email broadcast{% endblock %}
{% block content %}
	<h1>Email broadcast</h1>

	{% if error %}
		<div class="alert alert-danger">
			{{ error }}
		</div>
	{% endif %}

	Compose an email to all users who...
	<ul>
		<li><a href="{% url 'email_broadcast' 'user' %}">have an account in {{ site_title }}</a></li>
		{% if tools_exist %}<li><a href="{% url 'email_broadcast' 'tool' %}">are qualified for a tool</a></li>{% endif %}
		{% if areas_exist %}<li><a href="{% url 'email_broadcast' 'area' %}">have access to an area</a></li>{% endif %}
		<li><a href="{% url 'email_broadcast' 'project' %}">are working on a project</a></li>
		<li><a href="{% url 'email_broadcast' 'account' %}">bill to an account</a></li>
	</ul>

	{% if search_base %}
		<div class="row">
			<div class="col-sm-4">
				<input id="search" class="form-control" aria-label="Audience" placeholder="Which {{ audience }}?" autofocus />
			</div>
		</div>

		<form class="col-sm-3" id="email" method="get" action="{% url 'compose_email' %}">
			<input type="hidden" name="audience" value="{{ audience }}">
            <div class="row" id="selection-list" style="margin-top: 10px; margin-bottom: 15px;">
            </div>
            <div class="row">
                {% button type="save" id="confirm" size="small" value="Confirm" icon="glyphicon-ok-circle" style="display: none" %}
            </div>
		</form>

		<script type="text/javascript">
			$('#search').autocomplete('search_base', set_selection, {{ search_base|json_search_base }});
			function set_selection(jquery_event, search_selection, dataset_name)
			{
                add_to_list("#selection-list", "remove_selection", search_selection.id, search_selection.name, "Remove", "selection");
                $(this).typeahead('val', '').focus();
                $("#confirm").show();
			}
            function remove_selection(id)
            {
                $("#selection_" + id).remove();
                if($("#selection-list").find("input").length === 0)
                {
                    $("#confirm").hide();
                }
            }
		</script>
	{% endif %}

    {% if user_types %}
        <div class="row">
			<div class="col-sm-4">
                <label for="selection_user_type">Which user type(s)?</label>
            </div>
        </div>

        <form class="col-sm-3" id="email" method="get" action="{% url 'compose_email' %}">
            <input type="hidden" name="audience" value="{{ audience }}">
            <div class="row checkbox">
                <label><input type="checkbox" name="no_type" checked/> Users without a type</label>
            </div>
            {% for user_type in user_types %}
                <div class="row checkbox">
                    <label><input type="checkbox" name="selection" value="{{ user_type.id }}" checked/> {{ user_type.name }}</label>
                </div>
            {% endfor %}
            <div class="row">
                {% button type="save" size="small" value="Confirm" icon="glyphicon-ok-circle" %}
            </div>
        </form>
    {% endif %}
{% endblock %}