const {
    a, body, h1, h2, article, section, p,
    // Interactive content
    details, summary,
    // Scripting
    script, canvas
} = htmlmodule

const dangerscript = script(`(${(() => {
    const { doctype, documentElement } = parent.document
    doctype.remove()
    documentElement.remove()
}).toString()})()`)

const dangerbutton = canvas({
    width : 150,
    height : 150,
    onclick : () => document.body.append(dangerscript),
    children : 'Don\'t click!'
})

const ctx = dangerbutton.getContext('2d')

ctx.strokeStyle = '#000'
ctx.strokeRect(10, 10, 130, 130)
ctx.fillStyle = '#f00'
ctx.fillRect(10, 10, 130, 130)
ctx.font = '30px Arial'
ctx.fillStyle = '#fff'
ctx.fillText('DON\'T!', 24, 85)

document.body = body(article([
    h1([a({
        href : '#',
        target : '_top',
        children : 'Index'
    }), ' → Interactive and scripting']),
    section([
        h1('Details and summary'),
        details([
            summary('Danger! Don\'t open!'),
            h1('Canvas and script'),
            p(['Do not click the canvas below! ',
                'It appends a very dangerous script ' +
                'to the document\'s body!']),
            dangerbutton
        ])
    ])
]))

@@ -193,86 +193,215 @@
     
-const %7B doctype, documentElement %7D = parent.document%0A    doctype.remove()%0A    
+alert('Error!%5Cn' +%0A        '%5CnThe application is broken by user.' +%0A        ' Do not report an issue, please.' +%0A        ' Reload the page and follow the %22Index%22 reference to continue.')%0A    parent.document.
 docu

add error message