{% extends "templates/admin/html-skeleton.twig" %}
{% block body %}
	<form action="/generator/form.php" method="post">
		<input type="hidden" name="stripe[class]" value="team-ban"/>

		<div class="form-group">
			<div class="form-row">
				<div class="col-md-8 mb-3">
					<label for="validationServer01">Kupa neve</label>
					<input type="text" name="stripe[cup][name]" class="form-control" id="validationServer01"
						   placeholder="Pld.: 5on5 Bomb Cup" value="{{ stripe.cup.name }}" required>
				</div>
				<div class="col-md-2 mb-3">
					<label for="validationServer02">Kupa sorszám</label>
					<input type="text" name="stripe[cup][number]" class="form-control" id="validationServer02" placeholder="Pld.: #654"
						   value="{{ stripe.cup.number }}" required>
					<div class="valid-feedback">
						Looks good!
					</div>
				</div>
			</div>
		</div>

		<div class="form-group">
			<div class="form-row">
				<div class="form-group bg-primary">
					<div class="col-md-12 mb-4">
						<label for="team_blue_name" class="bg-primary">Kék csapat neve</label>
						<input type="text" name="stripe[team][blue][name]" class="form-control" id="team_blue_name"
							   placeholder="Pld.: Impress!ve" value="{{ stripe.team.blue.name }}" required>
					</div>
					<div class="col-md-12 mb-4">
						<label for="op-blue" class="bg-primary">Banolt operátorok</label>
						<select name="stripe[team][blue][ban][]" class="operators" id="op-blue" style="width: 100%"
								multiple>
							{% for operator in operators %}
								<option value="{{ operator }}" {{ operator in stripe.team.blue.ban ? "selected"}}>{{ operator|capitalize }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
				<div class="form-group">
						<button class="btn btn-info" title="Csapat színcsere" onclick="swapTeams(); return false;"><=></button>
				</div>
				<div class="form-group bg-warning">
					<div class="col-md-12 mb-4">
						<label for="team_orange_name">Narancs csapat neve</label>
						<input type="text" name="stripe[team][orange][name]" class="form-control" id="team_orange_name"
							   placeholder="Pld.: Opress!ve" value="{{ stripe.team.orange.name }}" required>
					</div>
					<div class="col-md-12 mb-4">
						<label for="op-orange" class="bg-warning">Banolt operátorok</label>
						<select name="stripe[team][orange][ban][]" class="operators" id="op-orange" style="width: 100%"
								multiple>
							{% for operator in operators %}
								<option value="{{ operator }}" {{ operator in stripe.team.orange.ban ? "selected"}}>{{ operator|capitalize }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<button class="btn btn-primary mx-auto" type="submit">Overlay felülírása</button>
		</div>
	</form>

	<form action="/generator/form.php" method="post">

	</form>
{% endblock %}
{% block lazyload %}
	{{ parent() }}
	<script type="text/javascript">
        $('.operators').chosen(
            {
                'placeholder_text_multiple': 'Banolt operátorok',
                'max_selected_options': 2
            }
        );

        function swapTeams() {
        	var blue = document.getElementById('team_blue_name');
        	var orange = document.getElementById('team_orange_name');

        	var blue_name = blue.value;
        	blue.value = orange.value;
        	orange.value = blue_name;

        	return false;
		}

	</script>
{% endblock %}