<!DOCTYPE html>
<html lang="en" active-theme="{{ settings['settings'][0]['theme'] }}">

<head>
    <title>Surfer</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/static/images/icon.png" type="image/x-icon" />
    <link rel="stylesheet" href="/static/styles/style.css" />
</head>

<body>
    <input id="sbar" class="search" type="text" placeholder="Start searching here..."
        style="margin-top: 50px; height: 10%;" value="{{ query }}" autocomplete="off">
    <div class=" menu-bar">
        <a href="/" class="button">
            <div class="button-icon"></div><i data-feather="home"></i>
        </a>
        <a id="ibutton" class="button">
            <div class="button-icon"></div><i data-feather="image"></i>
        </a>
        <a href="/bookmarks?typ=site" class="button">
            <div class="button-icon"></div><i data-feather="bookmark"></i>
        </a>
        <a href="/history" class="button">
            <div class="button-icon"></div><i data-feather="clock"></i>
        </a>
        <a href="/settings" class="button">
            <div class="button-icon"></div><i data-feather="settings"></i>
        </a>
    </div>
    <div class="search-results">
        {% for item in items %}
        <div class="content-card">
            <div class="card-details">
                <div class="card-header">
                    <a href="{{ item['image'] }}">
                        <h2 class="card-title" id="{{ item['id'] }}ctitle">{{ item["title"] }}</h2>
                    </a>
                    <!-- <p class="card-summary" id="{{ item['id'] }}csummary">Source: {{ item["source"] }}</p> Deprecated -->
                    <details>
                        <summary>Show Image</summary>
                        <img class="card-image" src="{{ item['image'] }}" alt="Image">
                    </details>
                </div>
                <div class="card-bottom" style="margin-top: 10px;">
                    <a id="{{ item['id'] }}~{{ item['image'] }}" class="button image-button">
                        <div class="button-icon"></div><i data-feather="bookmark"
                            style="height: 20px; width: 20px;"></i>
                    </a>
                    <a id="{{ item['image'] }}" class="button blackhole-button">
                        <div class="button-icon"></div><i data-feather="send"
                            style="margin-right: 4px; height: 20px; width: 20px;"></i> Black Hole
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</body>
<script src="/static/scripts/script.js"></script>
<script src="/static/scripts/image.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace()
</script>

</html>