{namespace neos=TYPO3\Neos\ViewHelpers}

<f:section name="stylesheets">
<!-- Odometer Stylesheets -->
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-default.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-minimal.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-car.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-digital.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-plaza.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-slot-machine.css')}" >
    <link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'Style/odometer-theme-train-station.css')}" >
</f:section>

<f:section name="odometer">
    <div id="odometer-{node.identifier}" {attributes -> f:format.raw()}>

        <f:if condition="{showDescription}">
            <f:if condition="{descriptionPosition} == 'top'">
                {neos:contentElement.editable(property: 'description', class: 'description top')}
            </f:if>
            <f:if condition="{descriptionPosition} == 'left'">
                {neos:contentElement.editable(property: 'description', class: 'description left')}
            </f:if>
        </f:if>

        <f:if condition="{showIcon}">
            <f:if condition="{iconPosition} == 'left'">
                <i class="fa {icon} position-{iconPosition}"></i>
            </f:if>
            <f:if condition="{iconPosition} == 'top'">
                <i class="fa {icon} position-{iconPosition}"></i>
            </f:if>
        </f:if>

        <div class="odometer">{startValue}</div>

        <f:if condition="showIcon">
            <f:if condition="{iconPosition} == 'right'">
                <i class="fa {icon} position-{iconPosition}"></i>
            </f:if>
            <f:if condition="{iconPosition} == 'bottom'">
                <i class="fa {icon} position-{iconPosition}"></i>
            </f:if>
        </f:if>

        <f:if condition="{showDescription}">
            <f:if condition="{descriptionPosition} == 'bottom'">
                {neos:contentElement.editable(property: 'description', class: 'description bottom')}
            </f:if>
            <f:if condition="{descriptionPosition} == 'right'">
                {neos:contentElement.editable(property: 'description', class: 'description right')}
            </f:if>
        </f:if>
    </div>
</f:section>


<f:section name="bodyJavascriptPlugin">
    <!-- jQuery Odometer, jQuery has to be loaded before! -->
    <script type="text/javascript" src="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'JavaScript/odometer.min.js')}"></script>
</f:section>

<f:section name="bodyJavaScriptInit">
    <script type="text/javascript" src="{f:uri.resource(package: 'Axovis.Neos.Odometer', path: 'JavaScript/odometer-init.js')}"></script>
</f:section>