{% extends 'admin-layout.html' %}


{% block styles %}
{{super()}}
{% if admin_view.extra_css %}
{% for css_url in admin_view.extra_css %}
<link href="{{ css_url }}" rel="stylesheet">
{% endfor %}
<link rel="stylesheet" href="{{static_url_for(filename='plugins/bootstrap4-editable/css/bootstrap-editable.css')}}">
<link rel="stylesheet" href="{{static_url_for(filename='plugins/select2/select2.css')}}">
{% endif %}

<style>
    #domain {
        direction: ltr
    }

    .column-header {
        text-align: center;
    }

    .breadcrumb {
        display: none;
    }
</style>
{% endblock %}


{% block tail_js %}
{{super()}}
<script src="{{ static_url_for( filename='plugins/bootstrap4-editable/js/bootstrap-editable.min.js' ) }}"></script>
{% if admin_view.extra_js %}
{% for js_url in admin_view.extra_js %}
<script src1="{{ js_url }}" type="text/javascript"></script>
{% endfor %}
{% endif %}
<!-- Include the default stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
<link href="https://unpkg.com/multiple-select@1.5.2/dist/themes/bootstrap.min.css" rel="stylesheet">

<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>     -->

<script>
    $("#show_domains").multipleSelect({ width: '100%' });

    if ($("#domain").length > 0) {
        var selectElement = document.getElementById("mode");
        var groups = [
            { label: `{{_("Direct")}}`, options: ["direct", "old_xtls_direct"] },
            { label: `{{_("Panel Link")}}`, options: ["sub_link_only"] },
            { label: `{{_("Bridge Servers")}}`, options: ["cdn", "auto_cdn_ip", "worker", "relay"] },
            { label: `{{_("Fake")}}`, options: ["reality", "fake"] }
        ];

        var options = Array.from($("#mode option"));
        // Remove existing options
        while (selectElement.firstChild) {
            selectElement.removeChild(selectElement.firstChild);
        }
        for (var i = 0; i < groups.length; i++) {
            var group = groups[i];
            var optgroup = document.createElement("optgroup");
            optgroup.label = group.label;


            for (var j = 0; j < group.options.length; j++) {
                for (var j = 0; j < options.length; j++) {
                    var option = options[j];
                    if (group.options.includes(option.value)) {
                        optgroup.appendChild(option.cloneNode(true));
                    }
                }
            }

            selectElement.appendChild(optgroup);
        }
    }
    $('.form-group:not(:has(.custom-switch)) > input[type="checkbox"]').each(function () {
        var parent = $(this).closest('.form-group');
        var label = parent.find('label').hide().text();
        $(this).wrap('<div class="custom-control custom-switch"></div>');
        $(this).addClass('custom-control-input');
        $(this).parent('.custom-control').append('<label class="custom-control-label" for="' + $(this).attr('id') + '">' + label + '</label>');
    });
    function hide_domain_elements() {
        console.log("test")
        if ($("#mode").val() == "sub_link_only") {
            $("#cdn_ip").parent().hide();
            //$("#mode").parent().hide();
            $("#show_domains").parent().show()
        } else {
            $("#cdn_ip").parent().show();
            //$("#mode").parent().show();
            $("#show_domains").parent().hide()


            if ($("#mode").val() == 'direct') {
                $("#cdn_ip").parent().hide();
            } else {
                $("#cdn_ip").parent().show();
            }
            {% autoescape false %}
            if ($("#mode").val() == 'reality') {

                $("#servernames").parent().show();
                $("#servernames").parent().find(".control-label").html(`{{_('config.reality_server_names.label')}}`)
                $("#servernames").parent().find(".help-block").html(`{{_('config.reality_server_names.description')}}`)

                $("#grpc").parent().parent().show()
                $("#domain").parent().find(".control-label").html(`{{_('config.reality_fallback_domain.label')}}`)
                $("#domain").parent().find(".help-block").html(`{{_('config.reality_fallback_domain.description')+("<a target='_blank' href='" +url_for('admin.Actions:get_some_random_reality_friendly_domain',test_domain=domain)+"'>"+_('Example Domains')+"</a>")}}`)
            } else {
                if ($("#mode").val() == 'cdn' || $("#mode").val() == 'auto_cdn_ip') {
                    $("#servernames").parent().show();
                    $("#servernames").parent().find(".control-label").html(`{{_('domain.domain_fronting.label')}}`)
                    $("#servernames").parent().find(".help-block").html(`{{_('domain.domain_fronting.description')}}`)
                } else {
                    $("#servernames").parent().hide();
                }

                $("#grpc").parent().parent().hide()
                $("#domain").parent().find(".control-label").html(`{{_('domain.domain')}}`)
                $("#domain").parent().find(".help-block").html(`{{_('domain.description')}}`)
            }

            {% endautoescape %}

        }
    }
    $("#sub_link_only").on('change', hide_domain_elements)
    $("#mode").on('change', hide_domain_elements)
    hide_domain_elements()
</script>

{% endblock %}










{% block body %}
{# store the jinja2 context for form_rules rendering logic #}
{% set render_ctx = h.resolve_ctx() %}
{% endblock %}


{% block rtl_styles %}
{{super()}}
<style>
    #cdn_ip {
        direction: ltr;
    }

    #expiry_time,
    #last_reset_time,
    #current_usage_GB,
    #usage_limit_GB,
    #package_days,
    #start_date {
        direction: ltr;
        text-align: right;
    }
</style>
{% endblock %}