{% 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="{{url_for('static',filename='plugins/bootstrap4-editable/css/bootstrap-editable.css')}}">
<link rel="stylesheet" href="{{url_for('static',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="{{ url_for('static', 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 %}  