{% 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 tools_exist %}
            <li>
                <a href="{% url 'email_broadcast' 'tool-reservation' %}">have an upcoming reservation on 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' 'project-pis' %}">are project principal investigators</a>
        </li>
        <li>
            <a href="{% url 'email_broadcast' 'account' %}">bill to an account</a>
        </li>
    </ul>
    {% if search_base %}
        <form id="email" method="get" action="{% url 'compose_email' %}">
            {% if audience == "project-pis" %}
                <div class="row">
                    <div class="col-sm-4 checkbox">
                        <label>
                            <input type="checkbox" name="no_type" checked />
                            Active projects
                        </label>
                    </div>
                </div>
            {% endif %}
            <div class="row">
                <div class="col-sm-4">
                    <input id="search"
                           class="form-control"
                           aria-label="Audience"
                           placeholder="{% if audience == "project-pis" %}[Optional] Select project(s){% else %}Which {% if audience == 'tool-reservation' %}tool{% else %}{{ audience }}{% endif %}?{% endif %}"
                           autofocus />
                </div>
            </div>
            <div class="col-sm-3">
                <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>
            </div>
        </form>
        <script type="text/javascript">
            {% if display_str %}
			    $('#search').autocomplete('search_base', set_selection, {{ search_base|json_search_base:display_str }});
            {% else %}
			    $('#search').autocomplete('search_base', set_selection, {{ search_base|json_search_base }});
            {% endif %}
			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)
                {
                    {% if audience != "project-pis" %}$("#confirm").hide();{% endif %}
                }
            }
            {% if audience == "project-pis" %}$("#confirm").show();{% endif %}
		
        </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 %}
