{% from 'bootstrap4/form.html' import render_form %}
{% from 'macros.html' import modal %}
{% extends 'admin-layout.html' %}

{% block tail %}
{{super()}}

{{modal('quicksetup',_('Save Link'),_('admin.save_panel_link',adminlink=admin_link),show=Fales)}}

<script>
    disable_notif = false
    $(document).on('submit', 'form', function () {
        disable_notif = true
    });
    window.addEventListener('beforeunload', function (e) {
        if (disable_notif) return
        // Cancel the event
        e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
        // Chrome requires returnValue to be set
        $("#quicksetup").modal()
        e.returnValue = 'Save';
        return "save"
    });
</script>
{% endblock %}

{% macro ip_btn(ip) -%}
{% if ip %}
<div class="btn-group">
    <a href="#" data-copy="{{ip}}" class="btn btn-secondary copy-link"><i class="fa-regular fa-copy"></i></a>

    <a href="#" data-copy="{{ip}}" class="btn btn-primary copy-link">{{ip}}</a>
</div>
{% else %}
-
{% endif %}
{%- endmacro -%}



{% block body %}
{{super()}}


<div class="row">


    <div class="card col-12">
        <div class="card-header">{{_("admin.quicksetup.title")}}</div>
        <div class="card-body">

            <div class="row">
                <div class="card-columns">
                    {% if ipv4 or ipv6 %}
                    {{_('admin.quicksetup_intro',ipv4=ip_btn(ipv4),ipv6=ip_btn(ipv6))}}
                    {%endif%}
                    {{render_form(form,form_type="",extra_classes="card-columns1")}}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-group {
        display: inline-block;
        width: 100%;
    }

    fieldset {
        margin: 20px 0;
    }

    legend {
        background: transparent;
        margin-bottom: 20px;

    }

    @media (min-width: 576px) {
        .card-columns {
            column-count: 2;
        }
    }

    @media (min-width: 768px) {
        .card-columns {
            column-count: 2;
        }
    }
</style>
{% endblock %}