{% load i18n %}
<div class="time-search-container relative">
    <div class="close-popup-panel-container time-filter-title">
        <span class="close-popup-panel" tabindex="0" role="button" id="time-filter-close-btn"
            data-bind="onEnterkeyClick, onSpaceClick, 
                click: function(){selectedPopup(''); $root.shiftFocus('#time-filter-open-btn');},
                attr: {'aria-label': $root.translations.closeTimeFilter},
                text: $root.translations.timeFilter,
        "></span>
        <div class="btn-group">
            <button class="btn btn-primary btn-active-primary dropdown-toggle" data-toggle="dropdown" type="button" data-bind="click: function () { clear(); }"> 
                <i class="fa fa-close"></i>
                <span data-bind="text: $root.translations.clear"></span>
            </button>
        </div>
    </div>
    <hr class="title-underline">
    <div id="calendar">

        <!-- Date Type -->
        <div class="calendar picker">
            <div class="search-label">
                <span data-bind="text: $root.translations.type"></span>
            </div>
            <select 
                class="resources"
                data-bind="
                    select2Query:{ select2Config:{
                        value: filter.dateNodeId,
                        dropdownCssClass: 'select2-zindex',
                        placeholder: $root.translations.dateType,
                    }}, 
                    attr: {id:dateDropdownEleId, 'data-label': $root.translations.searchDateType} 
                "
            >
                <option data-bind="text: $root.translations.searchAllDates"></option>
                <!-- ko foreach: { data: graphModels, as: 'graph' } -->
                    <optgroup data-bind="if: (graph.isresource), attr: { label: graph.name }">
                        <!-- ko foreach: { data: $parent.dateNodes, as: 'node' } -->
                            <!-- ko if: graph.graphid === node.graph_id -->
                                <option data-bind="attr: { value: node.nodeid }, text: node.label"></option>
                            <!-- /ko -->
                        <!-- /ko -->
                    </optgroup>
                <!-- /ko -->
            </select>
        </div>

        <!-- Date Selector -->
        <div class="calendar picker">
            <div class="search-label">
                <span data-bind="text: $root.translations.within"></span>
            </div>
            <select class="resources"
                data-bind="
                    attr: {'data-label': $root.translations.searchDateRange},
                    select2Query:{ 
                        select2Config: {
                            value: dateRangeType,
                            dropdownCssClass: 'select2-zindex',
                            placeholder: $root.translations.select,
                            minimumResultsForSearch: -1,
                            data: [
                                { text: $root.translations.customDateRange, id: 'custom' },
                                { text: $root.translations.today, id: 'today' },
                                { text: $root.translations.lastSevenDays, id: 'last-7' },
                                { text: $root.translations.lastThirtyDays, id: 'last-30' },
                                { text: $root.translations.thisWeek, id: 'this-week' },
                                { text: $root.translations.thisMonth, id: 'this-month' },
                                { text: $root.translations.thisQuarter, id: 'this-quarter' },
                                { text: $root.translations.thisYear, id: 'this-year' },
                            ],
                        }
                    }
                ">
            </select>
        </div>

    </div>

    <div id="calendar">
        <!-- From Date -->
        <div class="calendar picker">
            <div class="search-label">
                <span data-bind="text: $root.translations.from"></span>
            </div>
            <div id="search-from-c" class="hide-datepicker-time-option">
                <input class="form-control input-md" 
                    data-bind="
                        value: filter.fromDate, 
                        datepicker: {format: format, keepInvalid: true}, 
                        attr:{'placeholder': format, 'aria-label': $root.translations.fromDate}, 
                        disable: dateRangeType() !== 'custom'">
            </div>
        </div>

        <!-- To Date -->
        <div class="calendar picker">
            <div class="search-label">
                <span data-bind="text: $root.translations.to"></span>
            </div>
            <div id="search-from-b" class="hide-datepicker-time-option">
                <input class="form-control input-md" 
                    data-bind="
                        value: filter.toDate, 
                        datepicker: {format: format, keepInvalid: true}, 
                        attr:{'placeholder': format, 'aria-label': $root.translations.toDate}, 
                        disable: dateRangeType() !== 'custom'">
            </div>
        </div>
    </div>

    <div class="time-wheel-title">
        <span data-bind="text: $root.translations.timeWheel"></span>
    </div>
    <div class="time-wheel-instructions">
        <span data-bind="text: '(' + $root.translations.timeWheelText + ')'"></span>
    </div>
    <hr class="title-underline"><div class="sequence" data-bind="visible: loading">
        <span data-bind="text: $root.translations.loadingTimeWheel + '...'"></span>
    </div>
    <div class="time-wheel-wrap relative" data-bind="timeWheel: { config: wheelConfig, selectedPeriod: selectedPeriod, breadCrumb: breadCrumb}, css:{'time-wheel-loading-mask': loading}">
        <div class="sequence" data-bind="text: breadCrumb"></div>
        <div class="chart svg-container"></div>
    </div>

</div>
