<?xml version="1.0" encoding="UTF-8"?>
<idoc title="IDOC Layout Example" icon="icon.png">

    <!-- Layer part -->
    <layer dataset="simple.igeo">

        <!-- Description of the layer -->
        <info>
            This is an example layer demonstrating features for idoc pages.
        </info>

        <!-- Name of area coverage -->
        <coverage name="Gothenburg"/>

        <!-- Tag/Category -->
        <tag name="Example"/>
    </layer>

    <!-- Page part -->
    <!-- Text below is shown on the Layer page -->

    <!-- Styles to be used later -->
    <style name="header" fontSize="17" fontStyle="bold" alignX="middle"/>
    <style name="header2" fontSize="12" fontStyle="bold"/>
    <style name="small" fontSize="8" fontStyle="italic"/>

    <style apply="header">
        IDOC Layout Example Layer
    </style>

    <br/>
    <style apply="small">
        Some text, with the "small" style - font size 8 and italic.
    </style>
    <br/>
    <br/>
    <sectionheader title="Section text input field, with icon" />
    <section title="Name" value="Enter name..." icon="icon.png" />

    <br/>
    <sectionheader title="Section, read-only" />
    <section title="Company" value="Idevio" readonly="true" />

    <br/>
    <sectionheader title="Section combo box"/>
    <section title="Day" value="mon">
        <option value="mon" label="Monday"/>
        <option value="tue" label="Tuesday"/>
        <option value="wed" label="Wednesday"/>
        <option value="thu" label="Thursday"/>
        <option value="fri" label="Friday"/>
    </section>

    <br/>
    <sectionheader title="Section check box"/>
    <section title="Check box" value="true"/>

    <br/>
    <sectionheader title="Section buttons"/>
    <section title="Plain button" action="app.showMap();"/>
    <section title="Button with icon" action="app.showMap();" icon="icon.png" />
    <section title="Button" value="with subtitle" action="app.showMap();" readonly="true"/>
    <section title="Button with icon" value="and subtitle" action="app.showMap();" icon="icon.png" readonly="true"/>
    <section title="Multi-action button" readonly="true">
        <option value="sub1" label="Show map" action="app.showMap();" />
        <option value="sub2" label="Reload page" action="app.reloadPage()" />
    </section>

    <br/>
    <sectionheader title="Images, different widths"/>
    <image width="10" ref="icon.png"/><br/>
    <image width="50" ref="icon.png"/><br/>

</idoc>

