experience-based-fact-box-aimless/src/app.html

<template>
    <require from="./scss/styles.css"></require>
    <require from="./sampler-visual"></require>
    <require from="./sampler-textual.html"></require>
    <require from="./sampling-info.html"></require>
    <main class="${samplers.length === 2 ? 'two-samplers' : 'single-sampler'} ${format.name}">
        <header>
            <h1 class="factbox-title">${title[lang]}
                <a href="#" click.delegate="toggleSource($event)"><i class="demo-icon ${modal.icon.class}" innerhtml.bind="modal.icon.glyph"></i></a>
            </h1>
            <h4 class="factbox-description">
                ${description[lang]}
                <select id="period-selector"
                        value.bind="selectedPeriod"
                        change.delegate="periodChanged()"
                        class="period-selectors form-item">
                    <option repeat.for="period of periods" model.bind="period">${period.value} ${labels.period[lang]}</option>
                </select>
            </h4>
            <div as-element="sampling-info" id="source-modal" css="visibility: ${modal.visibility}">
            </div>
        </header>
        <section class="samplers">
            <div repeat.for="sampler of samplers"
                 class="sampler sampler-wrapper-${samplers.indexOf(sampler)}">
                <div class="reference-group">
                    <h4 class="reference-group-title">
                        ${referenceClasses[sampler.id].prefix[lang]} ${sampler.samples.length} ${referenceClasses[sampler.id].infix[lang]}
                    </h4>
                    <div class="investment-options-ratio">
                        <div class="investment-option-selector investment-option-selector-left">
                            <select id="investment-option-selector"
                                    value.bind="selectedOption1"
                                    change.delegate="investmentOptionChanged()"
                                    class="form-item">
                                <option repeat.for="iopt of investmentOptions"
                                        disabled.bind="isComparism($index, 0)"
                                        model.bind="iopt">${iopt.desc}</option>
                            </select>
                        </div>
                        <div class="investment-option-range">
                            <div class="investment-options-range-labels">
                                <span class="range-label-left">${sampler.stockRatioRepr}</span>
                                <span class="range-label-right">${sampler.depositRatioRepr}</span>
                            </div>
                            <input type="range" id="ratio-sampler-${sampler.id}" min="0" max="1.0" step="0.01" value.bind="sampler.depositRatio" change.delegate="ratioChanged()" />
                        </div>
                        <div class="investment-option-selector investment-option-selector-right">
                            <select id="investment-option-selector"
                                    value.bind="selectedOption2"
                                    change.delegate="investmentOptionChanged()"
                                    class="form-item">
                                <option repeat.for="iopt of investmentOptions"
                                        disabled.bind="isComparism($index, 1)"
                                        model.bind="iopt">${iopt.desc}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <sampler-visual
                    class="visual-${sampler.id}"
                    sampler.bind="sampler"
                    soffsets.bind="soffsets"
                    colours.bind="colours"
                    lang.bind="lang"
                    max-samples.bind="maxSamples"
                    sort-method-id.bind="format.sortId"
                    if.bind="createVisualisation"
                    show.bind="format.showVisualisation">
                </sampler-visual>
            </div>
        </section>
        <aside>
            <div class="buttons size-selectors">
                <div repeat.for="gsize of groupSizes" class="size-input">
                    <input id="size-${gsize.id}" type="radio" class="input-radio" model.bind="gsize.id" checked.bind="format.sizeId" change.delegate="groupSizeChanged" />
                    <label for="size-${gsize.id}" class="form-item">
                        ${gsize.name}</label>
                </div>
            </div>
            <sampler-textual
                show.bind="format.showText"
                class="textual-0"
                colours.bind="colours"
                sampler.bind="samplers[0]"
                textual.bind="textual"
                lang.bind="lang"
                group-size-id.bind="format.sizeId">
            </sampler-textual>
                <button class="sample form-item"
                        if.bind="format.showSampleButton"
                        click.delegate="sampleButtonClicked($event)"
                        disabled.bind="maximumSamplesDrawn">
                    <a href="#"> ${labels.sample[lang]}</a>
                </button>
            <sampler-textual
                show.bind="format.showText"
                class="textual-1"
                colours.bind="colours"
                sampler.bind="samplers[1]"
                textual.bind="textual"
                lang.bind="lang"
                group-size-id.bind="format.sizeId">
            </sampler-textual>
            <div class="buttons">
                <button id="export" class="form-item export-button">
                    <a href.bind="pdfDownloadURL" id="exportPDF" class="export button"
                                                                 download.bind="pdfFilename">
                        <i class="demo-icon icon-download">&#xe801;</i>Faktenbox
                    </a>
                </button>
                <button class="form-item"
                        if.bind="format.showSampleButton"
                        click.delegate="reset($event)"
                        disabled.bind="resetEnabled">
                    <a href="#"><i class="demo-icon icon-ccw">&#xe802;</i>${labels.reset[lang]}</a>
                </button>
            </div>
        </aside>
    </main>
</template>