<!-- Browser App Content Fragment -->
<!-- Uses classes from components.rcss -->

<div class="app-content">
    <!-- URL bar -->
    <div class="app-bar" style="padding: 8px 12px;">
        <div class="btn-icon" onclick="browserBack()" style="width: 40px; height: 40px;">
            <img src="../../icons/back.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="search-bar" style="flex: 1; margin: 0 8px; padding: 8px 16px;">
            <span style="color: #4CAF50; margin-right: 8px;">S</span>
            <input type="text" id="url-input" style="flex: 1; background-color: transparent; color: #FFFFFF; font-size: 14px;" value="mosis.app"/>
        </div>
        <div class="btn-icon" onclick="browserRefresh()" style="width: 40px; height: 40px;">
            <img src="../../icons/refresh.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="btn-icon" onclick="showTabs()" style="width: 40px; height: 40px;">
            <span style="font-size: 14px; color: #FFFFFF; font-weight: bold;">1</span>
        </div>
    </div>

    <!-- Page content -->
    <div style="flex: 1; overflow: auto; background-color: #FFFFFF; padding: 24px;">
        <div style="text-align: center;">
            <div style="font-size: 48px; font-weight: bold; color: #BB86FC; margin-bottom: 24px;">Mosis</div>
            <div class="search-bar" style="margin-bottom: 32px; background-color: #f1f3f4;">
                <input type="text" style="flex: 1; background-color: transparent; color: #333333; font-size: 16px; text-align: center;" placeholder="Search or enter URL"/>
            </div>
            <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;">
                <div onclick="navigateTo('google.com')" style="cursor: pointer; width: 80px; display: flex; flex-direction: column; align-items: center;">
                    <div style="width: 48px; height: 48px; border-radius: 8px; background-color: #4285F4; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 20px; margin-bottom: 8px;">G</div>
                    <span style="font-size: 12px; color: #666666;">Google</span>
                </div>
                <div onclick="navigateTo('youtube.com')" style="cursor: pointer; width: 80px; display: flex; flex-direction: column; align-items: center;">
                    <div style="width: 48px; height: 48px; border-radius: 8px; background-color: #FF0000; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 20px; margin-bottom: 8px;">Y</div>
                    <span style="font-size: 12px; color: #666666;">YouTube</span>
                </div>
                <div onclick="navigateTo('github.com')" style="cursor: pointer; width: 80px; display: flex; flex-direction: column; align-items: center;">
                    <div style="width: 48px; height: 48px; border-radius: 8px; background-color: #333333; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 20px; margin-bottom: 8px;">G</div>
                    <span style="font-size: 12px; color: #666666;">GitHub</span>
                </div>
                <div onclick="navigateTo('reddit.com')" style="cursor: pointer; width: 80px; display: flex; flex-direction: column; align-items: center;">
                    <div style="width: 48px; height: 48px; border-radius: 8px; background-color: #FF4500; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 20px; margin-bottom: 8px;">R</div>
                    <span style="font-size: 12px; color: #666666;">Reddit</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom bar -->
    <div class="bottom-nav">
        <div class="bottom-nav-item" onclick="browserBack()">
            <img src="../../icons/back.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="bottom-nav-item" onclick="browserForward()">
            <img src="../../icons/forward.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="bottom-nav-item" onclick="browserHome()">
            <img src="../../icons/home.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="bottom-nav-item" onclick="addBookmark()">
            <img src="../../icons/star.tga" style="width: 24px; height: 24px;"/>
        </div>
        <div class="bottom-nav-item" onclick="showBrowserMenu()">
            <img src="../../icons/menu.tga" style="width: 24px; height: 24px;"/>
        </div>
    </div>
</div>

<script>
local current_url = "mosis.app"

function navigateTo(url)
    print("[Browser] Navigating to: " .. url)
    current_url = url

    local doc = shell_document
    if doc then
        local url_input = doc:GetElementById("url-input")
        if url_input then
            url_input.value = url
        end
    end

    if showToast then
        showToast("Loading " .. url)
    end
end

function browserBack()
    print("[Browser] Back")
    if showToast then
        showToast("Back")
    end
end

function browserForward()
    print("[Browser] Forward")
    if showToast then
        showToast("No forward history")
    end
end

function browserRefresh()
    print("[Browser] Refresh")
    if showToast then
        showToast("Page refreshed")
    end
end

function browserHome()
    print("[Browser] Home")
    navigateTo("mosis.app")
end

function showTabs()
    print("[Browser] Show tabs")
    if showToast then
        showToast("1 tab open")
    end
end

function addBookmark()
    print("[Browser] Add bookmark")
    if showToast then
        showToast("Bookmark added")
    end
end

function showBrowserMenu()
    print("[Browser] Menu")
    if showToast then
        showToast("Browser menu")
    end
end

print("[Browser] Content loaded")
</script>
