(function (el) {
    let tmpl = `
    <div class="scholarship-calculator-block {{page_type}}">
        <div class="scholarship-calculator">
            <div class="calculator-header">
                <ui-icon type="thin" name="{{calculator_icon}}"></ui-icon>
                <div class="calculator-title">{{calculator_title}}</div>
            </div>
            <div class="calculator-body">
                <div class="calculator-inputs">
                    <div class="input-box">
                        <label for="gpa">{{gpa_title}}</label>
                        <input type="text" name="gpa" id="gpa" value="" />
                        <div class="input-subtext">{{gpa_subtext}}</div>
                    </div>
                    <div class="input-box">
                        <label for="score">{{score_title}}</label>
                        <input type="text" name="score" id="score" value="" />
                        <div class="input-subtext">{{score_subtext}}</div>
                    </div>
                </div>
                <div class="result" id="result"></div>
                <div class="buttons">
                    <button id="calculate">{{button_label}}</button>
                </div>
            </div>
        </div>
    </div>
`;
    let styles = `.scholarship-calculator-block.content-page{max-width:1140px;margin:auto;}.scholarship-calculator-block .scholarship-calculator{border-radius:10px;overflow:hidden;border:1px solid #eee;width:fit-content;}.scholarship-calculator-block .scholarship-calculator .calculator-header{display:flex;flex-direction:row;color:#a80000;background:#f5f5f5;font-size:1.5rem;padding:.25rem .5rem;}.scholarship-calculator-block .scholarship-calculator .calculator-header ui-icon{vertical-align:middle;margin:.5rem;}.scholarship-calculator-block .scholarship-calculator .calculator-header .calculator-title{vertical-align:middle;}.scholarship-calculator-block .scholarship-calculator .calculator-body{padding:.5rem;display:flex;flex-direction:column;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs{display:flex;flex-direction:row;gap:1rem;width:fit-content;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box{display:flex;flex-direction:column;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box label{font-weight:600;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box input{border:1px solid rgba(0,0,0,.1);border-radius:.25rem;padding:.5rem 1rem;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box input:active,.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box input:focus{outline:0;box-shadow:0 0 0 2px rgba(0,0,0,.075);border-color:rgba(0,0,0,.3);}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs .input-box .input-subtext{font-size:.8rem;color:#888;}.scholarship-calculator-block .scholarship-calculator .calculator-body .result{margin:.5rem 0;}.scholarship-calculator-block .scholarship-calculator .calculator-body .result.warning{padding:.5rem;border:1px solid #c34f4f;background:#fee;border-radius:5px;}.scholarship-calculator-block .scholarship-calculator .calculator-body .result .sch-result{padding:.5rem;background:#f0f8ff;border:1px solid #e8e8f3;border-radius:5px;}.scholarship-calculator-block .scholarship-calculator .calculator-body .result .sch-result p{margin-bottom:0;max-width:100%;}.scholarship-calculator-block .scholarship-calculator .calculator-body .buttons{width:fit-content;}.scholarship-calculator-block .scholarship-calculator .calculator-body .buttons button{display:inline-block;background:#a80000;color:#fff;line-height:1;padding:.5rem 1.5rem;text-transform:uppercase;font-weight:600;font-size:.9rem;border-radius:.25rem;border:0;}@media screen and (min-width:768px) and (max-width:991px){.scholarship-calculator-block.content-page{width:calc(100% - 4rem);}.scholarship-calculator-block .scholarship-calculator{margin:auto;}}@media screen and (max-width:767px){.scholarship-calculator-block.content-page{width:calc(100% - 2rem);}.scholarship-calculator-block .scholarship-calculator{margin:auto;}.scholarship-calculator-block .scholarship-calculator .calculator-body .calculator-inputs{flex-direction:column;}}`;
    let data = `$data$`;
    let get = function (url, options) {
        return new Promise(function (resolve, reject) {

            window.fetch(url, options)
                .then(function (response) {
                    if (response.ok) {
                        return (response.headers && response.headers.get("content-type").includes('json') || response.headers.get("Content-Type").includes('json')) ? response.json() : response.text()
                    } else {
                        var err = new Error();
                        err.message = response.statusText;
                        err.stack = '';
                        throw new Error(err);
                    }
                })
                .then(function (response) {
                    return resolve(response);
                }).catch(function (error) {
                    console.log('http catch', error);
                    return reject(error);
                });

        });
    }
    
    if (el) {
        el.innerHTML = `${tmpl}<style>${styles}</style>`;
        let gpa = document.getElementById('gpa');
        let score = document.getElementById('score');
        let result = document.getElementById('result');
        let button = document.getElementById('calculate');
        let scholarships = `${data}`;
       
        button.addEventListener('click', function (e) {
            result.innerHTML = '';
            result.classList.remove('warning');
            if (!gpa.value.match(/\d+/)) {
                result.innerHTML = 'Please enter a valid GPA based on a 4.0 scale.';
                result.classList.add('warning');
            } else if (score.value != '' && !score.value.match(/\d+/)) {
                result.innerHTML = 'Please enter a valid ACT or SAT test score.';
                result.classList.add('warning');
            } else {
                result.innerHTML = 'Estimating your scholarship';
                get('https://www.nwciowa.edu/financial-aid/scholarships/calculator?cmd=estimate-scholarship&gpa=' + gpa.value + '&score=' + score.value).then(function (html) {
                    result.innerHTML = html; 
                }).catch(function (response) {
                    result.innerHTML = 'The server has returned an error. Please try your request again later.';
                    result.classList.add('warning');
                }); 
                
            }
        }); 
        

    }
})(document.querySelector('#'));