<div
    piwik-expand-on-click
    class="periodSelector piwikSelector"
>
    <a
        id="date"
        class="title"
        title="{{ 'General_ChooseDate'|translate:periodSelector.getCurrentlyViewingText() }}"
        tabindex="-1"
    >
        <span class="icon icon-calendar"></span>
        {{ periodSelector.getCurrentlyViewingText() }}
    </a>
    <div id="periodMore" class="dropdown">
        <table>
            <tr>
                <td>
                    <piwik-date-range-picker
                        ng-show="periodSelector.selectedPeriod === 'range'"
                        class="period-range"
                        start-date="periodSelector.startRangeDate"
                        end-date="periodSelector.endRangeDate"
                        range-change="periodSelector.onRangeChange(start, end)"
                        submit="periodSelector.onApplyClicked()"
                    >
                    </piwik-date-range-picker>
                    <div
                        class="period-date"
                        ng-show="periodSelector.selectedPeriod !== 'range'"
                    >
                        <piwik-period-date-picker
                            id="datepicker"
                            period="periodSelector.selectedPeriod"
                            date="periodSelector.periodValue === periodSelector.selectedPeriod ? periodSelector.dateValue : null"
                            select="periodSelector.setPiwikPeriodAndDate(periodSelector.selectedPeriod, date)"
                        >
                        </piwik-period-date-picker>
                    </div>
                </td>
                <td>
                    <div class="period-type">
                        <h6>{{ 'General_Period'|translate }}</h6>
                        <div id="otherPeriods">
                            <p ng-repeat="period in periodSelector.periods">
                                <label
                                    ng-attr-title="{{ period === periodSelector.periodValue ? '' : ('General_DoubleClickToChangePeriod'|translate) }}"
                                    ng-class="{'selected-period-label': period === periodSelector.selectedPeriod}"
                                    ng-dblclick="periodSelector.changeViewedPeriod(period)"
                                >
                                    <input
                                            type="radio"
                                            name="period"
                                            ng-attr-id="period_id_{{ period }}"
                                            ng-model="periodSelector.selectedPeriod"
                                            ng-checked="periodSelector.selectedPeriod == period"
                                            ng-change="periodSelector.selectedPeriod = period"
                                            ng-dblclick="periodSelector.changeViewedPeriod(period)"
                                    />
                                    <span>{{ periodSelector.getPeriodDisplayText(period) }}</span>
                                </label>
                            </p>
                        </div>
                    </div>
                </td>
            </tr>
        </table>

        <div class="compare-checkbox" ng-if="periodSelector.isComparisonEnabled()">
            <label>
                <input
                        id="comparePeriodTo"
                        type="checkbox"
                        ng-model="periodSelector.isComparing"
                />
                <span>{{ 'General_CompareTo'|translate }}</span>
            </label>

            <div
                    id="comparePeriodToDropdown"
                    piwik-field
                    name="comparePeriodToDropdown"
                    uicontrol="select"
                    options="periodSelector.comparePeriodDropdownOptions"
                    ng-model="periodSelector.comparePeriodType"
                    full-width="true"
                    disabled="!periodSelector.isComparing"
            ></div>
        </div>

        <div class="compare-date-range" ng-if="periodSelector.isComparing && periodSelector.comparePeriodType == 'custom'">
            <div>
                <div
                        id="comparePeriodStartDate"
                        piwik-field
                        name="comparePeriodStartDate"
                        uicontrol="text"
                        ng-model="periodSelector.compareStartDate"
                        full-width="true"
                        title="Start Date"
                        placeholder="YYYY-MM-DD"
                ></div>

                <span class="compare-dates-separator"></span>

                <div
                        id="comparePeriodEndDate"
                        piwik-field
                        name="comparePeriodEndDate"
                        uicontrol="text"
                        ng-model="periodSelector.compareEndDate"
                        full-width="true"
                        title="End Date"
                        placeholder="YYYY-MM-DD"
                ></div>
            </div>
        </div>

        <div class="apply-button-container">
            <input
                    type="submit"
                    value="{{ 'General_Apply'|translate }}"
                    id="calendarApply"
                    class="btn"
                    ng-click="periodSelector.onApplyClicked()"
                    ng-disabled="!periodSelector.isApplyEnabled()"
            />
        </div>

        <div id="ajaxLoadingCalendar" ng-if="periodSelector.isLoadingNewPage">
            <div piwik-activity-indicator loading="true"></div>
            <div class="loadingSegment">
                {{ 'SegmentEditor_LoadingSegmentedDataMayTakeSomeTime'|translate }}
            </div>
        </div>
    </div>
</div>