{% set fee_options_dynamic = "dynamic" in fee_options %}

<div class="fee_container">
    <div>
        <label><input type="checkbox" class="inline" name="subtract" id="subtract" {% if subtract %}checked{% endif %} 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 paid off from the transaction amount.") }}<br><br>
                    {{ _("Otherwise, the fees will be paid 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="{{ subtract_from }}" 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_options_dynamic" name="fee_options" value="dynamic" onclick="showFeeOption(this)" {% if fee_options_dynamic %}checked{% endif %}>{{ _("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);" {% if not fee_options_dynamic %}checked{% endif %}>{{ _("manual") }}</label>
    </div>
    <br>
    <div id = "fee_manual" style="display: {% if fee_options_dynamic %}none{% else %}block{% endif %}">
        {{ _("Fee rate:") }}<br>
        {% set min_fee = 0.1 if specter.is_liquid else 1 %}
        <input type="number" class="fee_rate" name="fee_rate" id="fee_rate" min="{{min_fee}}" step="any" autocomplete="off" {% if not fee_options_dynamic %}value="{{ fee_rate }}"{% endif %}> sat/vbyte
        <div class="note">
            {{ _("leave blank to set automatically, {} sat/vbyte is the minimal fee rate.".format(min_fee)) }}
        </div>
    </div>
    <div id ="fee_dynamic" style="display: {% if fee_options_dynamic %}block{% else %}none{% endif %}">
        <div id="blocks"></div>
        <input type="range" style="width: 12em" min="{{fee_estimation_data['minimumFee']}}" max="{{fee_estimation_data['fastestFee'] * 1.4}}" value="{{ fee_estimation }}" step="1" id="fees_slider" oninput="dynamicFeeUpdated()">
        <input type="hidden" id="fee_rate_dynamic" name="fee_rate_dynamic" value="0">
        <div>
            {{ _("Estimated speed:") }} <span id="fee_rate_speed_text"></span>
            <br>
            <span class="note">({{ _("Fee rate:") }} <span id="fee_rate_dynamic_text"></span> sat/vbyte)</span>
        </div>
    </div>
    <br>
    <label  {% if specter.is_liquid %}style="display: none"{% endif %}><input type="checkbox" class="inline" name="rbf" id="rbf" {% if rbf %}checked{% endif %}> {{ _("RBF Enabled") }}</label>
</div>

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

    function showFeeOption(myRadio) {

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

    function dynamicFeeUpdated() {
        let feesSlider = document.getElementById('fees_slider');
        document.getElementById('fee_rate_dynamic_text').innerText = feesSlider.value;
        document.getElementById('fee_rate_dynamic').value = feesSlider.value;
        let minFee = parseInt("{{fee_estimation_data['minimumFee']}}");
        let hourFee = parseInt("{{fee_estimation_data['hourFee']}}");
        let halfHourFee = parseInt("{{fee_estimation_data['halfHourFee']}}");
        let fastestFee = parseInt("{{fee_estimation_data['fastestFee']}}");
        if (feesSlider.value <= minFee + ((hourFee - minFee) / 2)) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Very slow") }}';
        } else if (feesSlider.value > minFee + ((hourFee - minFee) / 2) && feesSlider.value < hourFee) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Slow") }}';
        } else if (feesSlider.value >= hourFee && feesSlider.value < halfHourFee) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Medium (1 hour)") }}';
        } else if (feesSlider.value >= halfHourFee && feesSlider.value < fastestFee) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Fast (30 minutes)") }}';
        } else if (feesSlider.value >= fastestFee && feesSlider.value < fastestFee * 1.2) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Very fast (10 minutes)") }}';
        } else if (feesSlider.value >= fastestFee * 1.2) {
            document.getElementById('fee_rate_speed_text').innerText = '{{ _("Overpaid! (10 minutes)") }}';
        }
    }

    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>
