{% extends "templates/web.html" %}

{% block title %} Unsubscribe from Newsletter {% endblock %}

{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}

{% block page_content %}
<style>
	body {
		background-color: var(--subtle-accent);
		font-size: var(--text-base);
	}
</style>

<script>
	frappe.ready(function() {
		$("#select-all-btn").click(function() {
			$(".group").prop('checked', true);

		});
		$("#unselect-all-btn").click(function() {
			$(".group").prop('checked', false);
		});
	});
</script>

{% if status == "waiting_for_confirmation" %}
<!-- Confirmation page to select the group to unsubscribe -->
	<div class="portal-container ">
		<div class='portal-section head d-block'>
			<div class="title">{{_("Unsubscribe")}}</div>
			<div class="text-muted">Select groups you wish to unsubscribe from ({{ email }})</div>
			<!-- Show 'Select All' or 'Unselect All' buttons only if there are more than 5 groups -->
			{% if email_groups|length > 5 %}
			<button id="select-all-btn"class="small-btn">Select All</button>
			<button id="unselect-all-btn"class="small-btn">Unselect All</button>
			{% endif %}
		</div>
		{% if email_groups %}
				<form method="post">
					<input type="hidden" name="user_email" value="{{ email }}">
					<input type="hidden" name="csrf_token" value="{{ frappe.session.csrf_token }}">
					<!-- Break into columns if there are more than 20 groups -->
					<div class="portal-items">
						{% for group in email_groups %}
						<div class="checkbox portal-section d-block">
							<label>
								<input
									type="checkbox"
									{% if current_group[0] and current_group[0].email_group == group.email_group %} checked {% endif %}
									class="group"
									name='{{ group.email_group }}'>
									<span style="padding-left: 5px">{{ group.email_group }}</span>
							</label>
						</div>
						{% endfor %}
					</div>
					<div class="portal-section mt-3">
						<button
							type="submit"
							id="unsubscribe"
							class="btn btn-primary">
							Unsubscribe
						</button>
					</div>
				</form>
			</div>
		{% else %}
			<div>
				You are not registered to any mailing list.
				<span class="text-muted">{{ email }}</span>
			</div>
		{% endif %}
		</div>
	</div>

{% elif status == "unsubscribed" %}
<!-- Unsubscribed page comes after submission -->
	<div class="portal-container">
		<div class='portal-section head'>
			<div class="title">Unsubscribed</div>
		</div>
		<div class="portal-section">
			You have been unsubscribed from selected mailing list.
		</div>
	</div>

{% else %}
<!-- For invalid and unsigned request -->
<div class="portal-container">
	<div class='portal-section head'>
		<div class="title">Unsubscribe</div>
	</div>
	<div class="portal-section">
		Invalid request
	</div>
</div>
{% endif %}

{% endblock %}

{% block style %}
	<style>
		.small-btn {
			padding: 1px 5px;
			font-size: 12px;
			line-height: 1.5;
			border-radius: 3px;
			color: inherit;
			background-color: #f0f4f7;
			border-color: transparent;
			margin: 15px 5px 0 0;
		}
		.main-div {
			width: 500px;
			height: auto;
		}
	</style>
{% endblock %}