{% extends "views/components/widgets/base.htm" %}
{% load i18n %}

{% block form %}
<div class="row widget-wrapper">
    <div class="form-group">
        <label class="control-labx mesel widget-input-label" for="" data-bind="text:label"></label>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="col-xs-12">
            <div style="pad-hor">
                <div class="input-group date">
                    <input type="text" data-bind="value: value, placeholder: placeholder, disable: disabled, datepicker: {format: dateFormat, viewMode: viewMode, maxDate: maxDate, minDate: minDate}" class="form-control input-lg"><span class="input-group-addon"><i class="fa fa-calendar fa-lg"></i></span>
                </div>
            </div>
            <!-- <input type="text" data-bind="datepicker: value, placeholder: placeholder" class="form-control input-lg widget-input"> -->
        </div>
    </div>
</div>
{% endblock form %}

{% block report %}
<dt data-bind="text: label"></dt>
<!-- ko if: value() !== null -->
<dd data-bind="date: value(), dateFormat: dateFormat || '{% trans "No Date Entered" %}'"></dd>
<!-- /ko -->
<!-- ko if: value() === null -->
<dd>{% trans "None" %}</dd>
<!-- /ko -->
{% endblock report %}

{% block config_form %}
<div class="control-label">
        {% trans "Minimum Date" %}
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input type="" id="datetimepickermin" placeholder="{% trans "Minimum Date" %}" class="form-control input-md widget-input" data-bind="value: minDate, datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}">
</div>
<div class="control-label">
        {% trans "Maximum Date" %}
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input type="" id="datetimepickermax" placeholder="{% trans "Maximum Date" %}" class="form-control input-md widget-input" data-bind="value: maxDate, datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}">
</div>
<div class="control-label">
        {% trans "View Mode" %}
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <select type="" id="" placeholder="{% trans " View Mode " %}" data-bind="options:viewModeOptions, optionsText:'name', optionsValue:'id', event: {change: onViewModeSelection}, value: viewMode, chosen: {width: '100%', disable_search: true}"></select>
</div>
<div class="control-label">
    {% trans "Default Value" %}
</div>
<div>
    <div class="form-group col-xs-12 pad-no crud-widget-container">
        <div style="pad-hor">
            <div class="input-group date">
                <input type="text" data-bind="value: defaultValue, placeholder: placeholder, datepicker: {format: dateFormat, viewMode: viewMode, maxDate: maxDate, minDate: minDate}" class="form-control input-md" style="height: 32px;"><span class="input-group-addon"><i class="fa fa-calendar fa-lg"></i></span>
            </div>
        </div>
    </div>
    <div class="toggle-container">
        <span class="switch switch-small" data-bind="css: {'on': getdefault}, click: setdefault"><small></small></span>
                <div style="display:flex; flex-direction:row;">
                <div class="arches-toggle-sm" data-bind="text:'Use date of data entry'"></div>
                </div>
        <span class="arches-toggle-subtitle" data-bind="text: 'Check this to use the date of data entry as the default value.'"></span>
    </div>
</div>
{% endblock config_form %}
