<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:b="urn:import:org.gwtbootstrap3.client.ui"
             xmlns:bhtml="urn:import:org.gwtbootstrap3.client.ui"
             xmlns:m="urn:import:de.swm.commons.mobile.client.widgets"
             xmlns:ms="urn:import:de.swm.commons.mobile.client.widgets.scroll">
    <g:HTMLPanel>
        <m:HeaderPanel ui:field="header" leftButton="Back">
            <m:OnlyDesktopLabel>Bootstrap3 integration</m:OnlyDesktopLabel>
        </m:HeaderPanel>
        <div class="row">
            <div class="col-md-10">
                <h4>  SWM-Mobile and Bootstrap3</h4>
            </div>
        </div>
        <ms:ScrollPanel hasTextBox="true">
            <bhtml:Div styleName="container-fluid">
                <bhtml:Div styleName="row">
                    <bhtml:Div styleName="col-md-12">
                        <!-- Modal properties cannot be set correctly with uibinder, manual construction in source code necessary -->
                        <b:Form type="HORIZONTAL">
                            <b:FieldSet>
                                <b:Popover ui:field="dateRangeTooltip" trigger="MANUAL" placement="RIGHT">
                                    <b:FormGroup ui:field="dateRangeGroup">
                                        <b:FormLabel for="tariffFormStartDate" addStyleNames="col-md-4">Range
                                        </b:FormLabel>
                                        <g:FlowPanel addStyleNames="col-md-4">
                                            <b:TextBox></b:TextBox>
                                        </g:FlowPanel>
                                        <g:FlowPanel addStyleNames="col-md-4">
                                            <b:TextBox></b:TextBox>
                                        </g:FlowPanel>
                                    </b:FormGroup>
                                </b:Popover>

                                <b:FormGroup>
                                    <b:FormLabel addStyleNames="col-md-4">Role</b:FormLabel>
                                    <g:FlowPanel addStyleNames="col-md-8">
                                        <b:TextBox></b:TextBox>
                                    </g:FlowPanel>
                                </b:FormGroup>

                                <b:FormGroup>
                                    <b:FormLabel for="formGroupSelect" addStyleNames="col-md-4">Group
                                    </b:FormLabel>
                                    <g:FlowPanel addStyleNames="col-md-4">
                                        <b:TextBox></b:TextBox>
                                    </g:FlowPanel>
                                    <g:FlowPanel addStyleNames="col-md-4">
                                        <b:TextBox></b:TextBox>
                                    </g:FlowPanel>
                                </b:FormGroup>

                                <b:FormGroup>
                                    <b:FormLabel for="formFixedAmount" addStyleNames="col-md-4">Salary
                                    </b:FormLabel>
                                    <g:FlowPanel addStyleNames="col-md-8">
                                        <b:InputGroup>
                                            <b:TextBox></b:TextBox>
                                            <b:InputGroupAddon icon="EUR"/>
                                        </b:InputGroup>
                                    </g:FlowPanel>
                                </b:FormGroup>

                                <b:FormGroup>
                                    <b:FormLabel for="formTotalSalary" addStyleNames="col-md-4">Bonus
                                    </b:FormLabel>
                                    <b:Popover ui:field="totalSalaryPopover" title="Effektives Jahresgehalt"
                                               trigger="MANUAL"
                                               placement="RIGHT">
                                        <g:FlowPanel addStyleNames="col-md-8">
                                            <b:InputGroup>
                                                <b:TextBox></b:TextBox>
                                                <b:InputGroupAddon icon="EUR"/>
                                            </b:InputGroup>
                                        </g:FlowPanel>
                                    </b:Popover>
                                </b:FormGroup>
                            </b:FieldSet>

                            <b:FormGroup>
                                <!-- <b:Anchor icon="CARET_DOWN" dataToggle="COLLAPSE" href="#tariffDetailCollapse" addStyleNames="col-md-4 {style.detail-anchor}">Details</b:Anchor> -->
                                <b:Anchor dataToggle="COLLAPSE" href="#tariffDetailCollapse"
                                          addStyleNames="col-md-4">▼ Details
                                </b:Anchor>
                                <g:FlowPanel addStyleNames="col-md-8"/>
                            </b:FormGroup>
                            <b:Collapse b:id="tariffDetailCollapse" toggle="false">
                                <b:FieldSet>
                                    <b:FormGroup ui:field="employmentPercentageGroup">
                                        <b:FormLabel for="formEmploymentPercentage" addStyleNames="col-md-4">Part time
                                        </b:FormLabel>
                                        <g:FlowPanel addStyleNames="col-md-8">
                                            <b:Popover ui:field="employmentPercentageTooltip" trigger="MANUAL"
                                                       placement="RIGHT">
                                                <b:InputGroup>
                                                    <b:TextBox></b:TextBox>
                                                    <b:InputGroupAddon text="%"/>
                                                </b:InputGroup>
                                            </b:Popover>
                                        </g:FlowPanel>
                                    </b:FormGroup>

                                    <b:FormGroup ui:field="retirementProvisionsGroup">
                                        <b:FormLabel for="formRetirementProvisions" addStyleNames="col-md-4">
                                            401K
                                        </b:FormLabel>
                                        <g:FlowPanel addStyleNames="col-md-8">
                                            <b:Popover ui:field="retirementProvisionsTooltip" trigger="MANUAL"
                                                       placement="RIGHT">
                                                <b:InputGroup>
                                                    <b:TextBox></b:TextBox>
                                                    <b:InputGroupAddon icon="EUR"/>
                                                </b:InputGroup>
                                            </b:Popover>
                                        </g:FlowPanel>
                                    </b:FormGroup>
                                </b:FieldSet>
                            </b:Collapse>


                        </b:Form>


                        <b:Button ui:field="resetButton">Reset</b:Button>
                        <b:Button ui:field="saveButton" type="PRIMARY">Save</b:Button>
                        <b:PanelFooter/>
                    </bhtml:Div>
                </bhtml:Div>
            </bhtml:Div>
        </ms:ScrollPanel>

    </g:HTMLPanel>
</ui:UiBinder>