<!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>
    <div class="menu-bar" style="margin-top: 20px;">
        <a href="/" class="button">
            <div class="button-icon"></div><i data-feather="home"></i></i>
        </a>
        <a href="/history" class="button">
            <div class="button-icon"></div><i data-feather="clock"></i></i>
        </a>
        <a href="/settings" class="button">
            <div class="button-icon"></div><i data-feather="settings"></i></i>
        </a>
    </div>
    <div class="bookmarks">
        <div class="content-control">
            <a href="/bookmarks?typ=site" class="button text-button">
                <div class="button-icon"></div><i data-feather="bookmark"
                    style="margin-right: 4px; height: 20px; width: 20px;"></i> Sites
            </a>
            <a href="/bookmarks?typ=image" class="button text-button">
                <div class="button-icon"></div><i data-feather="image"
                    style="margin-right: 4px; height: 20px; width: 20px;"></i> Images
            </a>
        </div>
        {% for item in items %}
        <div class="content-card">
            <div class="card-details">
                <div class="card-header">
                    <a href="{{ item['url'] }}">
                        <h2 class="card-title" id="{{ item['id'] }}ctitle">{{ item["title"] }}</h2>
                    </a>
                    <details>
                        <summary>Show Image</summary>
                        <img class="card-image" src="{{ item['content'][0] }}" alt="Image">
                    </details>
                </div>
                <div class="card-bottom" style="margin-top: 10px; white-space: nowrap;">
                    <a id="{{ item['url'] }}" 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>
                    <a id="{{ item['url'] }}" class="button share-button">
                        <div class="button-icon"></div><i data-feather="share-2" style="height: 20px; width: 20px;"></i>
                    </a>
                    <a id="{{ item['key'] }}" class="button remove-button">
                        <div class="button-icon"></div><i data-feather="trash-2" style="height: 20px; width: 20px;"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</body>
<script src="/static/scripts/bookmark.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace()
</script>

</html>