<div class="fee_container">
    <div>
        <label><input type="checkbox" class="inline" name="subtract" id="subtract" value="1" onchange="toggleSubtractFrom(this)"> Subtract fees from amount</label>
        <div class="tool-tip" style="text-align: center;">
            <i class="tool-tip__icon">i</i>
            <p class="tool-tip__info">
                <span class="info">
                    <span class="info__title">Subtract fees from amount<br><br></span>
                    If checked, the transaction fees will be payed off from the transaction amount.<br><br>
                    Otherwise, the fees will be payed as an added cost in addition to the amount sent.
                </span>
            </p>
        </div>
    </div>
    <span id="subtract_from" class="hidden"><br>Subtract from recipient number: <input id="subtract_from_input" name="subtract_from" type="number" min="1" value="1" step="1" style="width: 80px; min-width: 80px;"><br></span>
    <br>
    <div>
        Fees: 
        <label><input type="radio" class="inline" style="margin: 0 10px 0 20px;" id="fee_option_dynamic" name="fee_options" value="dynamic" onclick="showFeeOption(this)" checked>dynamic</label>
        <label><input type="radio" class="inline" style="margin: 0 10px 0 20px"  id="fee_option_manual" name="fee_options" value="manual" onclick="showFeeOption(this);">manual</label>
    </div>
    <br>
    <div id = "fee_manual" style="display: none">
        Fee rate:<br>
        <input type="number" class="fee_rate" name="fee_rate" id="fee_rate" min="1" step="any" autocomplete="off"> sat/vbyte
        <div class="note">
            leave blank to set automatically, 1 sat/vbyte is the minimal fee rate.
        </div>
    </div>
    <div id ="fee_dynamic" style="display: block">
        <div id="blocks"></div>
        <input type="range" style="width: 12em" min="1" max="25" value="6" step="1" id="slider_confTime" oninput="loadDynamicFees()">
        <input type="hidden" id="fee_rate_dynamic" name="fee_rate_dynamic" value="0">
        <div>
            Fee rate: <span id="fee_rate_dynamic_text"></span>
        </div>
    </div>
    <br>
    <label><input type="checkbox" class="inline" name="rbf" id="rbf" value="1" checked> RBF Enabled</label>
</div>

<script>
    document.addEventListener("DOMContentLoaded", loadDynamicFees);

    function showFeeOption(myRadio) {

        if (myRadio.value == 'dynamic') {
            setVisibility('fee_manual', 'none');
            setVisibility('fee_dynamic', 'block');
        } else {
            setVisibility('fee_manual', 'block');
            setVisibility('fee_dynamic', 'none');
        }
    }

    async function fetchDynamicFees() {
        try {
            let url="{{ url_for('fees', blocks='numberofblocksplaceholder')}}".replace('numberofblocksplaceholder', document.getElementById('slider_confTime').value)
            const response = await fetch(
                url,
                {
                    method: 'GET'
                }
            );
            let res = await response.json();
            res.feerate = parseInt((parseFloat(res.feerate) / 1000) * 1e8);
            return res;
        } catch(e) {
            console.log('Caught error:', e);
            return { success: false, error: e };
        }
    }

    async function loadDynamicFees() {
        let feesJSON = await fetchDynamicFees();
        let blocks = 'Dynamic fees are currently not available.';

        if (!feesJSON.hasOwnProperty('errors')) {
            let fee = feesJSON.feerate;
            blocks = feesJSON.blocks + ' blocks';
            document.getElementById('fee_rate_dynamic_text').innerHTML = fee.toString().concat(' sat/vbyte');
            document.getElementById('fee_rate_dynamic').value = fee;
        } else {
            document.getElementById('fee_rate_dynamic_text').innerHTML = 'will be set by Bitcoin Core automatically';
            document.getElementById('fee_rate_dynamic').value = 0;
        }

        document.getElementById('blocks').innerHTML = 'Confirmation time: '.concat(blocks);
    }

    function toggleSubtractFrom(checkbox) {
        if (checkbox.checked && (amounts.length > 1 || !document.getElementById('ui-radio-btn').checked)) {
            document.getElementById('subtract_from').style.display = 'block';
            document.getElementById('coin-selection-row').style['margin-top'] = '90px';
        } else {
            document.getElementById('subtract_from').style.display = 'none';
            document.getElementById('coin-selection-row').style['margin-top'] = '30px';
        }
    }
</script>
