<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Query}} - Ocásek</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/{{.Theme}}.css">
    <link rel="search" type="application/opensearchdescription+xml" title="Ocásek" href="/opensearch.xml">
</head>
<body>
    <form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
        <h1 class="logomobile"><a class="no-decoration" href="./">Ocásek</a></h1>
        <div class="wrapper-results">
            <input type="text" name="q" value="{{ .Query }}" id="search-input" placeholder="Type to search..." />
            <button id="search-wrapper-ico" class="material-icons-round" name="t" value="forum">search</button>
            <input type="submit" class="hide" name="t" value="forum" />
        </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">Web</button>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="image">image</button>
                <button name="t" value="image" class="clickable">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">Videos</button>
            </div>
            <div class="search-container-results-btn">
                <button id="sub-search-wrapper-ico" class="material-icons-round clickable search-active" name="t" value="forum">forum</button>
                <button name="t" value="forum" class="clickable search-active">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">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">Torrents</button>
            </div>
        </div>
    </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="">Safe Search Off</option>
            <option value="active">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>
            {{end}}
        </select>        
        <button class="results-save" name="t" value="text">Apply settings</button>
    </form>    
    <div class="results">
        {{if .Results}}
            {{range .Results}}
                <div class="result_item">
                    <a id="link" href="{{.URL}}">{{.URL}}</a>
                    <a href="{{.URL}}"><h3>{{.Header}}</h3></a>
                    <p>{{.Description}}</p>
                </div>
                <br>
            {{end}}
        {{else}}
            <div class="no-results">No results found for '{{ .Query }}'. Try different keywords.</div>
        {{end}}
    </div>
    <div class="prev-next prev-img">
        <form action="/search" method="get">
            <input type="hidden" name="q" value="{{ .Query }}">
            <input type="hidden" name="t" value="text">
            {{ if .HasPrevPage }}
            <button type="submit" name="p" value="{{ sub .Page 1 }}">Previous</button>
            {{ end }}
            {{ if .HasNextPage }}
            <button type="submit" name="p" value="{{ add .Page 1 }}">Next</button>
            {{ end }}
        </form>
    </div>
    <script>
        // Check if JavaScript is enabled and modify the DOM accordingly
        document.getElementById('content').classList.remove('js-enabled');
    </script>
</body>
</html>