@extends('layouts.mall')

@section('content')
    <style>
        /* IE11 Native Scrollbar Styling */
        #mainContent .dynContent::-ms-scrollbar {
            width: 16px;
        }

        #mainContent .dynContent::-ms-scrollbar-track {
            background: #d4a574;
        }

        #mainContent .dynContent::-ms-scrollbar-thumb {
            background: #6b4722;
        }

        #mainContent .dynContent::-ms-scrollbar-thumb:hover,
        #mainContent .dynContent::-ms-scrollbar-thumb:active {
            background: #6d0808;
        }

        /* jScrollPane custom scrollbar styling (modern browsers) */
        #mainContent .dynContent .jspContainer {
            overflow: hidden;
            position: relative;
        }

        #mainContent .dynContent .jspPane {
            position: absolute;
        }

        #mainContent .dynContent .jspVerticalBar {
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 100%;
            background: transparent;
        }

        #mainContent .dynContent .jspTrack {
            background: #d4a574;
            position: relative;
        }

        #mainContent .dynContent .jspDrag {
            background: #6b4722;
            position: relative;
            cursor: pointer;
        }

        #mainContent .dynContent .jspDrag:hover,
        #mainContent .dynContent .jspDrag:active {
            background: #6d0808;
        }

        /* Arrow buttons styling */
        #mainContent .dynContent .jspArrow {
            background: #d4a574;
            text-indent: -20000px;
            display: block;
            cursor: pointer;
            width: 16px;
            height: 16px;
        }

        #mainContent .dynContent .jspArrow.jspDisabled {
            cursor: default;
            background: #bbb;
            opacity: 0.5;
        }

        #mainContent .dynContent .jspArrowUp {
            position: relative;
        }

        #mainContent .dynContent .jspArrowUp::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 6px solid #000;
        }

        #mainContent .dynContent .jspArrowDown {
            position: relative;
        }

        #mainContent .dynContent .jspArrowDown::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid #000;
        }

        #mainContent .dynContent .jspArrow:hover {
            background: #6d0808;
        }

        #mainContent .dynContent .jspArrow:hover::after {
            border-top-color: #fff;
            border-bottom-color: #fff;
        }
    </style>

    <div id="mainContent">
        <div class="userdataHeadline">
            <h1>User information</h1>
        </div>
        <div class="dynContent">
            <div class="userdataContainer">
                <div class="userdataLine">
                    <div class="titleIcon">
                        <img alt="{{ __('mall/main.userdata.storage_icon_alt') }}" src="{{ asset('assets/mall/img/storage.png') }}"/>
                    </div>
                    <div class="userdataText">
                        <div class="title">
                            {{ __('mall/main.userdata.stored_items', ['count' => $storageCount]) }}
                            <a class="helpSmallTopic tip" href="?p=faq" title="{{ __('mall/main.userdata.help_tooltip') }}"></a>
                        </div>
                        <div class="lineBottom">
                            <a @class(["userdataButton" => $storageCount == 0, "userdataButtonGreen" => $storageCount > 0]) href="{{ route('mall.distribution') }}">{{ __('mall/main.userdata.distribute_button') }}</a>
                            <div class="description">{{ __('mall/main.userdata.distribute_description') }}</div>
                        </div>
                        <br class="clearfloat"/>
                    </div>
                </div>
                <div class="userdataLine">
                    <div class="titleIcon">
                        <img alt="Informatii" src="{{ asset('assets/mall/img/faq.png') }}"/>
                    </div>
                    <div class="userdataText">
                        <div class="title">FAQ - Frequently Asked Questions</div>
                        <div class="lineBottom">
                            <a class="userdataButton" href="?p=faq">Go</a>
                            <div class="description">Here you can find answers to the most frequently asked questions.</div>
                        </div>
                        <br class="clearfloat"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="endContent"></div>
    </div>

    <script>
        // Initialize jScrollPane for custom scrollbar (works on all browsers including IE11)
        $(document).ready(function() {
            if (typeof $.fn.jScrollPane !== 'undefined') {
                $('#mainContent .dynContent').jScrollPane({
                    showArrows: true,
                    verticalGutter: 0,
                    horizontalGutter: 0,
                    animateScroll: true,
                    animateDuration: 300
                });
            }
        });
    </script>
@endsection
