-- vgui.Create( "HTML", Base )
-- HTML:SetSize( 1024, 1024 )
local canvas = render.createHTMLCanvas(1024, 1024)

-- sf-canvas min level; required (?)
-- No access to body or lower
canvas:setHTML([[
    <sf-canvas>
        <div id="titles">
            <h1></h1>
            <h2></h2>
            <h3></h3>
        </div>

        <br>  <!-- Invalid -->
        <br/> <!-- Allowed -->

        <div>
            <button id="increase" type="button" clickable>Increase Counter</button>
            <p>0</p>
        </div>

        <div>
            <button id="increase2" type="button">Increase Counter 2</button>
            <p>0</p>
        </div>

        <div

    </sf-canvas>
]])


-- separating CSS from HTML for safetly reasons
canvas:setCSS([[
    p{
        background-color: #FF0000;
    }

    title{
        position: relative;
        color: #FFFFFF;
    }
]])


local titles = canvas:getElementByID("titles")
local titlesChildren = titles:getChildren()

for k, v in pairs(titlesChildren) do
    -- jQuery would make these really easy to implement
    v:addClass("title")
    v:setText("Title "..k)
    v:setCSS("left", k.."px")
end

titles:insertElement("<p>Hi!</p>", nil=LAST)


local function increaseCounter(element)
    local sibling = element:getNext()
    local count   = tonumber(sibling:getText())
    sibling:setText(tostring(count + 1))
end

-- Interaction method: clickable attribute
hook.add("htmlInputHandler", "", function(element, id)
    if id == "increase" then
        increaseCounter(element)
    end
end)


-- Interaction method: callback
local button = canvas:getAllElements()[4]
button:setCallback("OnClick", increaseCounter)

button:setCallback("MouseEnter", function(element)
    el:setCSS("color", "#00FF00")
end)


hook.add("render", "", function()

    -- https://wiki.garrysmod.com/page/Panel/GetHTMLMaterial
    render.setMaterial("!"..canvas:getMaterial())
    render.drawTexturedRect(0,0,1024,1024)

end)