{% extends 'ssmain/base.html' %}

{#
    Society Self-Service
    Copyright © 2018-2019  Yingtong Li (RunasSudo)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
#}

{% block title %}Subscribe to {{ settings.ORG_NAME }} Mail{% endblock %}

{% block content %}
	<h1>Subscribe to {{ settings.ORG_NAME }} Mail</h1>
	
	<p>To become an associate member of {{ settings.ORG_NAME }} and subscribe to {{ settings.ORG_NAME }} Mail, please enter your details below:</p>
	
	<form class="ui form" method="POST" action="{{ url('signup_save') }}">
		{% if errors %}
			<div class="ui visible error message"><ul>
				{% for error in errors %}
					<li>{{ error }}</li>
				{% endfor %}
			</ul></div>
		{% endif %}
		<div class="ui required inline grid field">
			<label class="three wide column">Student ID</label>
			<input class="nine wide column" type="text" name="student_id" value="{{ member.student_id }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Student email</label>
			<input class="nine wide column" type="text" name="email" value="{{ member.email }}">
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">First name</label>
			<input class="nine wide column" type="text" name="first_name" value="{{ member.first_name }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Last name</label>
			<input class="nine wide column" type="text" name="last_name" value="{{ member.last_name }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Phone number</label>
			<input class="nine wide column" type="text" name="phone" value="{{ member.phone }}">
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">Year level</label>
			<select id="drop_year" class="ui dropdown eleven wide column" name="year">
				<option value="">Year level</option>
				{% for year in years %}
					<option value="{{ year[0] }}">{{ year[1] }}</option>
				{% endfor %}
			</select>
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">MSA membership</label>
			<select id="drop_msa" class="ui dropdown eleven wide column" name="is_msa">
				<option value="">MSA membership</option>
				<option value="0">No, I am not an MSA member</option>
				<option value="1">Yes, I am an MSA member</option>
			</select>
		</div>
		<div class="ui divider"></div>
		<h2>MUMUS Mail</h2>
		
		<div class="ui required inline grid field">
			<label class="three wide column">Opt-in/out</label>
			<select id="drop_bulletin_subscribe" class="ui dropdown eleven wide column" name="bulletin_subscribe">
				<option value="0">Do not send me MUMUS Mail (not recommended)</option>
				<option value="1" selected>Keep me updated with MUMUS Mail</option>
			</select>
		</div>
		<div class="ui inline grid field">
			<label class="three wide column">Subscriptions</label>
			<div class="eleven wide column">
				{% for group in import('sspromotions.models').Group.objects.all() %}
					{% if group.subscribable %}
						<div class="field" style="display: inline; margin-right: 1em;">
							<div class="ui checkbox">
								<input type="checkbox" name="bulletin_group_{{ group.id }}" id="bulletin_group_{{ group.id }}">
								<label for="bulletin_group_{{ group.id }}">{{ group.name }}</label>
							</div>
						</div>
					{% endif %}
				{% endfor %}
				<p style="margin-top: 0.5em;">MUMUS Mail is personalised for you. Choose the groups that you would like to see first in each edition of MUMUS Mail.</p>
			</div>
		</div>
		<div class="ui divider"></div>
		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
		<input class="ui primary button" type="submit" name='submit' value="Subscribe">
	</form>
{% endblock %}

{% block script %}
	{{ super() }}
	<script>
		$('.ui.dropdown').dropdown();
		$('#drop_year').dropdown('set selected', '{{ member.year }}');
		$('#drop_msa').dropdown('set selected', '{{ 1 if member.is_msa else 0 }}');
	</script>
{% endblock %}