{% extends 'base.html.twig' %}

{% block title %}Saul Morales Pacheco | Donation{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('css/css.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pe-icon-7-stroke.css') }}">
    <link rel="stylesheet" href="{{ asset('css/slick.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/donation.css') }}?ver=2.0.1">
    <link rel="manifest" href="{{ asset('manifest.json') }}" />
{% endblock %}

{% block javascripts %}
    <!--[if lt IE 9]>
    <script src="{{ asset('js/html5shiv.min.js') }}"></script>
    <script src="{{ asset('js/respond.min.j') }}"></script>
    <![endif]-->
{% endblock %}

{% block body %}
    <main>
        <section class="full-page">
            <div class="contact-form">
                <div class="overlay">
                    <div class="kayo-container">
                        <div class="mrkayo-main-title">
                            <h2>
                                Contribución
                                <span class="kayo-line"></span>
                            </h2>
                        </div>
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2 col-md-12 col-md-offset-0 col-sm-10 col-sm-offset-1 center-donation">
                                <form class="kayo-form" id="donation">
                                    <div class="input-row">
                                        <div class="form-group">
                                            <label>
                                                <select name="currency" class="form-control">
                                                    <option value="COP" selected>COP</option>
                                                    <option value="USD">USD</option>
                                                </select>
                                            </label>
                                            <label>
                                                <input name="amount" class="form-control" min="20000" value="20000" placeholder="100000" type="number" required>
                                            </label>
                                        </div>
                                        <div>
                                            <button class="btn kayo-btn-1 btn-block btn-rgba" type="submit">
                                                <i class="fa fa-send-o"></i>Contribuir
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}
{% block javascripts_footer %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://checkout.epayco.co/checkout.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-F2G25Y6JZS"></script>
    <script src="{{ asset('js/donation.js') }}?ver=2.0.1"></script>
    <script>
        const handlerEpayco = ePayco.checkout.configure({
            key: 'bfbc5e588df82386b67e71cfc23125f2',
            test: false
        });
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-F2G25Y6JZS');
    </script>
{% endblock %}