<div id="periodString" class="piwikTopControl periodSelector">
    <div id="date">{{ 'General_DateRange'|translate }} <strong>{{ prettyDate }}</strong></div>
    <div class="calendar-icon"></div>
    <div id="periodMore">
        <div class="period-date">
            <h6>{{ 'General_Date'|translate }}</h6>

            <div id="datepicker"></div>
        </div>
        <div class="period-range" style="display:none;">
            <div id="calendarRangeFrom">
                <h6>{{ 'General_DateRangeFrom'|translate }}<input tabindex="1" type="text" id="inputCalendarFrom" name="inputCalendarFrom"/></h6>

                <div id="calendarFrom"></div>
            </div>
            <div id="calendarRangeTo">
                <h6>{{ 'General_DateRangeTo'|translate }}<input tabindex="2" type="text" id="inputCalendarTo" name="inputCalendarTo"/></h6>

                <div id="calendarTo"></div>
            </div>
        </div>
        <div class="period-type">
            <h6>{{ 'General_Period'|translate }}</h6>
			<span id="otherPeriods">
            {% for label,thisPeriod in periodsNames %}
                <input type="radio" name="period" id="period_id_{{ label }}" value="{{ linkTo( { 'period': label} ) }}"{% if label==period %} checked="checked"{% endif %} />
                <label for="period_id_{{ label }}">{{ thisPeriod.singular }}</label>
                <br/>
            {% endfor %}
			</span>
            <input tabindex="3" type="submit" value="{{ 'General_ApplyDateRange'|translate }}" id="calendarRangeApply"/>
            {% import 'ajaxMacros.twig' as ajax %}
            {{ ajax.loadingDiv('ajaxLoadingCalendar') }}
        </div>
    </div>
    <div class="period-click-tooltip" style="display:none;">{{ 'General_ClickToChangePeriod'|translate }}</div>
</div>
