<template>
    <require from="./../../webcomponents/pragma-group/pragma-group.html"></require>
    <div>
        <pragma-group title="My title is set">
            <div class="pragma-group-body">
                <p>Bacon ipsum dolor amet rump pork chop swine kevin pork belly alcatra shank burgdoggen short ribs
                    shoulder
                    ham pancetta tri-tip. Andouille salami ground round landjaeger, shank ribeye jerky strip steak. Pork
                    chop burgdoggen buffalo ribeye frankfurter. Short loin spare ribs boudin meatball turducken shoulder
                    pastrami fatback tri-tip kevin chicken pig. Sirloin meatball alcatra ribeye brisket spare ribs
                    tongue
                    biltong ham hock buffalo andouille. Bresaola spare ribs short loin kevin ham hock jerky capicola
                    brisket
                    drumstick rump bacon boudin meatloaf.</p>
                <button class="primary">This button is in the body slot</button>
            </div>
        </pragma-group>

        <pragma-group title="Header">
            <div class="pragma-group-body">
                <label-composite id="model.description" label="Description" descriptor="">
                    <input value.bind="model.description" aria-label="Description"></input>
                </label-composite>

                <label-composite id="model.model" label="Model" required="" descriptor="">
                    <select value.two-way="model.model" data-datasource="2">

                        <option model.bind="0">Undefined</option>

                        <option model.bind="1">Model 1</option>

                        <option model.bind="2">Model 2</option>

                    </select>
                </label-composite>

                <label-composite id="model.make" label="Make" required="" descriptor="">
                    <select value.two-way="model.make" data-datasource="model.makeoptions">

                        <option repeat.for="o of model.makeoptions" model.bind="o.id">${o.title}</option>

                    </select>
                </label-composite>

                <label-composite id="model.code" label="Code" descriptor="">
                    <textarea value.bind="model.code" aria-label="Code"></textarea>
                </label-composite>
            </div>
        </pragma-group>
    </div>

</template>