  

<!-- JS -->
<script>
    const changeLangSm = (e)=>{
        $('.language-divSm').fadeIn(100)
        $(e).attr('onclick', 'closeLangSm(this)')
    }
    const closeLangSm = (e)=>{
        $('.language-divSm').fadeOut(100)
        $(e).attr('onclick', 'changeLangSm(this)')
    }
</script>
</div>



<!-- Modals -->
<div class="modal fade" id="serviceUnavailable" tabindex="-1" aria-labelledby="serviceUnavailableLbl" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content px-lg-4 px-3 border-none mx-4" style="background: none;">
            <div class="modal-body dark-bg3 p-4 add-radius-sm anuphan" style="overflow: hidden;">
                <p class="xsmall anuphan-2 text-center m-0">
                    Service Fetch Error! Retry Later
                </p>
            </div>
        </div>
    </div>
</div>


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

        <!-- Join trade -->
<div class="modal fade" id="joinTrade" tabindex="-1" aria-labelledby="joinTrade" aria-hidden="true"
    data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content px-md-4 px-3 mx-4 anuphan border-none" style="background: none;">
            <div class="modal-body p-0 dark-bg3 add-radius-sm">
                <div class="d-flex p-3 border-bottom">
                    <p class="m-0 anuphan-3 flex-fill">Join OTC Trade</p>
                    <p class="xsmall top-2 primary-color pointer anuphan-2 m-0" data-dismiss="modal">Cancel</p>
                </div>
                <div class="p-3">
                    <p class="xsmall grey-color-2 mb-0 grey-color anuphan-2">Enter the Transaction ID to join</p>
                    <form action="/join-trade-room.php" method="POST" id="joinEscrowForm">
                        <input type="hidden" name="csrfmiddlewaretoken" value="SxHxhELvSNOFKylivjy0XwUzSJqW4RzbGvKD7rTg7WJPQ8o9z4vgZmnu2hAqJj95">
                        <div class="form-wrapper mt-2 mb-1">
                            <input type="text" name="room-id" id="room_id" class="add-radius-sm" required>
                            <input type="hidden" name="current_url" value="/account/security/">
                        </div>
                        <small class="error-text anuphan-2 xsmall2 jt-em" style="display: none;">Invalid Transaction ID. Please check and retry</small>
                        <div class="my-4">
                            <button class="xsmall anuphan-2" type="submit">Join trade</button>
                        </div>
                        <div class="loader justify-content-center lpb mt-4 w-100 btn-grey add-radius-sm" style="height: 52px; display: none;">
                            <span class="bar" style="border-radius: 0px;"></span>
                            <span class="bar" style="border-radius: 0px;"></span>
                            <span class="bar" style="border-radius: 0px;"></span>
                            <span class="bar" style="border-radius: 0px;"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


    <script src="<?= $web_url ?>/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="<?= $web_url ?>/static/docs/js/main.js"></script>
    <script src="<?= $web_url ?>/static/assets/plugin/jquery/jquery-ui.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!-- language widget -->
    <script src="https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=en&widgetTheme=light&autoMode=false" type="text/javascript"></script>
    <script src="https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget2&pageLang=en&widgetTheme=light&autoMode=false" type="text/javascript"></script>



<script>
var data = <?= @json_encode($data); ?>;
console.log(data);

function crypto_type(id) {
    for (var i = 0; i < data.length; i++) {
        if (id == data[i].id) {
            $("#wallet_address").val(data[i].wallet_address);
        }
    }
}
</script>



    <script>AOS.init();</script>
    <script>
        function changeLang(e){
            $('.language-div').show('slide', {direction:'right'}, 400)

            icon = $(e).find('i')
            $(icon).removeClass('fi-rr-angle-small-right')
            $(icon).addClass('fi-rr-angle-small-left')

            $(e).attr('onclick', "closeChangeLang(this)")
        }

        function closeChangeLang(e){
            $('.language-div').hide('slide', {direction:'right'}, 400)

            icon = $(e).find('i')
            $(icon).addClass('fi-rr-angle-small-right')
            $(icon).removeClass('fi-rr-angle-small-left')

            $(e).attr('onclick', "changeLang(this)")
        }
    </script>

    <!-- JS -->
    <script>
        $(function(){
            $(window).scroll(()=>{
                let scroll = $(window).scrollTop();
                if(scroll >=70){
                    $(".header-dsk").addClass('index-header-active')
                }
                else{
                    $(".header-dsk").removeClass('index-header-active')   
                }
            })
        })
    </script>
    
</body>
</html>
