{% load template_tags %}
{% load i18n %}

<!-- ko if: bufferNodeId() -->
<div class="card" aria-labelledby="add-buffer-feature">
    <div class="add-buffer-feature-header">
        <span id="add-buffer-feature" data-bind="text: $root.translations.addBufferFeature"></span>
    </div>
    <div class="add-buffer-feature-input">
        <div>
            <span data-bind="text: $root.translations.distance"></span>
        </div>
        <input type="number" step="any" class="form-control input-lg widget-input" 
            data-bind="valueUpdate: 'keyup', value: bufferDistance, attr: {'aria-label': $root.translations.bufferDistance}"></input>
    </div>
    <div class="add-buffer-feature-input">
        <div>
            <span data-bind="text: $root.translations.units"></span>
        </div>
        <select data-bind="
            options: [{
                text: $root.translations.meters,
                value: 'm'
            }, {
                text: $root.translations.feet,
                value: 'ft'
            }],
            optionsText: 'text',
            optionsValue: 'value',
            value: bufferUnits,
            valueAllowUnset: false,
            chosen: {
                'width': '100%',
                'disable_search_threshold': 10,
                'allow_single_deselect': false
            },
            attr: {'aria-label': $root.translations.selectBufferUnits},
        "></select>
    </div>
    <!-- ko if: allowAddNew -->
    <div class="add-buffer-feature-input">
        <input type="checkbox" data-bind="checked: bufferAddNew, attr: {
            'aria-label': $root.translations.addAsNewResource(card.model.get('name')), 
            'aria-checked': bufferAddNew().toString(),
        }">
        <span class="add-buffer-as-new-label">
            <span data-bind="text: $root.translations.addAsNew"></span>
            <span data-bind="text: card.model.get('name')"></span>
            <span>?</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);
        }">
            <span data-bind="text: $root.translations.cancel"></span>
        </button>
        <button class="btn btn-shim btn-labeled btn-lg fa fa-check btn-primary" data-bind="click: addBufferResult">
            <span data-bind="text: $root.translations.addFeature"></span>
        </button>
    </div>
</div>
<!-- /ko-->

