{% load i18n %}
<div class="search-container time-search-container">

    <div class="filter-title">{% trans "Date Interval" %}
        <div class="pull-right">
            <div class="btn-group">
                <button class="btn btn-primary btn-active-primary dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="true" data-bind="click: function () { clear(); }"> <i class="fa fa-close"></i> {% trans "Clear" %}
                </button>
            </div>
        </div>
    </div>
    <hr class="title-underline">
    <div id="calendar">

        <!-- Date Type -->
        <div class="calendar picker">
            <h3 class="search-label">{% trans "Type" %}</h3>
            <select id="" class="resources" data-placeholder="Date type" tabindex="-1" data-bind="value: filter.dateNodeId, chosen:{ width: '100%' }, attr: {id:dateDropdownEleId} ">
                <option value="">{% trans "Search all dates" %}</option>
                <!-- ko foreach: { data: graph_models, as: 'graph' } -->
                    <optgroup data-bind="if: (graph.isresource && graph.isactive), attr: { label: graph.name }">
                        <!-- ko foreach: { data: $parent.date_nodes, 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">
            <h3 class="search-label">{% trans "Within" %}</h3>
            <select id="" class="resources" placeholder="Select" tabindex="-1" data-bind="value: dateRangeType, chosen:{ width: '100%' }">
                <option value="custom">{% trans "Custom date range" %}</option>
                <option value="today">{% trans "Today" %}</option>
                <option value="last-7">{% trans "Last 7 days" %}</option>
                <option value="last-30">{% trans "Last 30 days" %}</option>
                <option value="this-week">{% trans "This week" %}</option>
                <option value="this-month">{% trans "This month" %}</option>
                <option value="this-quarter">{% trans "This quarter" %}</option>
                <option value="this-year">{% trans "This year" %}</option>
            </select>
        </div>

    </div>

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

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

    <h3 class="time-wheel-title">{% trans "Time Wheel" %}</h3>
    <div class="time-wheel-instructions">{% trans "(Click on a block to set a filter, double-click to zoom in, double-click center to zoom out)" %}</div>
    <hr class="title-underline"><div class="sequence" data-bind="visible: loading">{% trans 'Loading time wheel...' %}</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>
