<style>
  .divido-calculator {
    padding: 10px 20px 20px 20px;
    text-shadow: none;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #555;
    border-color: #d9d7ce #c8c6c1 #B0AEA6;
    margin: 20px;
  }
  
  #divido-checkout {
    margin: 0px;
  }
  
  .divido-calculator h1 {
    color: white;
    font-size: 24px;
  }
  
  @media screen and (min-width: 550px) {
    .divido-calculator h1 {
      font-size: 33px;
    }
  }
  
  .divido-calculator dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0
  }
  
  .divido-calculator dt, .divido-calculator dd {
    float: left;
    padding: 2px 0px;
    margin: 0
  }
  
  .divido-calculator > dl > dt, .divido-calculator > dl > dd {
    min-width: 150px;
  }
  
  .divido-calculator > dl > dt, .divido-calculator > dl > dd {
    width: 100%;
  }
  
  .divido-calculator > dl > dt {
    margin-bottom: 20px;
  }
  
  @media screen and (min-width: 960px) {
    .divido-calculator > dl > dt, .divido-calculator > dl > dd {
      width: 50%;
    }
    
    .divido-calculator > dl > dt {
      margin-bottom: auto;
    }
  }
  
  .divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd {
    width: 100%;
  }
  
  .divido-calculator div.divido-info dl dd {
    padding-left: 5px;
  }
  
  @media screen and (min-width: 350px) {
    .divido-calculator div.divido-info dl dt {
      width: 70%;
    }
    
    .divido-calculator div.divido-info dl dd {
      width: 30%;
    }
  }
  
  @media screen and (min-width: 450px) {
    .divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd {
      width: 50%;
    }
  }
  
  @media screen and (min-width: 550px) {
    .divido-calculator div.divido-info dl dt {
      width: 40%;
    }
    
    .divido-calculator div.divido-info dl dd {
      width: 60%;
    }
  }
  
  @media screen and (min-width: 1080px) {
    .divido-calculator div.divido-info dl dt {
      width: 30%;
    }
    
    .divido-calculator div.divido-info dl dd {
      width: 70%;
    }
  }
  
  .divido-calculator input[type=range] {
    -webkit-appearance: none;
    display: inline-block;
    width: 80%;
    border: 0px;
    padding: 0px;
  }
  
  @media screen and (min-width: 450px) {
    .divido-calculator input[type=range] {
      width: 85%;
    }
  }
  
  @media screen and (min-width: 550px) {
    .divido-calculator input[type=range] {
      width: 90%;
    }
  }
  
  .divido-calculator select {
    text-transform: none;
    width: 100%;
  }
  
  @media screen and (min-width: 960px) {
    .divido-calculator select {
      width: 80%;
    }
  }
  
  .divido-calculator div.description {
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 20px;
  }
  
  .divido-calculator .divido-info {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }
  
  .divido-calculator .divido-deposit span {
    display: inline-block;
    margin-left: 4px;
    line-height: 15px;
    vertical-align: top;
  }
  
  .divido-calculator input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border: none;
    border-radius: 3px;
  }
  
  .divido-calculator label {
    display: block;
    clear: both;
    font-weight: bold;
  }
  
  .divido-calculator input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -4px;
  }
  
  .divido-calculator input[type=range]:focus {
    outline: none !important;
    border: 0px !important;
  }
  
  .divido-calculator .divido-logo {
    width: 140px;
    height: 42px;
    display: block;
    font-size: 20px;
    line-height: 1;
    text-indent: -9999px;
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-140x42.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .divido-calculator .divido-logo-sm {
    width: 75px;
    height: 23px;
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-75x23.png');
  }
  
  .divido-calculator .divido-info {
    padding: 20px;
  }
  
  .divido-them-light .divido-info {
    background: #f9f9f9;
  }
  
  .divido-theme-light a.divido-logo {
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-140x42.png');
  }
  
  .divido-theme-light a.divido-logo-sm {
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-75x23.png');
  }
  
  .divido-theme-light {
    background-color: #fff;
    color: #3E4F8B;
  }
  
  .divido-theme-light p {
    color: #3E4F8B !important;
  }
  
  .divido-theme-light input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
  }
  
  .divido-theme-light input[type=range] {
    background-color: transparent;
  }
  
  .divido-theme-light input[type=range]::-webkit-slider-runnable-track {
    background: #999;
  }
  
  .divido-theme-light input[type=range]::-webkit-slider-thumb {
    background: #3E4F8B;
  }
  
  .divido-theme-blue .divido-info {
    background: #f9f9f9;
    color: #000;
  }
  
  .divido-theme-blue a.divido-logo {
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-140x42.png');
  }
  
  .divido-theme-blue a.divido-logo-sm {
    background-image: url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-75x23.png');
  }
  
  .divido-theme-blue {
    background-color: #3E4F8B;
    color: #fff;
  }
  
  .divido-theme-blue p {
    color: #fff !important;
  }
  
  .divido-theme-blue input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
  }
  
  .divido-theme-blue input[type=range] {
    background-color: transparent;
  }
  
  .divido-theme-blue input[type=range]::-webkit-slider-runnable-track {
    background: #999;
  }
  
  .divido-theme-blue input[type=range]::-webkit-slider-thumb {
    background: #fff;
  }
  
  .divido-btn {
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Arial;
    color: #ffffff;
    font-size: 11px;
    background: #3E4F8B;
    padding: 3px 7px 5px 7px !important;
    text-decoration: none;
    border: 1px solid #296AB3;
  }
  
  .divido-btn :hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
  
  .divido-widget img {
    display: inline-block;
  }
  
  .divido-calculator select {
    color: #000;
  }
</style>
<div id="divido-checkout" data-divido-calculator class="divido-calculator divido-theme-blue" data-divido-amount="{{ grand_total }}" data-divido-plans="{{ plan_list }}">
  <h1>
    <a href="https://www.divido.com" target="_blank" class="divido-logo divido-logo-sm" style="float:right;">{{ text_divido }}</a>
    {{ text_checkout_title }}
  </h1>
  <div style="clear:both;"></div>
  <dl>
    <dt>
      <span data-divido-choose-finance data-divido-label="{{ text_choose_plan }}" data-divido-form="divido_finance"></span>
    </dt>
    <dd>
      <span class="divido-deposit" data-divido-choose-deposit data-divido-label="{{ text_choose_deposit }}" data-divido-form="divido_deposit"></span>
    </dd>
  </dl>
  <div class="description">
    <strong>
      <span data-divido-agreement-duration></span> {{ text_monthly_payments }}
      <span data-divido-monthly-instalment></span>
    </strong>
  </div>
  <div class="divido-info">
    <dl>
      <dt>{{ text_term }}</dt>
      <dd><span data-divido-agreement-duration></span> {{ text_months }}</dd>
      <dt>{{ text_monthly_installment }}</dt>
      <dd><span data-divido-monthly-instalment></span></dd>
      <dt>{{ text_deposit }}</dt>
      <dd><span data-divido-deposit></span></dd>
      <dt>{{ text_credit_amount }}</dt>
      <dd><span data-divido-credit-amount-rounded></span></dd>
      <dt>{{ text_amount_payable }}</dt>
      <dd><span data-divido-total-payable-rounded></span></dd>
      <dt>{{ text_total_interest }}</dt>
      <dd><span data-divido-interest-rate></span></dd>
    </dl>
  </div>
  <div class="clear"></div>
  <p>{{ text_redirection }}</p>
</div>

<div class="buttons">
  <div class="pull-right">
    <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}"/>
  </div>
</div>

<script>
    (function ($) {
        $(function () {
            $.getScript('{{ merchant_script }}', function () {
              divido_calculator($('#divido-checkout'));
            });
            
            $('#button-confirm').on('click', function () {
                var finance_elem = $('select[name="divido_finance"]');
                var deposit = $('[name="divido_deposit"]').val();
                var finance;
                
                if (finance_elem.length > 0) {
                    finance = finance_elem.val();
                } else {
                    finance = $('[data-divido-calculator]').data('divido-plans');
                }
                
                var data = {
                    finance: finance,
                    deposit: deposit
                };
                
                $.ajax({
                    type: 'post',
                    url: 'index.php?route=extension/payment/divido/confirm',
                    data: data,
                    dataType: 'json',
                    cache: false,
                    beforeSend: function () {
                        $('#button-confirm').button('loading');
                    },
                    complete: function () {
                        $('#button-confirm').button('reset');
                    },
                    success: function (data) {
                        if (data.status == 'ok') {
                          location = data.url;
                        } else {
                          message = data.message || '{{ generic_credit_req_error }}';
                          $('#divido-checkout').prepend('<div class="alert alert-warning alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + message + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                        }
                    }
                });
            });
        });
    })(jQuery);
</script>