<section class="file-area" data-xxx="{!! $permission !!}">
    <div class="medium-container container">
        <div class="ad-box mb-5">
            {!! ads('top_area') !!}
        </div>
        <div class="file-preview py-3 mb-5">
            @if (canPreviewed($file->filetype))
                <img src="{{ $fileUrl }}" alt="{{ $file->filename }}" width="100%" height="100%">
            @else
                @if ($file->filetype == 'pdf')
                    <div class="row justify-content-center">
                        <iframe src="{{ $fileUrl }}" width="50%" height="600">
                                This browser does not support PDFs. Please download the PDF to view it: <a href="{{ $fileUrl }}">Download PDF</a>
                        </iframe>
                    </div>
                @else
                    <div class="file-preview-inner d-flex w-75 p-4 mx-auto">
                        <p class="user-select-none m-auto">{{ strtoupper($file->filetype) }}</p>
                    </div>
                @endif
            @endif
        </div>
        <div class="ad-box mb-5">
            {!! ads('middle_area') !!}
        </div>
        <div class="row d-flex">
            <div class="col-md-9 mb-3 mb-md-0 mx-auto">
                <div class="d-flex flex-column flex-lg-row gap-2 gap-lg-0 mb-5">
                    <div class="d-flex gap-2">
                        <a href="{{ $fileUrl }}" class="btn btn-action" aria-label="Download" download>
                            <i class="fa-solid fa-download fa-fw pe-none"></i>
                            <span class="pe-none">{{ __('lang.download') }}</span>
                        </a>
                        <div class="dropdown">
                            <button type="button" class="btn btn-action btn-share dropdown-toggle" 
                                data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share">
                                <i class="fa-solid fa-share-nodes fa-fw pe-none"></i>
                                <span class="pe-none">{{ __('lang.share') }}</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a 
                                        class="dropdown-item" 
                                        href="https://www.facebook.com/sharer/sharer.php?u={{ url()->full() }}" 
                                        onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">{{ __('lang.share_on') }} Facebook</a>
                                </li>
                                <li>
                                    <a 
                                        class="dropdown-item" 
                                        href="https://x.com/share?url={{ url()->full() }}" 
                                        onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">{{ __('lang.share_on') }} X</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">{{ __('lang.share_on') }} Linkedin</a>
                                </li>
                                <li>
                                    <a 
                                        class="dropdown-item" 
                                        href="whatsapp://send?text={{ url()->full() }}" 
                                        onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" >{{ __('lang.share_on') }} WhatsApp</a>
                                </li>
                                <li>
                                    <a 
                                        class="dropdown-item copy-this" 
                                        href="#"
                                        data-copy="{{ url()->full() }}">{{ __('lang.copy') }} URL</a>
                                </li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-action" aria-label="Report" 
                            data-bs-toggle="modal" data-bs-target="#report-file">
                            <i class="fa-solid fa-flag fa-fw pe-none"></i>
                            <span class="pe-none">{{ __('lang.report') }}</span>
                        </button>
                    </div>
                    <div class="file-info d-flex flex-column ms-lg-auto">
                        <p class="text-lg-end m-0">
                            {{ $analytics[0] }} {{ __('lang.pageviews') }} | {{ $analytics[1] }} {{ __('lang.visitors') }}
                        </p>
                        <p class="text-lg-end m-0">
                            {{ __('lang.uploaded_on') }} {{ dateFormat($file->created_at, 'Y-m-d') }}
                        </p>
                    </div>
                </div>
                <div class="image-input mb-3">
                    <label for="image-link" class="form-label">{{ __('lang.image_link') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control user-select-all" 
                            id="image-link" value="{{ url()->full() }}">
                        <button class="btn copy-this" type="button" 
                            data-copy="{{ url()->full() }}">{{ __('lang.copy') }}</button>
                    </div>
                </div>
                <div class="image-input mb-3">
                    <label for="html" class="form-label">HTML</label>
                    <div class="input-group">
                        <input type="text" class="form-control user-select-all" 
                            id="html" value="{{ imageHtml($file->filename) }}">
                        <button class="btn copy-this" type="button" 
                            data-copy="{{ imageHtml($file->filename) }}">{{ __('lang.copy') }}</button>
                    </div>
                </div>
                <div class="image-input mb-3">
                    <label for="bbcode" class="form-label">BBCode</label>
                    <div class="input-group">
                        <input type="text" class="form-control user-select-all" 
                            id="bbcode" value="{{ imageBBCode($file->filename) }}">
                        <button class="btn copy-this" type="button" 
                            data-copy="{{ imageBBCode($file->filename) }}">{{ __('lang.copy') }}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="ad-box mt-5">
            {!! ads('bottom_area') !!}
        </div>
    </div>
</section>