{% extends "master.html" %}
{% block title %}{{_('user.home.title')}}{% endblock %}



{% block body %}








{% include "home/usage.html" %}


<div class="row">
    <div class="col-12">
        <!-- Custom Tabs -->
        <div class="card">
            <div class="card-header d-flex p-0">
                <h3 class="card-title p-1"> </h3>
                <ul class="nav nav-pills ml-auto p-2">
                    {% if hconfigs[ConfigEnum.telegram_enable] %}
                    <li class="nav-item"><a class="nav-link" href="#telegram" data-toggle="tab"><i class="fa-brands fa-telegram fa-margin"></i> {{_('telegram')}}</a></li>
                    {% endif %}
                    <li class="nav-item"><a class="nav-link" href="#android" data-toggle="tab"><i class="fa-brands fa-android fa-margin"></i> اندروید</a></li>
                    <li class="nav-item"><a class="nav-link" href="#ios" data-toggle="tab"><i class="fa-brands fa-app-store-ios fa-margin"></i> آیفون</a></li>
                    <li class="nav-item"><a class="nav-link" href="#windows" data-toggle="tab">
                            <i class="fa-brands fa-windows fa-margin1"></i> <i class="fa-brands fa-apple fa-margin1"></i> <i class="fa-brands fa-linux fa-margin1"></i> لپ تاپ و رایانه</a></li>

                </ul>
            </div><!-- /.card-header -->
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="default">
                        لطفا نوع گوشی یا سیستم عامل خود را انتخاب کنید
                    </div>
                    <div class="tab-pane" id="telegram">
                        {% include 'home/telegram.html' %}
                    </div>
                    <div class="tab-pane" id="android">
                        {% include 'home/android.html' %}
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="ios">
                        {% include 'home/ios.html' %}
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="windows">
                        {% include "home/windows.html" %}
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div><!-- /.card-body -->
        </div>
        <!-- ./card -->
    </div>
    <!-- /.col -->
</div>


<div class="row">
    <div class="col-12">
        <!-- Custom Tabs -->
        <div class="card">
            <div class="card-header d-flex p-0">
                <h3 class="card-title p-0"></h3>
                <ul class="nav nav-pills ml-auto p-2">
                    <li class="nav-item"><a class="nav-link" href="#all_configs" data-toggle="tab"><i class="fa-solid fa-grip fa-margin"></i> همه کانفیگ‌ها</a></li>
                    <li class="nav-item"><a class="nav-link" href="#speedtest" data-toggle="tab"><i class="fa-solid fa-gauge-high fa-margin"></i> تست سرعت و شناسایی آی پی کثیف</a></li>
                    <li class="nav-item"><a class="nav-link" href="#doh" data-toggle="tab"><i class="fa-solid fa-sitemap fa-margin"></i> DNS over https</a></li>
                </ul>
            </div><!-- /.card-header -->
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="default">
                        لطفا گزینه مورد نظر خود را انتخاب کنید
                    </div>
                    <div class="tab-pane" id="all_configs">
                        {% include 'home/all-configs.html'%}
                    </div>
                    <div class="tab-pane" id="speedtest">
                        {% include 'home/speedtest.html' %}
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="doh">
                        {% include 'home/doh.html' %}
                    </div>

                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div><!-- /.card-body -->
        </div>
        <!-- ./card -->
        <!-- /.col -->


        <div class="card-deck d-sm-none">
            <div class="card small-box bg-warning">
                <div class="card-body">
                    <div class="inner">
                        <h3>QR code</h3>
                        <p>To copy or share links, click on the gray <i class="fa-solid fa-qrcode"></i> field to scan the QR Code.
                            It will be displayed.</p>
                    </div>
                    <div class="icon">
                        <i class="fa-solid fa-qrcode fa-margin"></i>
                    </div>
                </div>
                <a href="https://{{domain}}/{{hconfigs[ConfigEnum.proxy_path]}}/{{user.uuid}}/" class="card-footer share-link">
                    <i class="fas fa-qrcode"></i> مشاهده کد QR
                </a>

            </div>
        </div>
    </div>

</div>






















































<style>
    .fa-margin {
        margin-left: 10px;
        margin-right: 5px;
    }

    .text-break {
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    .btn-group {
        margin-bottom: 10px;
    }

    #qrcode img {
        margin: auto;
        width: 90%;
    }
</style>

<div class="modal fade" id="share-qr-code" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLongTitle">لینک اشتراک برای شبکه های اجتماعی</h5>

            </div>
            <div class="modal-body">
                <center>
                    <a id='qrcode-link' class="btn btn-primary copy-link" href="">کپی لینک</a>
                    <a id="share-link-redirect" class="btn btn-success copy-link" href="">کپی لینک جهت اشتراک
                        گذاری</a>
                    <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">بستن</button>
            </div>
        </div>
    </div>
</div>


</div>
{% endblock %}



















{% block scripts %}
{{ super() }}
<script>

    function copy_click(e) {
        e.preventDefault();
        console.log(this); console.log(e);
        var link = this.href;
        navigator.clipboard.writeText(link).then(function () {
            alert('Link Copied to clipboard ' + link);
        }, function (err) {
            window.prompt("Copy to clipboard: Ctrl+C, Enter", link);
        });
    }
    w = Math.min(window.innerWidth, window.innerHeight) * .75;
    qrcode = new QRCode(document.getElementById("qrcode"), { width: w, height: w, correctLevel: 1 });
    w = Math.min(window.innerWidth, window.innerHeight) * .75;
    // qrcode2 = new QRCode(document.getElementById("qrcode2"), { width: w / 2, height: w / 2, correctLevel: 1 });
    // qrcode2.clear()
    // qrcode2.makeCode(document.location.href);
    function share_click(e) {
        e.preventDefault();
        var link = this.href;
        qrcode.clear()
        qrcode.makeCode(link);
        hrefshare = "https://{{domain}}/{{hconfigs[ConfigEnum.proxy_path]}}/redirect/" + link.replaceAll('://', '%3A%2F%2F')
        $('#qrcode-link')[0].href = link
        $('#share-link-redirect')[0].href = hrefshare
        if (link.startsWith("http"))
            $('#share-link-redirect').hide()
        else
            $('#share-link-redirect').show()
        $('#share-qr-code').modal('show');
    }
    $(document).ready(function () {
        $('a.orig-link').each((i, p) => {
            href = p.href
            if (href.startsWith("clash://install-config?url=")) {
                href = href.replaceAll('clash://install-config?url=', '');
                href = href.replaceAll(".yml&", ".yml?")
            }
            if (href.startsWith("clashmeta://install-config?url=")) {
                href = href.replaceAll('clashmeta://install-config?url=', '');
                href = href.replaceAll(".yml&", ".yml?")
            }

            // ecopy = ' <a href="' + href + '" class="btn btn-success copy-link">کپی لینک</a>'
            eshare = ' <a href="' + href + '" class="btn btn-secondary share-link"><i class="fa-solid fa-qrcode"></i></a>'
            $(eshare).insertBefore(p);
            // $(ecopy).insertAfter(p);
        });
        $('a.copy-link').click(copy_click)
        $('a.share-link').click(share_click)
        $('.close').click(() => $('.modal').modal('hide'))
    });


    const Main_Details = document.querySelectorAll('.main-details');

    Main_Details.forEach(deet => {
        deet.addEventListener('toggle', toggleOpenOneOnly)
    })

    function toggleOpenOneOnly(e) {
        if (this.open) {
            Main_Details.forEach(deet => {
                if (deet != this && deet.open) deet.open = false
            });
        }
    }
</script>

<script>


    function replace_info(str) {

        if (str.includes('vmess://')) {
            splt = str.split('vmess://')
            return "vmess://" + btoa(splt[1])
        }

        if (str.includes('vmess%3A%2F%2F')) {
            splt = str.split('vmess%3A%2F%2F')
            return splt[0] + "vmess%3A%2F%2F" + btoa(splt[1])
        }
        return str;
    }


    codes = document.getElementsByTagName('code');
    for (i = 0; i < codes.length; i++) {
        codes[i].innerHTML = replace_info(codes[i].innerHTML);
    }

    as = $('a.orig-link');
    for (i = 0; i < as.length; i++) {
        console.log(as[i].href)
        as[i].href = replace_info(as[i].href);
        as[i].innerHTML = replace_info(as[i].innerHTML);
    }

    $(function () {

        $('#all-links').DataTable({
            // scrollY: 300,
            responsive1: {
                details: {
                    display: $.fn.dataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return ''; //'Details for '+data[0]+' '+data[1];
                        }
                    }),
                    renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                        tableClass: 'table'
                    })
                }
            },
            "language": {
                "paginate": {
                    "next": "بعدی",
                    "previous": "قبلی"
                }
            },
            "info": true,
            "paging": false,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "autoWidth": true,

            "oLanguage": {
                "sSearch": "جستجو: "
            }
        });
    });
</script>

{% endblock %}