<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="content">
    <div class="row">
        <div class="col-12 mb-5">
            <!-- TODO bg color classes not loaded in scss -->
            <f:form action="list" controller="Date" pluginName="DateList" method="get" addQueryString="1" id="events_search" name="events_search">

                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="searchword">Suchwort</label>
                            <f:form.textfield type="text" class="form-control" id="searchword" name="searchword" value="{searchword}" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="start">Datum von</label>
                            <div class="input-group date" id="date_start" data-target-input="nearest">
                                <f:form.textfield type="text" class="form-control datetimepicker-input" id="start" name="start" value="{start}" additionalAttributes="{data-target: '#date_start'}" />
                                <div class="input-group-append" data-target="#date_start" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="end">Datum bis</label>
                            <div class="input-group date" id="date_end" data-target-input="nearest">
                                <f:form.textfield type="text" class="form-control datetimepicker-input" id="start" name="end" value="{end}" additionalAttributes="{data-target: '#date_end'}" />
                                <div class="input-group-append" data-target="#date_end" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-3">
                        <div class="form-check">
                            <f:form.radio class="form-check-input" name="region" value="{region.uid}" checked="{selRegion}==0" id="radio_0"/>
                            <label class="form-check-label" for="radio_0">Alle Städte</label>
                        </div>
                    </div>

                    <f:for each="{regions}" as="region">
                        <div class="col-3">
                            <div class="form-check">
                                <f:form.radio class="form-check-input" name="region" value="{region.uid}" checked="{selRegion}=={region.uid}" id="radio_{region.uid}"/>
                                <label class="form-check-label" for="radio_{region.uid}">{region.title}</label>
                            </div>
                        </div>
                    </f:for>
                </div>
                <div class="form-group mt-3">
                    <f:form.submit value="Suchen" class="btn btn-primary" />
                </div>
            </f:form>
        </div>
    </div>
</f:section>

</html>