<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="title">${title}</div>
            </div>
        </div>
        <div class="page-content">
            <a class="button" @click=${openAlert}>Open Alert</a>
            <a class="button" @click=${printSomething}>Print Something</a>
            <div class="list simple-list">
                <ul>
                    ${names.map((name) => $h`
                    <li>${name}</li>
                    `)}
                </ul>
            </div>
        </div>
    </div>
</template>
<!-- component styles -->
<style>
    .red-link {
        color: red;
    }
</style>
<!-- rest of component logic -->
<script>
    // script must return/export component function
    export default (props, { $f7, $on }) => {
        const title = 'Component Page';
        const names = ['John', 'Vladimir', 'Timo'];

        const openAlert = () => {
            $f7.dialog.alert('Hello world!\nblah blah blah');
        }

        async function printSomething() {
            // Print some text to the receipt printer
            var printer = await global.apis.print.getReceiptPrinter();
            printer.addFieldBlock('Hello world!\nblah blah blah\n\n', "C");
            global.apis.print.printReceiptData(await printer.getData());
        }

        $on('pageInit', () => {
            // do something on page init
        });
        $on('pageAfterOut', () => {
            // page has left the view
        });

        // component function must return render function
        return $render;
    }
</script>
