{% extends "layout.html" %}
{% block content %}

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<!-- Adyen CSS from TEST environment (change to live for production)-->
	<link rel="stylesheet"
     href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.css"
     integrity="sha384-Dm1w8jaVOWA8rxpzkxA41DIyw5VlBjpoMTPfAijlfepYGgLKF+hke3NKeU/KTX7t"
     crossorigin="anonymous">

	<!-- Bootstrap-colorpicker CSS -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css"
    integrity="sha512-m/uSzCYYP5f55d4nUi9mnY9m49I8T+GUEe4OQd3fYTpFU9CIaPazUG/f8yUkY0EWlXBJnpsA7IToT2ljMgB87Q==" crossorigin="anonymous"
    referrerpolicy="no-referrer" /> -->


	<div id="payment-page" class="row">
		<div class="checkout col">
				<div id="dropin-container" class="payment">
					<!-- Component will be rendered here -->
				</div>
		</div>
        <div class="settings col">
			<div class="country-selector">
				<div class="country-selector__flag" aria-hidden="true">
					<img id="flag_img" src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg" alt="Flag icon">
				</div>
				<select onchange="changeSelect(this)" id="country_select" class="country-selector__select" aria-label="country" autocomplete="off">
					<option value="NL">Netherlands</option>
					<option value="GB">United Kingdom</option>
					<option value="US">United States</option>
				</select>
				<div class="dropdown-icon" aria-hidden="true">
					<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
				</div>
			</div>
        </div>
    </div>



	<!-- Adyen JS from TEST environment (change to live for production)-->
	<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.js"
     integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"
     crossorigin="anonymous"></script>

	<!-- bootstrap-colorpicker JS -->
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/js/bootstrap-colorpicker.min.js"
    integrity="sha512-94dgCw8xWrVcgkmOc2fwKjO4dqy/X3q7IjFru6MHJKeaAzCvhkVtOS6S+co+RbcZvvPBngLzuVMApmxkuWZGwQ=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->


	<!-- data from front-end -->
	<script id="client-key" type="application/json">{{ client_key|tojson }}</script>
	<script id="country-code" type="application/json">{{ countryCode|default("GB")|tojson }}</script>

	<!-- local JS -->
	<script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>


{% endblock %}