<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <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" />

    <!-- Bootstrap CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
    />

    <!-- hello -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap");
      @import url('https://fonts.googleapis.com/css2?family=Engagement&family=PT+Sans+Caption&family=Roboto+Condensed:wght@300&display=swap');
    </style>

    <!-- local CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='css/application.css') }}"
    />

    <!-- 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"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"
    />

    <title>Checkout Create</title>
  </head>

  <body>
    <!-- <header id="header">
      <div class="logo-box">
      <a href="{{ url_for('checkout') }}">
        <img
          class="logo-image"
          src="{{ url_for('static', filename='img/mystore-logo.svg') }}"
          alt="BARB logo"
        />
      </a>
    </div>
    </header> -->

    <div class="cotainer-fluid h-100">
      <div class="row flex-fill">
        <!-- Dropin UI -->
        <div
          class="checkout col-7 dropIn-UI justify-content-center text-center m-0 p-0"
        >
          <div id="dropin-container" class="payment p-5">
            <!-- Component will be rendered here -->
          </div>
          <!-- Hidden status page to show on completion -->
          <div class="status-container successDiv" id="successDiv">
            <div class="status">
              <img
                src="{{ url_for('static', filename='img/success.svg') }}"
                class="status-image"
              />
              <img
                src="{{ url_for('static', filename='img/thank-you.svg') }}"
                class="status-image-thank-you"
              />
              <p class="status-message">
                Your order has been successfully placed.
              </p>
              <a class="button" onclick="restartDropin()">Return Home</a>
            </div>
          </div>
          <div class="status-container errorDiv">
            <div class="status">
              <p class="status-message">Error!</p>
              <p class="status-message">
                Review response in console and refer to
                <a
                  href="https://docs.adyen.com/development-resources/response-handling"
                  >Response handling.</a
                >
              </p>
              <a class="button" onclick="restartDropin()">Return Home</a>
            </div>
          </div>

          <!-- Test cards container -->
          <div class="test-cards-container fixed-bottom text-left">
            <a id="test-cards-btn" class="btn btnprimary test-cards-btn">
              <div class="panel-group textFonts">
                <div class="panel panel-default">
                  <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="card-selector w-100 mb-1 m-0">
                        <div class="card-selector__brand" aria-hidden="true">
                          <img
                            id="brand_img"
                            src="https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg"
                            alt="Card brand icon"
                          />
                        </div>
                        <select
                          onchange="changeTestCard(this)"
                          id="card_select"
                          class="card-selector__select"
                          aria-label="Test Card"
                          autocomplete="off"
                        >
                          <option value="visa">Visa</option>
                          <option value="mc">Mastercard</option>
                          <option value="amex">AMEX</option>
                        </select>
                        <div class="dropdown-icon" aria-hidden="true">
                          <img
                            src="{{ url_for('static', filename='img/dropdown.svg') }}"
                            alt="Dropdown caret"
                          />
                        </div>
                      </div>
                    </div>
                    <!-- Panel footer start -->
                    <div class="panel-footer">
                      <div id="card" class="card p-0 text-center">
                        <div class="card__front card__part">
                          <img
                            class="card__front-square card__square"
                            src="{{ url_for('static', filename='img/chip.png') }}"
                          />
                          <img
                            class="card__front-logo card__logo"
                            src="{{ url_for('static', filename='img/LogoAdyen.png') }}"
                          />
                          <p class="card_numer" id="cardNumber">4111 1111 1111 1111</p>
                          <div class="card__space-75">
                            <span class="card__label">Card holder</span>
                            <p class="card__info">John Doe</p>
                          </div>
                          <div class="card__space-25">
                            <span class="card__label">Expires</span>
                            <p class="card__info" id="expiry">03/30</p>
                          </div>
                        </div>
                        <div class="card__back card__part">
                          <div class="card__black-line"></div>
                          <div class="card__back-content">
                            <div class="card__secret">
                              <p class="card__secret--last" id="cvc">737</p>
                            </div>
                            <img
                              class="card__back-logo card__logo"
                              src="{{ url_for('static', filename='img/LogoAdyen.png') }}"
                            />
                          </div>
                        </div>
                      </div>

                      <!-- Under card footer -->
                      <div>
                        <div class="row m-0 text-center justify-content-center">
                          <!-- <div -->
                            <!-- class="col copyBtnsStyle panCopy mr-1"
                            onclick="copyToClipboard"
                          > -->
                            <button class="btn copyBtnsStyle" type="button" id="btn" data-clipboard-action="copy" data-clipboard-target="p#cardNumber.card_numer" onclick="resetCard()" title="Copy to clipboard">
                              PAN <i class="bi bi-clipboard"></i>
                            </button>
                          <!-- </div> -->
                          <!-- <div class="col copyBtnsStyle expiryCopy ml-1 mr-1"> -->
                            <button class="btn copyBtnsStyle" data-clipboard-action="copy" id="copy-expiry" data-clipboard-target="p#expiry" onclick="resetCard()" title="Copy to clipboard">
                              EXPIRY <i class="bi bi-clipboard"></i>
                            </button>
                          <!-- </div> -->
                          <!-- <div class="col copyBtnsStyle cvcCopy ml-1"> -->
                            <button class="btn copyBtnsStyle" data-clipboard-action="copy" id="copy-cvc" data-clipboard-target="p#cvc" onclick="turnCard()" title="Copy to clipboard">
                              CVC <i class="bi bi-clipboard"></i>
                            </button>
                          <!-- </div> -->
                        </div>
                      </div>
                    </div>
                    <!-- Panel footer ends -->
                  </div>
                  <div class="panel-heading">
                    <h4
                      class="panel-title text-left ml-3"
                      data-toggle="collapse"
                      href="#collapse1"
                      class="collapseText"
                    >
                      <p class="textFont testCardBtn">
                        test cards <i class="ml-2 bi bi-credit-card-fill"></i>
                        <i class="ml-4 bi bi-caret-up"></i>
                      </p>
                    </h4>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>

        <!-- config UI -->
        <div class="col-5 config-UI p-0">
          <div class="container p-5">
            <h4 class="config-Title">Design Your Own Checkout</h4>
            <!-- tabs -->
            <div class="container mt-2 p-0">
              <!-- tabs -->
              <ul class="nav nav-tabs tab-options" id="myTab" role="">
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    id="config-tab"
                    data-toggle="tab"
                    href="#configuration"
                    role="tab"
                    aria-controls="config"
                    aria-selected="true"
                    >Configuration</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="themes-tab"
                    data-toggle="tab"
                    href="#themes"
                    role="tab"
                    aria-controls="theme"
                    aria-selected="false"
                    >Theme & Styles</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="save-tab"
                    data-toggle="tab"
                    href="#save"
                    role="tab"
                    aria-controls="save"
                    aria-selected="false"
                    >Save your creation</a
                  >
                </li>
              </ul>
              <!------- First tab content --------->
              <div class="tab-content" id="myTabContent">
                <!-- Configuration content -->
                <div
                  class="tab-pane fade in show active config-content-panel"
                  id="configuration"
                  role="tabpanel"
                  aria-labelledby="home-tab"
                >
                  <!-- section title "Location" -->
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">Location</p>
                    </div>
                    <!-- section description -->
                    <div class="col-6 mb-2">
                      <p class="textFonts">
                        Choose your shopper location and language
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3 mb-2">
                      <p class="textFonts text-left ml-3">Shopper Location</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 mb-2">
                      <div class="country-selector textFonts">
                        <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>
                  <!-- line - section end -->
                  <hr class="mt-4 mb-4" />

                  <!-- section for hiding/showing payment methods -->
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">Payment Methods</p>
                    </div>
                    <!-- section description -->
                    <div class="col-6">
                      <p class="textFonts">
                        Choose which payment methods you would like to see at
                        checkout
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Card</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showCard"
                          data-toggle="toggle"
                          onchange="blockCard()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showCard"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Paypal</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showPaypal"
                          data-toggle="toggle"
                          onchange="blockPaypal()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showPaypal"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Ideal</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showIdeal"
                          data-toggle="toggle"
                          onchange="blockIdeal()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showIdeal"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Klarna</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showKlarna"
                          data-toggle="toggle"
                          onchange="blockKlarna()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showKlarna"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">AliPay</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showAliPay"
                          data-toggle="toggle"
                          onchange="blockAliPay()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showAliPay"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">GooglePay</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showGooglePay"
                          data-toggle="toggle"
                          onchange="blockGooglePay()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showGooglePay"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">WeChat</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showWeChat"
                          data-toggle="toggle"
                          onchange="blockWeChat()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showWeChat"
                        ></label>
                      </div>
                    </div>
                    <div class="col-6">
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Paysafecard</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showPaysafecard"
                          data-toggle="toggle"
                          onchange="blockPaysafecard()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showPaysafecard"
                        ></label>
                      </div>
                    </div>
                    <div id="clearpayCol" class="col-6">
                    </div>
                    <!-- title -->
                    <div id="clearpayBox" class="col-3">
                      <p class="textFonts text-left ml-3">Clearpay</p>
                    </div>
                    <!-- toggle -->
                    <div id="clearpayToggle" class="col-3">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showClearpay"
                          data-toggle="toggle"
                          onchange="blockClearpay()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showClearpay"
                        ></label>
                      </div>
                    </div>
                    <div id="trustlyCol" class="col-6" display="none">
                    </div>
                    <!-- title -->
                    <div id="trustlyBox" class="col-3" display="none">
                      <p class="textFonts text-left ml-3">Trustly</p>
                    </div>
                    <!-- toggle -->
                    <div id="trustlyToggle" class="col-3" display="none">
                      <div class="custom-control custom-switch text-center">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showTrustly"
                          data-toggle="toggle"
                          onchange="blockTrustly()"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="showTrustly"
                        ></label>
                      </div>
                    </div>

                  </div>
                  <!-- line - section end -->
                  <hr class="mt-4 mb-4" />

                  <!-- section titile "Instant Payment Methods" -->
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">Instant Payment Methods</p>
                    </div>

                    <!-- text -->
                    <div class="col-6">
                      <p class="textFonts">
                        Show instant payment methods at the top
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Enable
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="instantPay"
                          data-toggle="toggle"
                          onchange="showInstantPay()"
                        />
                        <label
                          class="custom-control-label"
                          for="instantPay"
                        ></label>
                      </div>
                    </div>
                  </div>

                  <!-- line - section end -->
                  <hr class="mt-4 mb-4" />

                  <!-- section titile "Payment Method Behaviour" -->
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">Payment Method Behaviour</p>
                    </div>

                    <!-- text -->
                    <div class="col-6">
                      <p class="textFonts">
                        Select how you'd like your payment methods to behave at
                        checkout
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Open first payment method
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="firstPayBox"
                          data-toggle="toggle"
                          checked
                        />
                        <label
                          class="custom-control-label"
                          for="firstPayBox"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Show stored payment methods
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="onlyStored"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="onlyStored"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Add billing address
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="billAdd"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="billAdd"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Include card holder name
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="holderName"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="holderName"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Show only saved Payment Methods
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="showPayMethod"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="showPayMethod"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Hide CVC field</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="hideCVC"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="hideCVC"
                        ></label>
                      </div>
                    </div>

                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Include placeholder data
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="placeholderData"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="placeholderData"
                        ></label>
                      </div>
                    </div>
                  </div>
                </div>

              <!-- Theme & Styles content - 2nd tab -->
              <div
                class="tab-pane fade config-content-panel"
                id="themes"
                role="tabpanel"
                aria-labelledby="profile-tab"
              >
                <!-- Fonts -->
                <div class="row mt-3">
                  <div class="col flex-fill section-title">
                    <p class="mb-1 titleFonts">Fonts</p>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6">
                      <p class="textFonts">
                        Choose your font styles and size
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Font</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="font-selector textFonts">
                        <select
                          onchange="changeFont(this)"
                          id="font_select"
                          class="font-selector__select"
                          aria-label="font"
                          autocomplete="off"
                        >
                          <option
                            value="Segoe UI, sans-serif"
                            style="
                              font-family: 'Segoe UI', sans-serif;
                            "
                          >
                            Segoe UI
                          </option>
                          <option
                            value="Roboto Condensed, sans-serif"
                            style="
                              font-family: 'Roboto Condensed', sans-serif;
                            "
                          >
                            Roboto Condensed
                          </option>
                          <option
                            value="Engagement, cursive"
                            style="font-family: 'Engagement', cursive;"
                          >
                            Engagement
                          </option>
                          <option
                            value="Verdana, sans-serif"
                            style="font-family: 'Verdana', sans-serif;"
                          >
                            Verdana
                          </option>
                           <option
                            value="Courier New, monospace"
                            style="font-family: 'Courier New', monospace;"
                          >
                            Courier New
                          </option>
                           <option
                            value="'Trebuchet MS, sans-serif"
                            style="font-family: 'Trebuchet MS', sans-serif;"
                          >
                            Trebuchet MS
                          </option> 
                          <option
                            value="Tahoma, sans-serif"
                            style="
                              font-family: 'Tahoma', sans-serif;
                            "
                          >
                            Tahoma
                          </option>
                          <option
                          value="PT Sans Caption, sans-serif"
                          style="
                            font-family: 'PT Sans Caption', sans-serif;
                          "
                          >
                            PT Sans Caption
                          </option>
                          <option
                            value="Arial, Helvetica, sans-serif"
                            style="
                              font-family: 'Arial', Helvetica, sans-serif;
                            "
                          >
                            Arial
                          </option>
                          <option
                            value="Lucida Console, monospace"
                            style="
                              font-family: 'Lucida Console', monospace;
                            "
                          >
                            Lucida
                          </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>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Size</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="form-group">
                        <div class="custom-control custom-switch">
                          <input
                            type="range"
                            class="form-control-range"
                            id="fontSize"
                            min="13"
                            max="17"
                            value="17"
                            onchange="fontWidth(this.value)"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Alignment</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="text-alignment textFonts">
                        <select
                          onchange="positionText(this)"
                          id="positionText"
                          class="textalign-selector__select"
                          autocomplete="off"
                        >
                          <option
                            selected
                            value="left"
                          >
                            Left
                          </option>
                          <option value="center"
                          >
                            Center
                          </option>
                          <option value="right"
                          >
                            Right
                          </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>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Colour</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div>
                        <input
                          type="color"
                          name=""
                          id="textColorPick"
                          onchange="textColor()"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Bold</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="boldImage">
                        <img src="static/img/bold.png" />
                        <button
                          type="button"
                          id="makeBold"
                          class="btn"
                          onclick="makeBold()"
                        ></button>
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Italic</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="italicImage">
                        <img src="static/img/italic.png" />
                        <button
                          type="button"
                          id="makeItalic"
                          class="btn"
                          onclick="makeItalic()"
                        ></button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- line and end of section -->
                <hr class="mt-4 mb-4" />

                <!-- Colours and styles -->
                <div class="row mt-3">
                  <div class="col flex-fill section-title">
                    <p class="mb-1 titleFonts">Colour & Style</p>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6">
                      <p class="textFonts">
                        Select the colour & style of your checkout
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Website background
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div>
                        <input
                          type="color"
                          name=""
                          id="bgColorPick"
                          onchange="backgroundColor()"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Active checkout background
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div>
                        <input
                          type="color"
                          name=""
                          id="dropinColorPick"
                          onchange="dropinColor()"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Collapsed payment methods background
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div>
                        <input
                          type="color"
                          name=""
                          id="dropinTabColorPick"
                          onchange="dropinTabColor()"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Pay button</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <input
                        type="color"
                        name=""
                        id="buttonColorPick"
                        onchange="setDynamicCSS()"
                      />
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Change button edges
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="form-group">
                        <input
                          type="range"
                          class="form-control-range"
                          id="buttonEdges"
                          onchange="buttonEdges(this.value);"
                          min="0"
                          max="25"
                          value="5"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Change checkout edges
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="form-group">
                        <input
                          type="range"
                          class="form-control-range"
                          id="bodyEdges"
                          onchange="bodyEdges(this.value);"
                          min="0"
                          max="25"
                          value="5"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Remove Borders</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="custom-control custom-switch">
                        <input
                          type="checkbox"
                          class="custom-control-input"
                          id="noBorder"
                          data-toggle="toggle"
                        />
                        <label
                          class="custom-control-label"
                          for="noBorder"
                        ></label>
                      </div>
                    </div>
                  </div>
                </div>
                <hr class="mt-4 mb-4" />
                <!-- Dimensions -->
                <div class="row mt-3">
                  <div class="col flex-fill section-title">
                    <p class="mb-1 titleFonts">Dimensions</p>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6">
                      <p class="textFonts">
                        Define the size of your checkout
                      </p>
                    </div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Checkout width</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-center">
                      <div class="form-group">
                        <input
                          type="range"
                          class="form-control-range"
                          id="changeWidth"
                          min="300"
                          max="700"
                          value="500"
                          onchange="dropinWidth(this.value)"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">Pay button width</p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-right">
                      <div class="form-group">
                        <input
                          type="range"
                          class="form-control-range"
                          id="payButtonWidth"
                          min="265"
                          max="665"
                          value="100%"
                          onchange="payButtonWidth(this.value)"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="row container mb-2 p-0">
                    <!-- text -->
                    <div class="col-6"></div>
                    <!-- title -->
                    <div class="col-3">
                      <p class="textFonts text-left ml-3">
                        Payment methods spacing
                      </p>
                    </div>
                    <!-- toggle -->
                    <div class="col-3 text-right">
                      <div class="form-group">
                        <input
                          type="range"
                          class="form-control-range"
                          id="paymentsSpacing"
                          min="0"
                          max="50"
                          value="0"
                          onchange="paymentsSpacing(this.value)"
                        />
                      </div>
                      <!-- toggle -->
                    </div>
                  </div>
                  <hr class="mt-4 mb-4" />

                  <div>
                    <button type="button" class="resetStyle" onclick="resetDynamicCSS()">
                      Reset Style
                    </button>
                  </div>
                </div>
              </div>

                <!-- Save your creation content -->
                <div
                  class="tab-pane fade config-content-panel"
                  id="save"
                  role="tabpanel"
                  aria-labelledby="save-tab"
                >
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">Adyen Configuration</p>
                    </div>
                    <div class="row container">
                      <!-- section description -->
                      <div class="col-12 mb-2">
                        <pre
                          id="configCode"
                        ><code id="configCode" class="configCode"></code></pre>
                      </div>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col flex-fill section-title">
                      <p class="mb-1 titleFonts">CSS Configuration</p>
                    </div>
                    <div class="row container">
                      <!-- section description -->
                      <div class="col-12 mb-2">
                        <pre
                          id="cssCode"
                        ><code class="css-code" id="cssCode" ></code></pre>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </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>

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

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

    <!-- Clipboard.js script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

    <!-- Clipboard JS -->
    <script>
      let panText = document.getElementById('cardNumber').innerText
      console.log(panText)
      document.getElementById('btn').setAttribute("data-clipboard-text", String(panText))
      let expiryText = document.getElementById('expiry').innerText
      document.getElementById('copy-expiry').setAttribute("data-clipboard-text", String(expiryText))
      let cvcText = document.getElementById('cvc').innerText
      document.getElementById('copy-cvc').setAttribute("data-clipboard-text", String(cvcText))
      var clipboard = new Clipboard(".btn")
      clipboard.on("success", function (e) {
        console.log(e)
      })
      clipboard.on("error", function (e) {
        console.log(e)
      })
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/languages/go.min.js"></script>
  </body>
</html>
