{% extends '../_layouts/_main.twig' %}
{% set pageTitle = 'ALVADI - Оплата заказа' %}
{% block content %}
	<div class="page-order-payment ver2">
		<div class="mb-8"></div>
		<div class="pop-head">
			<h1 class="hidden-xs">Оплата</h1>
			<div class="pop-head-summ">
				Сумма к оплате: <span>106.15</span> eur
			</div>

			<div class="d-inline-block d-lg-none">
				Страна:
				<div class="dropdown dropdown-relative dropdown-nav-tabs">
					<a href="#" data-toggle="dropdown">
						<span class="dropdown-state"></span>
						<i class="fa fa-caret-down"></i>
					</a>
					<ul class="dropdown-menu" aria-labelledby="dLabel">
						<li>
							<a href="#tab-world" data-toggle="tab">
								<!--<a href="#">-->
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_WORLD.png" alt="" /></i>
									Международный
								</span>
							</a>
						</li>
						<li class="active">
							<a href="#tab-ee" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_EE.png" alt="" /></i>
									Эстония
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-fi" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_FI.png" alt="" /></i>
									Финляндия
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-lv" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_LV.png" alt="" /></i>
									Латвия
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-lt" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_LT.png" alt="" /></i>
									Литва
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-se" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_SE.png" alt="" /></i>
									Швеция
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-dk" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_DK.png" alt="" /></i>
									Дания
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<ul class="nav nav-tabs d-none d-lg-block">
			<li class="active">
				<a href="#tab-ee" data-toggle="tab">
					<span class="icobox size_24">
						<i class="ico"><img class="center" src="/images/icons/flags/flag_EE.png" alt="" /></i>
						Эстония
					</span>
				</a>
			</li>
			<li>
				<a href="#tab-fi" data-toggle="tab">
					<span class="icobox size_24">
						<i class="ico"><img class="center" src="/images/icons/flags/flag_FI.png" alt="" /></i>
						Финляндия
					</span>
				</a>
			</li>
			<li>
				<a href="#tab-lv" data-toggle="tab">
					<span class="icobox size_24">
						<i class="ico"><img class="center" src="/images/icons/flags/flag_LV.png" alt="" /></i>
						Латвия
					</span>
				</a>
			</li>
			<li>
				<div class="dropdown dropdown-relative">
					<a href="#" data-toggle="dropdown">
						<span class="dropdown-state" data-default="Другие">Другие</span>
						<i class="fa fa-angle-down"></i>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#tab-world" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_WORLD.png" alt="" /></i>
									Международный
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-lt" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_LT.png" alt="" /></i>
									Латвия
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-se" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_SE.png" alt="" /></i>
									Швеция
								</span>
							</a>
						</li>
						<li>
							<a href="#tab-dk" data-toggle="tab">
								<span class="icobox size_24">
									<i class="ico"><img class="center" src="/images/icons/flags/flag_DK.png" alt="" /></i>
									Дания
								</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
		<div class="pop-body">
			<h6>Выберите метод платежа:</h6>

			<div class="tab-content">
				<!--Estonia-->
				<div role="tabpanel" class="tab-pane active" id="tab-ee">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Swedbank">
								<img src="/images/icons/payment/logo_swedbank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="SEB">
								<img src="/images/icons/payment/logo_seb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="LHV">
								<img src="/images/icons/payment/logo_lhv.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Luminor">
								<img src="/images/icons/payment/luminor.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="COOP Pank">
								<img src="/images/icons/payment/logo_coop.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Liisi">
								<img src="/images/icons/payment/logo_liisi.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="ALVADI TRIO">
								{#<img src="/images/icons/payment/alvadi-trio.png" alt="" />#}
								{#<img src="/images/icons/payment/alvadi-trio-ee.png" alt="" />#}
								<img src="/images/icons/payment/alvadi-trio-ru.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--Finland-->
				<div role="tabpanel" class="tab-pane" id="tab-fi">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Verkkomaksu">
								<img src="/images/icons/payment/logo_pohjola.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Nordea">
								<img src="/images/icons/payment/logo_nordea.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Alandsbanken">
								<img src="/images/icons/payment/logo_alandsbanken.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Säästöpankki">
								<img src="/images/icons/payment/logo_saastopankki.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Handelsbanken">
								<img src="/images/icons/payment/logo_handelsbanken.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="S-Pankii">
								<img src="/images/icons/payment/logo_S-Pankii.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Akita">
								<img src="/images/icons/payment/logo_actia.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Danske Bank">
								<img src="/images/icons/payment/logo_danske-bank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Omasp">
								<img src="/images/icons/payment/logo_omasp.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="POP Pankki">
								<img src="/images/icons/payment/logo_pop-pankki.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Jousto">
								<img src="/images/icons/payment/logo_jousto.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="JCB">
								<img src="/images/icons/payment/logo_jcb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Diners Club">
								<img src="/images/icons/payment/logo_diners_club.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="American Express">
								<img src="/images/icons/payment/logo_amex.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Mastercard">
								<img src="/images/icons/payment/logo_master.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--Latvia-->
				<div role="tabpanel" class="tab-pane" id="tab-lv">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="SEB">
								<img src="/images/icons/payment/logo_seb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Nordea">
								<img src="/images/icons/payment/logo_nordea.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Swedbank">
								<img src="/images/icons/payment/logo_swedbank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Citadele">
								<img src="/images/icons/payment/logo_citadele.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--Lithuania-->
				<div role="tabpanel" class="tab-pane" id="tab-lt">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="LKU">
								<img src="/images/icons/payment/logo_lku.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Nordea">
								<img src="/images/icons/payment/logo_nordea.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Swedbank">
								<img src="/images/icons/payment/logo_swedbank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Medicinos LT">
								<img src="/images/icons/payment/logo_medicinos_bankas.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Handelsbanken">
								<img src="/images/icons/payment/logo_handelsbanken.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="SB LT">
								<img src="/images/icons/payment/logo_sb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="DND">
								<img src="/images/icons/payment/logo_dnb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Danske Bank">
								<img src="/images/icons/payment/logo_danske-bank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="SEB">
								<img src="/images/icons/payment/logo_seb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Citadele">
								<img src="/images/icons/payment/logo_citadele.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--Sweden-->
				<div role="tabpanel" class="tab-pane" id="tab-se">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Nordea">
								<img src="/images/icons/payment/logo_nordea.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Handelsbanken">
								<img src="/images/icons/payment/logo_handelsbanken.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="SEB">
								<img src="/images/icons/payment/logo_seb.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Swedbank">
								<img src="/images/icons/payment/logo_swedbank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Skandia">
								<img src="/images/icons/payment/skandia.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Forex Bank">
								<img src="/images/icons/payment/forexBank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Danske Bank">
								<img src="/images/icons/payment/logo_danske-bank.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Länsförsäkringar Blekinge">
								<img src="/images/icons/payment/lansforsakringar.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Ica Banken">
								<img src="/images/icons/payment/icaBanken.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Sparbanken Syd">
								<img src="/images/icons/payment/sparbankenSyd.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Paypal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Visa Mastercard Maestro">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--Denmark-->
				<div role="tabpanel" class="tab-pane" id="tab-dk">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
				<!--International-->
				<div role="tabpanel" class="tab-pane" id="tab-world">
					<div class="row row-16">
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="PayPal">
								<img src="/images/icons/payment/logo_paypal.png" alt="" />
							</a>
						</div>
						<div class="mb-16 col-xxs-12 col-xs-6 col-md-4">
							<a href="#" class="pop-button" title="Cards">
								<img src="/images/icons/payment/creditCards.png" alt="" />
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-separator"></div>
{% endblock %}