<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:chart="http://typo3.org/ns/Ig/IgChart/ViewHelpers" xmlns:dp="http://typo3.org/ns/Internetgalerie/IgDatapoolFe/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />

<f:section name="content">
    <div class="ig-reservations-statistics">
        <div class="ig-reservation-search frame-space-after-extra-small">
            <f:form class="form-kontakt dp-form" action="show">
                <div class="ym-grid block-left">
                    <div class="ym-g50 ig-inline fancyInput">
                        <dp:form.date placeholder=" " id="ig-reservations-startDate" class="dp-pickadate fancyElement form-control" placeholder=" " name="search[startDate]" value="{search.startDate}" />
                        <label for="ig-reservations-startDate" class="control-label"><f:translate key="search.start_date" /></label>
                    </div>
                    <div class="ym-g50 ig-inline fancyInput">
                        <dp:form.date placeholder=" " id="ig-reservations-endDate" class="dp-pickadate fancyElement form-control" placeholder=" " name="search[endDate]" value="{search.endDate}" />
                        <label for="ig-reservations-endDate" class="control-label"><f:translate key="search.end_date" /></label>
                    </div>
                    <div class="ym-g80 ig-inline">
                        <div class="selectIeFix">
                            <f:form.select name="search[calendar]" options="{calendars}" optionLabelField="name" optionValueField="uid" prependOptionLabel="{f:translate(key: 'tx_igreservations_domain_model_calendar')}" prependOptionValue="" value="{search.calendar}" />
                        </div>
                    </div>
                    <div class="ym-g20 ig-inline">
                        <f:form.submit value="{f:translate(key: 'search')}" />
                    </div>
                </div>
            </f:form>
        </div>
        <div class="ig-reservation-export frame-space-after-medium">
            <ul class="ce-uploads csc-uploads ce-uploads-type-{data.uploads_type}">
                <li class="csc-uploads-element csc-uploads-element-xlsx">
                    <f:link.action action="export" arguments="{search: search}">
                        <span class="ce-uploads-fileName csc-uploads-fileName">
                            <f:translate key="statistics.export" />
                        </span>
                    </f:link.action>
                </li>
            </ul>
        </div>
        <div class="ig-reservation-chart frame-space-after-small">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerPerson" /></h2>
            </div>
            <chart:chart.pie chartRows="{statsReservationsPerPerson}" showLegend="1"  x="x" y="y" />
        </div>
        <div class="ig-reservation-chart frame-space-after-small">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerBookingType" /></h2>
            </div>
            <chart:chart.pie chartRows="{statsReservationsPerBookingType}" showLegend="1"  x="x" y="y" />
        </div>
        <div class="ig-reservation-chart frame-space-after-small">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerReservationType" /></h2>
            </div>
            <chart:chart.pie chartRows="{statsReservationsPerReservationType}" showLegend="1"  x="x" y="y" />
        </div>
        <div class="ig-reservation-chart frame-space-after-small">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerLocation" /></h2>
            </div>
            <chart:chart.pie chartRows="{statsReservationsPerLocation}" showLegend="1"  x="x" y="y" />
        </div>
        <div class="ig-reservation-chart frame-space-after-small">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerMonth" /></h2>
            </div>
            <chart:chart.bar chartRows="{statsReservationsPerMonth}"  x="x" y="y" />
        </div>
        <div class="ig-reservation-chart">
            <div class="csc-header csc-header-layout2 ce-header">
                <h2><f:translate key="statistics.labels.statsReservationsPerYear" /></h2>
            </div>
            <chart:chart.bar chartRows="{statsReservationsPerYear}"  x="x" y="y" />
        </div>
    </div>
</f:section>