{% load i18n %}

<!-- ko if: bufferNodeId() -->
<div class="card">
    <div class="add-buffer-feature-header">
        {% trans 'Add Buffer Feature' %}
    </div>
    <div class="add-buffer-feature-input">
        <div>{% trans 'Distance:' %}</div>
        <input type="number" step="any" class="form-control input-lg widget-input" data-bind="valueUpdate: 'keyup', value: bufferDistance"></input>
    </div>
    <div class="add-buffer-feature-input">
        <div>{% trans 'Units:' %}</div>
        <select data-bind="
            options: [{
                text: '{% trans 'meters' %}',
                value: 'm'
            }, {
                text: '{% trans 'feet' %}',
                value: 'ft'
            }],
            optionsText: 'text',
            optionsValue: 'value',
            value: bufferUnits,
            valueAllowUnset: false,
            chosen: {
                'width': '100%',
                'disable_search_threshold': 10,
                'allow_single_deselect': false
            }
        "></select>
    </div>
    <!-- ko if: allowAddNew -->
    <div class="add-buffer-feature-input">
        <input type="checkbox" data-bind="checked: bufferAddNew">
        <span class="add-buffer-as-new-label">{% trans 'Add as new ' %}"<span data-bind="text: card.model.get('name')"></span>"?</span>
    </div>
    <!-- /ko-->
    <div class="map-coordinate-editor-button-container">
        <button class="btn btn-shim btn-labeled btn-lg fa fa-search btn-mint" data-bind="click: function() {
            bufferNodeId(null);
        }">{% trans 'Cancel' %}</button>
        <button class="btn btn-shim btn-labeled btn-lg fa fa-check btn-primary" data-bind="click: addBufferResult">{% trans 'Add Feature' %}</button>
    </div>
</div>
<!-- /ko-->

