{namespace neos=Neos\Neos\ViewHelpers}
<f:layout name="Default"/>
<f:section name="Title">
    Anfragen - Übersicht
</f:section>
<f:section name="Content">
    <div class="neos-row-fluid">
        <div class="export-list">
            <div class="neos-folder" id="exportProperties">Export Properties <i class="fold-toggle fas fa-chevron-down" data-toggle="fold-exportProperties"></i></div>
            <form action="/neos/inquiry/export" method="get" id="export-list">
                <!-- The following container is filled via JS -->
                <div id="export-fields" class="neos-control-group fold-exportProperties"></div>

                <label class="date-range-label">Export Zeitraum ausgeben</label>
                <div class="date-range-container neos-clearfix">
                    <div class="neos-span4">
                        <label><i class="icon-calendar"></i> Von</label>
                        <div class="input input--datepicker">
                            <f:form.textfield id="from-range" name="dateRange[fromDate]" class="date-range input__field" />
                        </div>
                    </div>
                    <div class="neos-span4">
                        <label><i class="icon-calendar"></i> Bis</label>
                        <div class="input input--datepicker">
                            <f:form.textfield id="until-range" name="dateRange[untilDate]" class="date-range input__field" />
                        </div>
                    </div>
                </div>
                <button class="neos-button neos-button-primary" type="submit">Ergebnis exportieren</button>
            </form>
        </div>
        <table class="neos-table" id="inquiry-table">
            <thead>
            <tr>
                <f:for each="{columns}" key="key" as="column" iteration="iterator">
                    <th data-dynatable-column="{key}" {f:if(condition: iterator.isLast, then: 'colspan="2"')} >{column}</th>
                </f:for>

            </tr>
            </thead>
            <tbody>
            <!-- rows rendered async by dynatable  -->
            </tbody>
            <tfoot>
            <tr>
                <f:for each="{columns}" key="key" as="column" iteration="iterator">
                    <th {f:if(condition: iterator.isLast, then: 'colspan="2"')} >{column}</th>
                </f:for>
            </tr>
            </tfoot>
        </table>
    </div>

</f:section>

<f:section name="Scripts">
    <link type="text/css" rel="stylesheet"
          href="{f:uri.resource(package: 'GesagtGetan.Inquiry', path: 'Styles/backend.css')}"/>

    <script defer type="text/javascript"
            src="{f:uri.resource(package: 'GesagtGetan.Inquiry', path: 'JavaScript/vendor/jquery.dynatable.js')}"></script>
    <script defer type="text/javascript" src="{f:uri.resource(package: 'GesagtGetan.Inquiry', path: 'JavaScript/vendor/moment.js')}"></script>
    <script defer type="text/javascript" src="{f:uri.resource(package: 'GesagtGetan.Inquiry', path: 'JavaScript/vendor/pikaday.js')}"></script>
    <script defer type="text/javascript"
            src="{f:uri.resource(package: 'GesagtGetan.Inquiry', path: 'JavaScript/backend.js')}"></script>
</f:section>