{% extends "layouts/app.twig" %}

{% block title %}{{ lang.cp_email_title }}{% endblock %}

{% block content %}
	{% if hasRole('super_admin') or hasRole('admin') %}
		<div class="page-wrapper">
			<div class="page-content">

				{% include 'partials/flash.twig' %}

				<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
					<div class="breadcrumb-title pe-3">{{ lang.cp_email_title }}</div>
					<div class="ps-3">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb mb-0 p-0">
								<li class="breadcrumb-item active" aria-current="page">
									<a href="javascript:void(0)" data-bs-target="#addEmailModal" data-bs-toggle="modal" class="btn btn-outline-dark btn-sm">
										<i class="bi bi-plus"></i>{{ lang.add }} {{ lang.cp_email_name }}
									</a>
								</li>
							</ol>
						</nav>
					</div>
					<div class="ms-auto">
					</div>
				</div>
				<!--end breadcrumb-->

				<div class="row">
					<div class="col-12">
						<div class="card shadow-none border">
							<div class="card-body">
								<div id="datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
									<div class="row">
										<div class="col-sm-12">
											<table id="datatable"  class="table table-bordered dt-responsive nowrap w-100 dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable_info">
												<thead>
												<tr>
													<th style="width: 50%">{{ lang.cp_email_name }}</th>
													<th style="width: 40%">{{ lang.EMAIL_USAGE_QUOTA }}</th>
													<th style="width: 10%">{{ lang.actions }}</th>
												</tr>
												</thead>
												<tbody>
												{% for row in emails %}
													<tr>
														<td>{{ row.email }}</td>
														<td>
															{{ row.diskused }}/{% if row.txtdiskquota!='unlimited'%}{{ row.txtdiskquota }}MB {% else %} {{ row.txtdiskquota }} {% endif %}
															<div class="progress">
																<div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ row.diskusedpercent }}%" aria-valuenow="{{ row.diskusedpercent }}" aria-valuemin="0" aria-valuemax="100"></div>
															</div>
														</td>
														<td class="right-align">
															<div class="btn-group" data-id="row-{{row.email}}">
																<a href="javascript:ChangePassword('{{row.email}}')" class="button btn btn-outline-info btn-sm" title="Change password"><i class="bi bi-lock"></i></a>
																<a href="javascript:void(0)"  class="button btn btn-outline-danger btn-sm" onclick="deleteRecord('{{ route('email.destroy',{'email':baseEncode(row.email)}) }}')" title="Delete Email"><i class="bi bi-trash"></i></a>
																<a href="javascript:ChangeQuota('{{row.email}}','{{row.txtdiskquota}}');" class="button btn btn-outline-success btn-sm" title="Change Quota"><i class="bi bi-pen"></i></a>
																<a href="{{route('email.forward.create',{'email':baseEncode(row.email)})}}" class="button btn btn-outline-secondary btn-sm" title="Forward Emails"><i class="bi bi-forward"></i></a>
																<a href="{{route('email.autoresponder.create',{'email':baseEncode(row.email)})}}" class="button btn btn-outline-primary btn-sm" title="Create Auto Responder"><i class="bi bi-inbox"></i></a>
															</div>
														</td>
													</tr>
												{% endfor %}
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div> <!-- end col -->
				</div> <!-- end row -->
			</div>
		</div>
	{% endif %}
	{% include 'cpemail/forms.twig' %}
{% endblock %}

{% block innerjs %}
	<script>
		var dataTable = $('#datatable').dataTable({
			iDisplayLength:25,
			columns: [
				{data: 'email'},
				{data: 'quota', orderable : false, searchable: false},
				{data: 'action', orderable : false, searchable: false}
			]
		});

		function ChangePassword(email) {
			$('.modal').modal();
			$('#changePasswordModal').modal('show');
			$('#email').val(email);
		}

		function ChangeQuota(email,quota) {
			$('input[name=_method]').val('POST');
			$('.modal').modal();
			$('#updateQuotadModal').modal('show');
			$('#useremail').val(email);
			$('#quota').val(Math.round(quota));
		}

	</script>
{% endblock %}