{% from 'bootstrap4/utils.html' import render_messages %}
<!-- {% from 'macros.html' import render_toast %} -->

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}| {{_("master.page-title")}}</title>
  {% block head_meta %}
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico')}}">
  
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% endblock %}
  <!-- Bootstrap 4 -->
  {% block styles %}
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="{{ url_for('static', filename="plugins/font-awesome/css/font-awesome.min.css" ) }}">
  <link rel="stylesheet" href="{{url_for('static',filename='css/font-awesome.css')}}" type="text/css">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ url_for('static', filename="css/adminlte.css" ) }}">


  <!-- <link rel="stylesheet" href="{{url_for('static',filename='plugins/datatables/dataTables.bootstrap4.css')}}">
  <link rel="stylesheet" href="{{url_for('static',filename='plugins/datatables/extensions/Responsive/css/dataTables.responsive.css')}}">
  <link rel="stylesheet" href="{{url_for('static',filename='plugins/datatables/extensions/Responsive/css/responsive.bootstrap4.min.css')}}"> -->

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/dataTables.bootstrap4.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.bootstrap4.min.css">

  <link rel="stylesheet" href="{{ url_for('static', filename="css/custom.css" ) }}">  
  % if get_locale()=='fa'
  <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap4-rtl.min.css')}}">
  <link rel="stylesheet" href="{{url_for('static',filename='css/adminlte.fa.css')}}">
  {% block rtl_styles %}
  {% endblock %}  
  % endif
{% endblock %}

{% block head_tail %}
{% endblock %}

</head>
<body class="hold-transition layout-fixed {% block bodyclass %}sidebar-collapse{%endblock%}">
    {% block page_body %}
<div class="wrapper">
    {% block nav_bar %}
    {% endblock %}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        
        <div class="content-header">
          <div class="container-fluid">
            {% block body_header%}
            
            {%endblock%}
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
    
    

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">

        
        {% block messages %}
        {# layout.messages() #}
        {# render_messages() #}

    {% endblock %}

    
    {% block body %}{% endblock %}

        
        
        <!-- END TYPOGRAPHY -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <!-- Control Sidebar -->
  
  <!-- /.control-sidebar -->

  <footer class="main-footer d-flex flex-wrap justify-content-between align-items-center " dir="ltr">
    <div class="col-md-4 d-flex align-items-center">
      
      <strong><span class="mb-3 mb-md-0 text-muted">© 2023 Hiddify <span class="badge">{{version}}</span> <a
        href="https://github.com/hiddify/hiddify-config/wiki">Source Code</a></span> 
        </strong>
    </div>

    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
      <li class="ms-3"><a class="text-muted" href="https://twitter.com/intent/follow?screen_name=hiddify1">
        <i class="fa-brands fa-square-twitter fa-margin"></i> Twitter </a></li>  
      <li class="ms-3"><a class="text-muted" href="https://t.me/hiddify">&nbsp; <i class="fa-brands fa-telegram fa-margin"></i> Telegram</a></li>
    </ul>
    
  </footer>
  
</div>
<!-- ./wrapper -->



<div class="modal fade" id="share-qr-code" role="dialog" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">{{_('user.home.share-title')}}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
                
            </div>
            <div class="modal-body">
                <center>
                  <div class="btn-group">
                    <a id='qrcode-link' class="btn btn-primary copy-link" href=""><i class="fa-regular fa-copy"></i> {{_("copy")}} </a>
                    <a id="share-link-redirect" class="btn btn-success copy-link" href=""><i class="fa-solid fa-share-from-square"></i> {{_('clickable copy')}}</a>
                    <a target="_blank" id="share-link-open" class="btn btn-secondary" href=""><i class="fa-solid fa-arrow-up-right-from-square"></i> {{_('open')}}</a>
                  </div>
                    <br />
                    <div id="qrcode" style="margin:10px;"></div>
                </center>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close" data-dismiss="modal">{{_('close')}}</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block tail_js %}

<!-- jQuery -->
<script src="{{ url_for('static', filename="plugins/jquery/jquery.min.js" ) }}"></script>
<script src="{{ url_for('static', filename="js/popper.min.js" ) }}"></script> 
<script src="{{ url_for('static', filename="plugins/bootstrap/js/bootstrap.min.js" ) }}"></script>


<!-- <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> -->

<script src="{{ url_for('static', filename="js/moment.min.js" ) }}"></script>
<!-- {#<script src="{{ url_for('static', filename="plugins/select2/select2.min.js" ) }}"></script>#} -->





<!-- Bootstrap 4 -->

<!-- <script src="{{ url_for('static', filename="plugins/bootstrap/js/bootstrap.bundle.min.js" ) }}"></script> -->

<script src="{{ url_for('static', filename='plugins/datatables/jquery.dataTables.min.js' ) }}"></script>
<script src="{{ url_for('static', filename='plugins/datatables/dataTables.bootstrap4.js' ) }}"></script>
<script src="{{ url_for('static', filename='plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js' ) }}"></script>
<script src="{{ url_for('static', filename='plugins/datatables/extensions/Responsive/js/responsive.bootstrap4.min.js' ) }}"></script>
<!-- <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap4.min.js"></script> -->




<!-- AdminLTE App -->
<script src="{{ url_for('static', filename='js/adminlte.js' ) }}"></script>
<script src="{{url_for('static',filename='js/qrcode.js')}}"></script>
<!-- <script src="{{url_for('static',filename='js/demo.js')}}"></script> -->



<script>
  function copy_click(e) {
    e.preventDefault();
    console.log(this); console.log(e);
    var link = this.getAttribute('data-copy')|| this.href;
    try {
      navigator.clipboard.writeText(link).then(function () {
        alert("{{_('user.home.link.success-copy')}} \n" + link);
      }, function (err) {
        window.prompt("{{_('user.home.link.manual-copy')}}: Ctrl+C, Enter", link);
      });
    } catch (error) {
      window.prompt("{{_('user.home.link.manual-copy')}}: Ctrl+C, Enter", link);
    }
  }
  
  w = Math.min(window.innerWidth, window.innerHeight) * .5;
  qrcode = new QRCode(document.getElementById("qrcode"), { width: w, height: w, correctLevel: 1 });
  function share_click(e) {
        e.preventDefault();
        
        var link = this.getAttribute('data-copy')|| this.href;
        qrcode.clear()
        qrcode.makeCode(link);
        hrefshare = "https://{{domain}}/{{hconfig(ConfigEnum.proxy_path)}}/redirect/" + link.replaceAll('://', '%3A%2F%2F')
        $('#qrcode-link')[0].href = link
        $('#share-link-open')[0].href = link
        $('#share-link-redirect')[0].href = hrefshare
        $('#share-link-open').show()
        if (link.startsWith("http"))
            $('#share-link-redirect').hide()
        else
            $('#share-link-redirect').show()

        if (this.getAttribute('data-copy')){
          $('#share-link-redirect').hide()
          $('#share-link-open').hide()
        }
        $('#share-qr-code').modal('show');
    }

    $(document).ready(function () {
      % set cats={'error':'danger'}
      {% for cat, msg in get_flashed_messages(with_categories=True) %}
      $(document).Toasts('create', {
          class: 'bg-{{cats.get(cat,cat)}}',
          position: '{{'topLeft' if get_locale()=='fa' else 'topRight'}}' ,
          
          
          body: `{{msg}}`
        })
      {% endfor %}
    });
  
</script>



{% endblock %}

{% block tail %}
<script>
  $(document).ready(function () {
    
  $('a.copy-link').click(copy_click)
  $('a.share-link').click(share_click)
  //   $("input").each((i,e)=>{
  //     if (e.getAttribute('title')){
  //       e.parentNode.append
  //     }
  //   })
  })



</script>
{% endblock %}
</body>
</html>

