<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{ if .IsThemeDark }}
    <meta name="darkreader-lock">
    {{ end }}
    <title>{{ .Query }} - {{ translate "site_name" }}</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/style-fixedwidth.css">
    <link rel="stylesheet" href="/static/css/{{.Theme}}.css">
    <link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">    
    <!-- Icons -->
    <link rel="icon" href="{{ .IconPathSVG }}" type="image/svg+xml">
    <link rel="icon" href="{{ .IconPathPNG }}" type="image/png">
    <link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
</head>
<body>
    <form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
        <h1 class="logomobile">
            <div class="logo-container" herf="/">
                <a href="/">
                    <svg
                        id="svg"
                        version="1.1"
                        viewBox="0, 0, 29 ,86"
                        sodipodi:docname="logo.svg"
                        inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
                        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:svg="http://www.w3.org/2000/svg"
                        xmlns:bx="https://boxy-svg.com">
                    <sodipodi:namedview
                        id="namedview19"
                        pagecolor="#ffffff"
                        bordercolor="#666666"
                        borderopacity="1.0"
                        inkscape:pageshadow="2"
                        inkscape:pageopacity="0.0"
                        inkscape:pagecheckerboard="0"
                        showgrid="false"
                        inkscape:snap-grids="true"
                        inkscape:zoom="4.8866279"
                        inkscape:cx="5.8322427"
                        inkscape:cy="12.483046"
                        inkscape:window-width="1920"
                        inkscape:window-height="1008"
                        inkscape:window-x="0"
                        inkscape:window-y="0"
                        inkscape:window-maximized="1"
                        inkscape:current-layer="svg" />
                    <defs
                        id="defs4">
                        <bx:grid
                            x="-70.745"
                            y="-5.396"
                            width="237.293"
                            height="88.009" />
                    </defs>
                    <g
                        id="svgg"
                        transform="translate(-31.678924,4.8938759)">
                        <path
                            id="path1"
                            d="m -44.354555,0.78356149 c -26.434,5.97600001 -30.434,42.38301051 -6.319,54.94200051 1.703,0.88701 4.424,1.702 7.829,2.221 4.486,0.68301 9.6,0.86601 9.583,0.154 -0.035,-1.43199 -7.299,-8.279 -8.664,-8.279 -3.155,0 -9.941,-5.66599 -11.972,-9.995 -8.053,-17.17399 5.784,-35.2969905 22.777,-29.8329902 13.493,4.3390002 18.108,22.6990002 8.656,34.4380002 -1.846,2.29399 -1.744,2.299 -4.39,-0.225 -4.805,-4.583 -8.58,-5.24601 -11.988,-2.104 -2.173,2.002 -2.148,2.663 0.153,4.144 1.906,1.227 13.408,12.956 17.488,17.833 4.294,5.133 5.245,6.141 7.526,7.971 4.4209992,3.548 12.4439992,5.86 14.67499925,4.229 0.67199995,-0.492 1.86099995,-7.792 1.35199995,-8.302 -0.118,-0.118 -1.337,-0.393 -2.70799997,-0.612 -5.35200003,-0.854 -9.21900003,-3.454 -14.18899923,-9.542 -3.492,-4.278 -4.129,-5.268 -3.386,-5.268 2.543,0 8.0529992,-8.62 9.8619992,-15.429 5.712,-21.502 -14.1099992,-41.3560005 -36.2849992,-36.34300051 m 65.138,1.52300001 c -15.8590008,3.717 -25.6410008,20.0570005 -21.51200077,35.9340005 3.73899997,14.378 19.16900077,21.386 34.40300077,19.394 4.709,-0.616 2.438,-0.651 4.456,-0.792 2.018,-0.141 6.447,-0.015 6.93,-0.194 0.409,0.019 0.716,-0.458 0.723,-0.948 l -0.006,-13.389 c -0.003,-7.364 -0.153,-13.62 -0.332,-13.902 -0.258,-0.407 -2.36,-0.488 -10.182,-0.391 -11.445,0.143 -10.964,-0.036 -10.964,4.079 0,2.439 -0.044,3.991 1.166,4.706 1.139,0.674 3.431,0.58499 6.689,0.409 l 3.754,-0.202 0.276,5.676 c 0.321,6.593 0.561,6.151 -3.647,6.704 -15.524,2.038 -24.0100008,-5.017 -23.3770008,-19.434 0.6630003,-15.104 12.1950008,-22.7790005 26.9570008,-17.94 4.51,1.478 4.409,1.524 6.165,-2.7910006 1.5,-3.6869999 1.499,-3.6919999 -0.825,-4.6919999 -5.427,-2.335 -15.559,-3.426 -20.674,-2.227 m 78.83,0.796 c -2.87,0.772 -2.908,0.847 -3.151,6.1239999 -0.257,5.5670006 0.122,4.9680006 -3.351,5.2910006 -3.431,0.319 -3.325,0.157 -2.758,4.206 0.61,4.363 0.59,4.34 3.755,4.34 h 2.651 v 12.696 c 0,14.499 1.548,16.328 3.503005,18.304 3.592,3.477 9.588,4.915 14.93,3.057 2.445,-0.851 2.427,-0.809 2.176,-4.955 -0.247,-4.096 -0.428,-3.489 -3.157,-2.908 -7.732,1.646 -8.272,0.605 -8.272,-15.048 v -11.341 h 5.664 l 5.335,-0.09 c 0.676,-0.02 0.976,0.395 1.286,-3.905 0.346,-4.798 -0.203,-4.014 -0.808,-4.144 l -5.813,0.177 -5.664,0.268 v -5.163 c 0,-5.8370005 -0.204,-6.4770005 -2.251,-7.0460005 -1.752,-0.486 -1.762,-0.486 -4.075005,0.137 m -34.494,11.0180005 c -2.645,0.382 -4.719,1.042 -8.548,2.718 l -4.031,1.766 c -1.086,0.383 -0.284,1.285 0.687,3.881 1.063,2.752 1.355,3.356 2.115,3.035 0.76,-0.321 0.701,-0.229 1.427,-0.649 9.076,-5.254 20.264,-2.635 20.264,4.742 v 2.135 l -5.957,0.205 c -13.838,0.477 -20.284,4.751 -20.374,13.511 -0.128,12.397 14.176,17.214 24.615,8.289 l 2.302,-1.967 0.23,1.849 c 0.316,2.538 0.608,3.064 2.044,3.67 1.414,0.597 7.158,0.623 7.746,0.035 0.767,-0.767 0.374,-6.004 -0.245,-6.337 -0.942,-0.507 -0.773,-1.57 -0.885,-12.635 -0.152,-14.866 -0.508,-16.501 -4.391,-20.131 -3.037,-2.839 -11.558,-4.903 -16.999,-4.117 m 72.851005,0.007 c -27.192,5.263 -24.132,43.953 3.472,43.89 14.663,-0.033 24.399,-12.771 21.526,-28.162 -1.856,-9.949 -14.324,-17.793 -24.998,-15.728 m 8.286,8.958 c 6.882,2.345 9.617,11.514 5.902,19.79 -4.124,9.191 -17.884,9.174 -22.137,-0.027 -1.317,-2.849 -1.237,-10.788 0.137,-13.535 2.999,-5.999 9.448,-8.494 16.098,-6.228 m -68.832005,18.5 v 3.091 l -1.856,1.636 c -7.456,6.574 -16.358,5.485 -15.595,-1.907 0.448,-4.344 3.618,-5.768 13.056,-5.866 l 4.395,-0.046 v 3.092"
                            stroke="none"
                            fill-rule="evenodd"
                            style="fill:currentColor" />
                        <g
                            aria-label="SEARCH ENGINE"
                            id="text7"
                            style="font-family:'ADLaM Display';white-space:pre;fill:currentColor"
                            transform="matrix(0.96497818,0,0,0.96497818,-146.24769,-215.06201)">
                        <path
                            d="m 170.42488,293.75705 v 1.1543 q -0.67383,-0.32227 -1.27148,-0.48047 -0.59766,-0.15821 -1.1543,-0.15821 -0.9668,0 -1.49414,0.375 -0.52149,0.375 -0.52149,1.06641 0,0.58008 0.34571,0.87891 0.35156,0.29297 1.32422,0.47461 l 0.71484,0.14648 q 1.32422,0.25195 1.95117,0.89063 0.63281,0.63281 0.63281,1.69921 0,1.27149 -0.85546,1.92774 -0.84961,0.65625 -2.4961,0.65625 -0.62109,0 -1.32422,-0.14063 -0.69726,-0.14062 -1.44726,-0.41601 v -1.21875 q 0.7207,0.4043 1.41211,0.60937 0.6914,0.20508 1.35937,0.20508 1.01367,0 1.56446,-0.39844 0.55078,-0.39843 0.55078,-1.13671 0,-0.64454 -0.39844,-1.00782 -0.39258,-0.36328 -1.29492,-0.54492 l -0.72071,-0.14062 q -1.32421,-0.26368 -1.91601,-0.82618 -0.5918,-0.5625 -0.5918,-1.56445 0,-1.16016 0.81445,-1.82812 0.82032,-0.66797 2.25586,-0.66797 0.61524,0 1.25391,0.11133 0.63867,0.11132 1.30664,0.33398 z"
                            id="path13" />
                        <path
                            d="m 172.79793,293.46994 h 5.53125 v 0.99609 h -4.34766 v 2.58985 h 4.16602 v 0.99609 h -4.16602 v 3.16992 h 4.45313 v 0.9961 h -5.63672 z"
                            id="path15" />
                        <path
                            d="m 183.30379,294.63596 -1.60547,4.35351 h 3.2168 z m -0.66797,-1.16602 h 1.3418 l 3.33398,8.74805 h -1.23047 l -0.79687,-2.24414 h -3.94336 l -0.79688,2.24414 h -1.24805 z"
                            id="path17" />
                        <path
                            d="m 192.73738,298.11642 q 0.38086,0.12891 0.73828,0.55079 0.36328,0.42187 0.72656,1.16015 l 1.20118,2.39063 h -1.27149 l -1.11914,-2.24414 q -0.43359,-0.87891 -0.84375,-1.16602 -0.4043,-0.28711 -1.10742,-0.28711 h -1.28906 v 3.69727 h -1.1836 v -8.74805 h 2.67188 q 1.5,0 2.23828,0.62695 0.73828,0.62696 0.73828,1.89258 0,0.82617 -0.38672,1.3711 -0.38086,0.54492 -1.11328,0.75585 z m -2.96484,-3.67382 v 3.10547 h 1.48828 q 0.85547,0 1.28906,-0.39258 0.43945,-0.39844 0.43945,-1.16602 0,-0.76758 -0.43945,-1.1543 -0.43359,-0.39257 -1.28906,-0.39257 z"
                            id="path19" />
                        <path
                            d="m 202.87996,294.14377 v 1.24805 q -0.59766,-0.55665 -1.27734,-0.83204 -0.67383,-0.27539 -1.43555,-0.27539 -1.5,0 -2.29688,0.91993 -0.79687,0.91406 -0.79687,2.64843 0,1.72852 0.79687,2.64844 0.79688,0.91406 2.29688,0.91406 0.76172,0 1.43555,-0.27539 0.67968,-0.27539 1.27734,-0.83203 v 1.23633 q -0.62109,0.42187 -1.31836,0.63281 -0.69141,0.21094 -1.46484,0.21094 -1.98633,0 -3.12891,-1.21289 -1.14258,-1.21875 -1.14258,-3.32227 0,-2.10937 1.14258,-3.32226 1.14258,-1.21875 3.12891,-1.21875 0.78515,0 1.47656,0.21093 0.69726,0.20508 1.30664,0.6211 z"
                            id="path21" />
                        <path
                            d="m 204.70808,293.46994 h 1.1836 v 3.58594 h 4.30078 v -3.58594 h 1.18359 v 8.74805 h -1.18359 v -4.16602 h -4.30078 v 4.16602 h -1.1836 z"
                            id="path23" />
                        <path
                            d="m 217.54597,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
                            id="path25" />
                        <path
                            d="m 225.12801,293.46994 h 1.59375 l 3.8789,7.31836 v -7.31836 h 1.14844 v 8.74805 h -1.59375 l -3.87891,-7.31836 v 7.31836 h -1.14843 z"
                            id="path27" />
                        <path
                            d="m 240.06941,300.96994 v -2.34961 h -1.93359 v -0.97266 h 3.10547 v 3.75586 q -0.68555,0.48633 -1.51172,0.73829 -0.82617,0.24609 -1.76367,0.24609 -2.05078,0 -3.21094,-1.19531 -1.1543,-1.20118 -1.1543,-3.33985 0,-2.14453 1.1543,-3.33984 1.16016,-1.20117 3.21094,-1.20117 0.85547,0 1.62304,0.21093 0.77344,0.21094 1.42383,0.6211 v 1.25976 q -0.65625,-0.55664 -1.39453,-0.83789 -0.73828,-0.28125 -1.55273,-0.28125 -1.60547,0 -2.41407,0.89649 -0.80273,0.89648 -0.80273,2.67187 0,1.76953 0.80273,2.66602 0.8086,0.89648 2.41407,0.89648 0.62695,0 1.11914,-0.10547 0.49218,-0.11132 0.88476,-0.33984 z"
                            id="path29" />
                        <path
                            d="m 243.4034,293.46994 h 1.18359 v 8.74805 h -1.18359 z"
                            id="path31" />
                        <path
                            d="m 246.94246,293.46994 h 1.59375 l 3.87891,7.31836 v -7.31836 h 1.14843 v 8.74805 h -1.59375 l -3.8789,-7.31836 v 7.31836 h -1.14844 z"
                            id="path33" />
                        <path
                            d="m 255.91902,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
                            id="path35" />
                        </g>
                    </g>
                    </svg>
                </a>
            </div>
        </h1>
        <div class="wrapper-results">
            <input type="text" name="q" value="{{ .Query }}" id="search-input"/>
            <button id="search-wrapper-ico" class="material-icons-round" name="t" value="image">search</button>
            <div class="autocomplete">
                <ul>
            </ul>
            </div>
            <input type="submit" class="hide" name="t" value="image" />
        </div>
        <div class="sub-search-button-wrapper">
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="text">search</button>
                <button name="t" value="text" class="clickable">{{ translate "web" }}</button>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable search-active" name="t" value="image">image</button>
                <button name="t" value="image" class="clickable search-active">{{ translate "images" }}</button>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="video">movie</button>
                <button name="t" value="video" class="clickable">{{ translate "videos" }}</button>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="forum">forum</button>
                <button name="t" value="forum" class="clickable">{{ translate "forums" }}</button>
            </div>
            <div id="content" class="js-enabled">
                <div class="search-container-results-btn">
                    <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
                    <button name="t" value="map" class="clickable">{{ translate "maps" }}</button>
                </div>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
                <button name="t" value="file" class="clickable">{{ translate "torrents" }}</button>
            </div>
        </div>
        {{ if not .JsDisabled }}
        <input type="hidden" name="js_enabled" value="true">
        {{ end }}
    </form>
    <form class="results_settings" action="/search" method="get">
        <input type="hidden" name="q" value="{{ .Query }}">
        <select class="results-settings" name="safe" id="safeSearchSelect">
            <option value="disabled" {{if eq .Safe "disabled"}}selected{{end}}>{{ translate "safe_search_off" }}</option>
            <option value="active" {{if eq .Safe "active"}}selected{{end}}>{{ translate "safe_search_on" }}</option>
        </select>
        <select class="results-settings" name="lang" id="languageSelect">
            {{range .LanguageOptions}}
            <option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option> <!--  this is too wide or too less, fix -->
            {{end}}
        </select>        
        <button class="results-save" name="t" value="image">{{ translate "save_settings" }}</button>
    </form>  
    <div class="search-results" id="results"> 
        
    <!-- Results go here -->
    {{ if .Results }}
        <div class="images images_viewer_hidden">
            <!-- Images Grid -->
            {{ range $index, $result := .Results }}
            <div class="image">
                {{ if $.HardCacheEnabled }}
                    {{ if $.JsDisabled }}
                        <!-- JavaScript is disabled; serve actual images -->
                        <img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
                    {{ else }}
                        <!-- JavaScript is enabled; use placeholders -->
                        <img
                            src="/static/images/placeholder.svg"
                            data-id="{{ $result.ID }}"
                            data-full="{{ $result.ProxyFull }}"
                            data-proxy-full="{{ $result.ProxyThumb }}"
                            alt="{{ $result.Title }}"
                            class="clickable"
                        />
                    {{ end }}
                {{ else }}
                    <!-- HardCacheEnabled is false; serve images directly -->
                    <img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
                {{ end }}
                <div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
                <div class="details">
                    <span class="img_title clickable">{{ $result.Title }}</span>
                    <a href="{{ $result.Source }}" target="_blank" class="img_source">{{ translate "source" }}</a>
                </div>
            </div>
            {{ end }}
        </div>
        <!-- Nav buttons -->
        <noscript>
            <form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
                <!-- Existing form fields -->
                <input type="hidden" name="js_disabled" value="true">
            </form>
            <!-- Nav buttons -->
            <div class="pagination">
                {{ if .HasPrevPage }}
                    <a href="/search?q={{ .Query }}&t=image&p={{ sub .Page 1 }}&js_disabled=true">{{ translate "previous" }}</a>
                {{ end }}
                {{ if .HasNextPage }}
                    <a href="/search?q={{ .Query }}&t=image&p={{ add .Page 1 }}&js_disabled=true">{{ translate "next" }}</a>
                {{ end }}
            </div>
        </noscript>        
    {{ else if .NoResults }}
        <div class="no-results">{{ translate "no_results" .Query }}</div>
    {{ else }}
        <div class="no-more-results">{{ translate "no_more_results" }}</div>
    {{ end }}
    </div>
    <div class="message-bottom-left" id="message-bottom-left">
        <span>{{ translate "searching_for_new_results" }}</span>
    </div>

    <div id="image-viewer-overlay" style="display: none;"></div>

    <div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image" data-hard-cache-enabled="{{ .HardCacheEnabled }}"></div>
    <script defer src="/static/js/autocomplete.js"></script>
    <script defer src="/static/js/imagetitletrim.js"></script>
    <script defer src="/static/js/imageviewer.js"></script>
    <!-- JavaScript to Load Images and Dynamic loading of the page -->
    <script>
        (function() {
            // Configuration
            const imageStatusInterval = 500; // Interval in milliseconds to check image status
            const scrollThreshold = 500;      // Distance from bottom of the page to trigger loading
            let isFetching = false;
            let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1;
            let query = document.getElementById('template-data').getAttribute('data-query');
            let hardCacheEnabled = document.getElementById('template-data').getAttribute('data-hard-cache-enabled') === 'true';
    
            let imageElements = [];
            let imageIds = [];
    
            // Function to check image status
            function checkImageStatus() {
                if (!hardCacheEnabled) return;
                if (imageIds.length === 0) {
                    // No images to check, do nothing
                    return;
                }
    
                // Send AJAX request to check image status
                fetch('/image_status?image_ids=' + imageIds.join(','))
                    .then(response => response.json())
                    .then(statusMap => {
                        imageElements = imageElements.filter(img => {
                            let id = img.getAttribute('data-id');
                            if (statusMap[id]) {
                                // Image is ready, update src
                                img.src = statusMap[id];
                                // Remove the image id from the list
                                imageIds = imageIds.filter(imageId => imageId !== id);
                                return false; // Remove img from imageElements
                            }
                            return true; // Keep img in imageElements
                        });
                    })
                    .catch(error => {
                        console.error('Error checking image status:', error);
                    });
            }
    
            // Initialize imageElements and imageIds
            if (hardCacheEnabled) {
                imageElements = Array.from(document.querySelectorAll('img[data-id]'));
                imageIds = imageElements.map(img => img.getAttribute('data-id'));
    
                // Replace images with placeholders
                imageElements.forEach(img => {
                    img.src = '/static/images/placeholder.svg';
                });
    
                // Start checking image status
                let imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval);
                checkImageStatus(); // Initial check
            }
    
            // Infinite scrolling
            window.addEventListener('scroll', function() {
                if (isFetching) return;
    
                if (window.innerHeight + window.scrollY >= document.body.offsetHeight - scrollThreshold) {
                    // User scrolled near the bottom
                    isFetching = true;
                    page += 1;
    
                    fetch('/search?q=' + encodeURIComponent(query) + '&t=image&p=' + page + '&ajax=true')
                        .then(response => response.text())
                        .then(html => {
                            // Parse the returned HTML and extract image elements
                            let parser = new DOMParser();
                            let doc = parser.parseFromString(html, 'text/html');
                            let newImages = doc.querySelectorAll('.image');
    
                            if (newImages.length > 0) {
                                let resultsContainer = document.querySelector('.images');
                                newImages.forEach(imageDiv => {
                                    // Append new images to the container
                                    resultsContainer.appendChild(imageDiv);
    
                                    // Get the img element
                                    let img = imageDiv.querySelector('img');
                                    if (img) {
                                        if (hardCacheEnabled) {
                                            // Replace image with placeholder
                                            img.src = '/static/images/placeholder.svg';
    
                                            let id = img.getAttribute('data-id');
                                            imageElements.push(img);
                                            imageIds.push(id);
                                        }
                                    }
                                });
                                if (hardCacheEnabled) {
                                    checkImageStatus();
                                }
                                isFetching = false;
                            } else {
                                // No more images to load
                                isFetching = false;
                                // Optionally, remove the scroll event listener if no more pages
                                // window.removeEventListener('scroll', scrollHandler);
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching next page:', error);
                            isFetching = false;
                        });
                }
            });
    
            // Remove 'js-enabled' class from content
            document.getElementById('content').classList.remove('js-enabled');
        })();
    </script>

    <script type="text/javascript">
        // Check if 'js_enabled' is not present in the URL
        if (!window.location.search.includes('js_enabled=true')) {
            // Redirect to the same URL with 'js_enabled=true'
            var separator = window.location.search.length ? '&' : '?';
            window.location.href = window.location.href + separator + 'js_enabled=true';
        }
    </script>
    
    <script>
        // Check if JavaScript is enabled and modify the DOM accordingly
        document.getElementById('content').classList.remove('js-enabled');
    </script>
</body>
</html>