{% extends "meeting-base.html" %}

{% block headtitle %}Send A Message {% endblock %}

{% load staticfiles %}

{% block content %}
    <div class="body">
        <div class="main-header programme-day-header search-reactive">
            <div class="return">
                <div class="container-fluid pad-30">
                    <div class="row mar-30">
                        <div class="col-xs-2 col-sm-1 pad-30 text-left">
                            <a href="{% url 'meeting_home' meeting_information.slug %}">
                                <img src="{% static 'images/microsite/navigation/arrow-left.png' %}" />
                            </a>
                        </div>
                        <div class="col-xs-8 col-sm-10 pad-30 text-center">
                            <div class="title">Send A Message</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body">

            <form id="send_email_form" action="" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="note_form">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-dismissable alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %}">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                {{ message|safe }}
                            </div>
                        {% endfor %}
                    {% endif %}
                    <p>Please use the form below to send your message.</p>
                    <div>
                        <label for="id_members">Select Members to send to</label><br/>
                        <select id="id_members" name="members" placeholder="Select Members to send to" multiple>
                            {% for registrant in registrants %}
                                <option value="{{ registrant.id }}">{{ registrant.given_name }} {{ registrant.surname }} {{ registrant.institution }} {{ registration.job_title }}</option>
                            {% endfor %}
                        </select>
                    <div>
                        <label for="id_subject">Enter the subject of your message</label>
                        <input id="id_subject" name="subject" class="subject"/>
                    </div>
                    <div>
                        <label for="id_members">Please enter your message</label>
                        <textarea id="id_members"name="message" placeholder="Please enter your message"></textarea>
                    </div>
                    <div class="buttons">
                        <button type="submit" title="Submit" class="btn btn-primary btn-lg">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block footer_script %}
    <link rel="stylesheet" href="{% static 'lib/bootstrap/css/bootstrap-multiselect.css' %}"/>
    <script src="{% static 'lib/bootstrap/js/bootstrap-multiselect.js' %}"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
            $('#id_members').multiselect({
    	        buttonClass: 'btn btn-sm btn-default btn-dropdown',
    			enableFiltering: 1,
                enableCaseInsensitiveFiltering: true,
                numberDisplayed: 2000,
                includeSelectAllOption: true,
                numberDisplayed: 0,
    	    });
    	});
    </script>
{% endblock %}