{% set title = "Product compatibility" %}
{% extends '../_layouts/_main.twig' %}
{% block content %}

	<div class="flex-row">
		<div class="flex-col-auto align-self-center"></div>
		<div class="flex-col">

			<div class="form-group">
				<div class="form-label">Ваш телефон*</div>
				<div class="form-phone">
					<div class="form-phone__code">
						<select class="form-control selectpicker dropdown-min-w-300"
							name="phoneCode"
							data-live-search="true"
							data-container="body"
							data-style="btn-default form-control-phoneMarker">
						<optgroup label="Популярные">
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ee.png' /><i>+372 </i><span>Estonia</span></span>"
								value="+372" {# TODO: это телефонный код страны #}
								selected="selected">Eesti</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/fi.png' /><i>+358 </i><span>Finland</span></span>"
								value="+358" {# TODO: это телефонный код страны #}
							>Soome</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/lv.png' /><i>+371 </i><span>Latvia</span></span>"
								value="+371" {# TODO: это телефонный код страны #}
							>Läti</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/lt.png' /><i>+370 </i><span>Lithuania</span></span>"
								value="+370" {# TODO: это телефонный код страны #}
							>Leedu</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ru.png' /><i>+7 </i><span>Russia</span></span>"
								value="+7" {# TODO: это телефонный код страны #}
							>Venemaa</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/dk.png' /><i>+45 </i><span>Denmark</span></span>"
								value="+45" {# TODO: это телефонный код страны #}
							>Taani</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/no.png' /><i>+47 </i><span>Norway</span></span>"
								value="+47" {# TODO: это телефонный код страны #}
							>Norra</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/se.png' /><i>+46 </i><span>Sweden</span></span>"
								value="+46" {# TODO: это телефонный код страны #}
							>Rootsi</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/pl.png' /><i>+48 </i><span>Poland</span></span>"
								value="+48" {# TODO: это телефонный код страны #}
							>Poland</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/be.png' /><i>+375 </i><span>Belarus</span></span>"
								value="+375" {# TODO: это телефонный код страны #}
							>Belarus</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ua.png' /><i>+380 </i><span>Ukraine</span></span>"
								value="+380" {# TODO: это телефонный код страны #}
							>Ukraine</option>
						</optgroup>
						<optgroup label="Все страны">
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/af.png' /><i>+93 </i><span>Afghanistan</span></span>"
								value="7" {# TODO: это id страны #}
								data-iso2="AF"
							>Afghanistan
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/al.png' /><i>+355 </i><span>Albania</span></span>"
								value="156" {# TODO: это id страны #}
								data-iso2="AL"
							>Albania
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/dz.png' /><i>+213 </i><span>Algeria</span></span>"
								value="21" {# TODO: это id страны #}
								data-iso2="DZ"
							>Algeria
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ao.png' /><i>+244 </i><span>Angola</span></span>"
								value="157" {# TODO: это id страны #}
								data-iso2="AO"
							>Angola
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/by.png' /><i>+375 </i><span>Belarus</span></span>"
								value="176" {# TODO: это id страны #}
								data-iso2="BY"
							>Belarus
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/bg.png' /><i>+359 </i><span>Bulgaria</span></span>"
								value="28" {# TODO: это id страны #}
								data-iso2="BG"
							>Bulgaria
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ca.png' /><i>+1 </i><span>Canada</span></span>"
								value="34" {# TODO: это id страны #}
								data-iso2="CA"
							>Canada
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/cn.png' /><i>+86 </i><span>China</span></span>"
								value="187" {# TODO: это id страны #}
								data-iso2="CN"
							>China
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/cz.png' /><i>+420 </i><span>Czech Republic</span></span>"
								value="193" {# TODO: это id страны #}
								data-iso2="CZ"
							>Czech Republic
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/dk.png' /><i>+45 </i><span>Denmark</span></span>"
								value="41" {# TODO: это id страны #}
								data-iso2="DK"
							>Denmark
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/default.png' /><i>+44-1624 </i><span>Isle of Man. Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></span>"
								value="0" {# TODO: это id страны #}
								data-iso2="TEST"
							>France
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/ee.png' /><i>+372 </i><span>Estonia</span></span>"
								value="3" {# TODO: это id страны #}
								data-iso2="EE"
							>Estonia
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/fi.png' /><i>+358 </i><span>Finland</span></span>"
								value="4" {# TODO: это id страны #}
								data-iso2="FI"
							>Finland
							</option>
							<option
								data-content="<span class='selectpicker-flag'><img src='/images/flag/fr.png' /><i>+33 </i><span>France</span></span>"
								value="47" {# TODO: это id страны #}
								data-iso2="FR"
							>France
							</option>
						</optgroup>
						</select>
					</div>
					<div class="form-phone__number">
						<div class="form-field">
							<input class="form-control" type="tel" name="phoneNumber" value="" />
						</div>
						<div class="help-block hidden">Введите номер Вашего телефона</div>
					</div>
				</div>
			</div>

		</div>
	</div>

{#<div class="form-group">
	<div class="form-field">
		<input class="form-control form-control-marker" type="tel" name="phoneNumber" value="" />
		<div class="form-field-marker success d-none d-lg-block">Телефон нужен транспортной фирме для связи</div>
	</div>
	<div class="help-block hidden">Введите номер Вашего телефона</div>
</div>#}

{% endblock %}
{% block footerJS %}
	{{ parent() }}
	<script type="application/javascript">
		$(function(){
			$('.selectpicker').on('change', function(){
				console.log('selectpicker: ' + $(this).val());
			});
		});
	</script>
{% endblock %}