{% extends 'sspromotions/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 %}{% if request.resolver_match.url_name == 'bulletin_new' %}New{% else %}Edit{% endif %} bulletin item{% endblock %}

{% block maincontent %}
	<h1>{% if request.resolver_match.url_name == 'bulletin_new' %}New{% else %}Edit{% endif %} bulletin item</h1>
	
	<form class="ui form" method="POST" enctype="multipart/form-data">
		<div class="ui disabled inline grid field">
			<label class="three wide column">ID</label>
			<div class="eleven wide column">{{ item.id if item.id != None else '' }}</div>
		</div>
		<div class="ui disabled inline grid field">
			<label class="three wide column">Author</label>
			<div class="eleven wide column">{{ item.author.email }}</div>
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Title</label>
			<input class="eleven wide column" type="text" name="title" value="{{ item.title }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Date</label>
			<div class="eleven wide column">
				<div class="ui calendar" id="cal_date">
					<div class="ui input left icon grid">
						<i class="calendar icon" style="z-index: 999;"></i>
						<input class="sixteen wide column" type="text" name="date" value="{{ item.date or '' }}">
					</div>
				</div>
				<div style="margin-top: 1.5em;">Choose the date to publish the bulletin item (must be a Sunday).</div>
			</div>
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Group</label>
			<select class="ui dropdown eleven wide column" name="group">
				<option value="">Group</option>
				{% for group in groups %}
					<option value="{{ group.id }}">{{ group.name }}</option>
				{% endfor %}
			</select>
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">Content</label>
			<div class="eleven wide column">
				<div class="ui grid">
					<textarea class="sixteen wide column" rows="6" name="content">{{ item.content }}</textarea>
					<div style="margin-top: 0.5em;">To add formatting, use <a href="https://www.markdownguide.org/basic-syntax">Markdown</a> syntax. Quick reference: **<b>bold</b>** *<i>italic</i>* [<a href="http://example.com">link text</a>](http://example.com)</div>
				</div>
			</div>
		</div>
		<div class="ui inline grid field">
			<label class="three wide column">Link</label>
			<input class="eleven wide column" type="text" name="link" value="{{ item.link or '' }}">
		</div>
		<div class="ui inline grid field">
			<label class="three wide column">Image</label>
			<input class="eleven wide column" type="file" name="image" value="{{ item.image or '' }}">
		</div>
		<div class="ui divider"></div>
		<div class="ui inline grid field">
			<label class="three wide column">Also limit to</label>
			<div class="eleven wide column">
				{% for group in groups %}
					<div class="field" style="display: inline; margin-right: 1em;">
						<div class="ui checkbox">
							<input type="checkbox" name="also_limit_{{ group.id }}" id="also_limit_{{ group.id }}"{% if group.id in item.also_limit %} checked{% endif %}>
							<label for="also_limit_{{ group.id }}">{{ group.name }}</label>
						</div>
					</div>
				{% endfor %}
				<div style="margin-top: 0.5em;">Using this option, you can limit the bulletin item to members who are also in one or more of the selected groups.</div>
			</div>
		</div>
		<div class="ui divider"></div>
		<div class="ui error message"></div>
		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
		<input class="ui primary button" type="submit" name='submit' value="Save">
		<input class="ui button" type="submit" name='submit' value="Save and continue editing">
		{% if request.resolver_match.url_name == 'bulletin_edit' %}
			<input class="ui right floated red button" type="submit" name='submit' value="Delete" onclick="return confirm('Are you sure you want to delete this bulletin item? This action is IRREVERSIBLE.');">
		{% endif %}
	</form>
{% endblock %}

{% block head %}
	{{ super() }}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.css" integrity="sha256-KCHiPtYk/vfF5/6lDXpz5r5FuIYchVdai0fepwGft80=" crossorigin="anonymous">
{% endblock %}

{% block script %}
	{{ super() }}
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.js" integrity="sha256-Pnz4CK94A8tUiYWCfg/Ko25YZrHqOKeMS4JDXVTcVA0=" crossorigin="anonymous"></script>
	
	<script>
		function leftpad(n) {
			if (n < 10)
				return '0' + n;
			return '' + n;
		}
		
		$('#cal_date').calendar({
			type: 'date',
			formatter: {
				date: function(date, settings) {
					return date.getFullYear() + '-' + leftpad(date.getMonth() + 1) + '-' + leftpad(date.getDate());
				}
			},
			isDisabled: function(date, mode) {
				return date.getDay() !== 0; // Sunday only
			}
		});
		
		$('.ui.dropdown').dropdown();
		{% if item.group %}
			$('.ui.dropdown').dropdown('set selected', {{ item.group.id }});
		{% endif %}
	</script>
{% endblock script %}