{% load i18n %}
<!-- Time Filter -->
<div class="arches-time-filter" id="time-filter" style="display: none;">
    
    <!-- Body -->
    <div class="padding-top-0" style="padding-left: 10px;">

        <!-- Date Filter Tools -->
        <div class="row">
                                                                  
            <div class="col-xs-12" style="">
                        
                <!-- Year-Before-Present Slider -->
                <div class="row">

                    <h4 class="margin-top-20 margin-bottom-5 margin-left-15" style="font-style: normal;">
                        {% trans "Range of Years" %} <small>{% trans "(show resources with any date that falls between these years)" %}</small>
                    </h4>
                    
                    <form>
                        <fieldset style="margin-right: 30px; margin-top: 20px;">
                            <div class="col-xs-12">
                                <div class="form-group margin-top-15 margin-bottom-0">

                                    <input type="text" class="slider slider-success" id="sal" value="" 
                                    data-slider-min="{{min_date}}" 
                                    data-slider-max="{{max_date}}" 
                                    data-slider-step="5" 
                                    data-slider-value="[{{min_date}},{{max_date}}]"
                                    data-slider-handle="round">
                                       
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <!-- End Year-Before-Present Slider -->

                <!-- Divider to separate different set of time filters in UI -->
                <hr class="devider" style="margin-top: 20px; margin-bottom: 15px; margin-right: 30px; border-color: #dcdcdc;"></hr>


                <!-- Start/End Date Pickers -->
                <div class="row" style="min-height: 180px;">

                    <h4 class="margin-top-0 margin-bottom-5 margin-left-15" style="font-style: normal">
                        {% trans "Start/End Dates" %} <small>{% trans "(show resources that meet these date criteria)" %}</small>
                    </h4>

                    <!-- Date Form -->
                    <div class="col-sm-12 padding-left-0 margin-bottom-20">

                        <!-- Time Criteria Entry Form for screens > xs -->
                        <form class="form-inline hidden-xs" role="form">
                
                            <div class="form-group margin-top-5 padding-bottom-10" style="width: 100%">
                                
                                <div class="col-sm-4" style="padding-right: 5px;">
                                    <div style="height: 36px; padding-top: 2px; width:100%" class="select2 arches-select2-crud-form" id="date-type" placeholder="{% trans 'Type of date' %}" data-bind="select2: { data: domains.date_types, placeholder: 'Type', viewModel: editing.filters, conceptKey: 'date_types'}">
                                    </div>
                                </div>
                                
                                <!-- Date comparison -->
                                <div class="col-sm-3" style="padding-right: 5px;">
                                    <div style="height: 36px; padding-top: 2px; width:100%" class="select2 arches-select2-crud-form" id="date-operator" placeholder="{% trans 'Qualifier' %}" data-bind="select2: { data: domains.date_operators, placeholder: '', viewModel: editing.filters, conceptKey: 'date_operators'}">
                                    </div>
                                </div>
                            
                                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                                    <div class="input-group datetimepicker" style ="width:100%; height: 36px; padding-top: 2px;" >
                                        <input type="text" id="date" placeholder="{% trans 'Date' %}" class="form-control datepicker" data-date-format="DD/MM/YYYY" data-bind='{value: editing.filters.date}' >
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    </div>
                                </div>
                                
                                <!-- Add Button -->
                                <div class="col-sm-2 btn-group" style="padding-top: 3px;">
                                    <button type="button" class="add-button btn btn-primary" style="height: 32px;" id="add-temporal-filter-btn"><i class=" fa fa-plus"></i> {% trans "Add" %}</button>
                                </div>
                                <!-- End Add Button -->

                            </div>
                        </form>
                        <!-- Time Criteria Entry Form for screens > xs -->

                    </div>
                    <!-- End Form for Small, Md, Lg Screens -->

                    <!-- Show seleted filters -->
                    <div class="col-xs-12">

                        <div class="">
                            <dl>
                                <dd class="arches-CRUD-child margin-left-5 text-muted" style="margin-top: -15px;">
                                    {% trans "You have selected the following Start/End Date filters:" %}
                                </dd>

                                <dd class="margin-left-5" style="display: block;" data-bind="visible: true">
                                    <div data-bind="visible: filters().length == 0" class="txt-color-blue">{% trans "No Filters Defined" %}</div>   
                                    
                                    <div data-bind='foreach: filters'>
                                        <div class="arches-crud-record">
                                            <a href="javascript:void(0)" class="arches-CRUD-child" title="Remove this filter"><i data-bind='attr: {"data-index": $index}' class="arches-CRUD-delete fa fa-times-circle"></i></a>
                                            <a href="javascript:void(0)" class="text-muted arches-CRUD-child arches-CRUD-edit" data-bind='attr: {"data-index": $index}' title="Edit this name"><span data-bind='text: date_types__label.charAt(0).toUpperCase() + date_types__label.slice(1).toLowerCase() + " " + date_operators__label.toLowerCase() + " " + date' style="padding-right:2px;"></span><span class="text-muted arches-crud-type-identifier"></span>
                                            </a>
                                        </div>
                                    </div>
                                </dd>

                                <div class="alert alert-danger branch-invalid-alert" role="alert" style="display:none;">{% trans "The Type of Date, Qalifier, and Date fields must all be populated." %}</div>

                            </dl>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- End Date Filters -->

    </div>
    <!-- End  Body -->

    <input id="formdata" name="formdata" type="hidden" value="{{formdata}}"/>

</div>
<!-- End Time Filter -->