<div class="row">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		<form action="{{ admin_dir }}/settings/load-balancers/edit?id={{ id }}" method="post" class="needs-validation" novalidate>
			<div class="row">
				<div class="col-12 col-md-6">
					<div class="form-group">
						<label for="name">Name</label>
						<input type="text" name="name" id="name" class="form-control" placeholder="Insert load balancer name" value="{{ name }}" required>
					</div>
					<div class="form-group">
						<label for="link">Homepage URL</label>
						<input type="url" name="link" id="link" class="form-control" placeholder="Example: http://example.com/" value="{{ link }}" required>
					</div>
					<div class="form-group form-row">
						<label for="status" class="col-2">Status</label>
						<div class="col-10">
							<div class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" name="status" id="status" value="1" {{ status ? 'checked' : '' }}>
								<label class="custom-control-label" for="status">Active</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label for="disallow_hosts">Disabled Hosts</label>
						<select multiple="multiple" id="disallow_hosts" name="disallow_hosts[]" class="multi-select">
							{% for key, val in supported_sites %}
                                {% set x = val|split('|', 2) %}
                                <option value="{{ key }}" {{ key in disallow_hosts ? 'selected' : '' }}>{{ x[0] }}</option>
                            {% endfor %}
						</select>
						<small class="form-text text-muted">The load balancer will not bypass the disabled hosts. The disabled hosts are in the right or bottom column.</small>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="form-group">
						<input type="hidden" name="id" value="{{ id }}">
						<button type="submit" class="btn btn-success">
							<em class="fas fa-save mr-2"></em>Update
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
