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

{% block form_content %}
<!-- Resource Measurement CRUD Form -->
<div id="measurement-section">
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-measurement-form" class="section-headline">{% trans "Measurements" %}</h5>
                    </dt>
                    <!-- Form -->
                    <dd>
                        <div class="row">

                            <div class="col-xs-12">

                                <!-- Measurement Type -->   
                                <input style="width:30%; display:inline-block;" class="select2 arches-select2-crud-form name-type hidden-xs" id="resource-measurement-type" data-bind="select2: {value: getEditedNode('MEASUREMENT_TYPE.E55', 'value'),  placeholder: '{% trans "Type" %}', dataKey: 'MEASUREMENT_TYPE.E55'}"></input>&nbsp;

                                <!-- Measurement Unit -->     
                                <input style="width:30%; display:inline-block;" class="select2 arches-select2-crud-form name-type hidden-xs" id="resource-measurement-unit" data-bind="select2: {value: getEditedNode('UNIT_OF_MEASUREMENT.E55', 'value'), placeholder: '{% trans "Unit" %}', dataKey: 'UNIT_OF_MEASUREMENT.E55'}"></input>&nbsp;

                                <!-- Measurement Value -->
                                <input class="form-control arches-form-input" id="measurement-value" style="width: 20%;" placeholder="value" data-bind="{value: getEditedNode('VALUE_OF_MEASUREMENT.E60', 'value')}">
                            
                                {% include 'views/components/add-item-button.htm' %}

                            </div>
                        </div>
                    </dd>
                    <!-- End Form -->

                    <div class="alert alert-danger branch-invalid-alert" role="alert" style="display:none;">{% trans "Each measurement must have a type, unit, and value." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- Name Records -->
    <div class="row">
        <div class="col-xs-12">

            <!-- Address -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans "This resource has these measurements:" %}
                    </dd>

                    <dd class="margin-left-5" style="display: none;" data-bind="visible: true">
                        <div data-bind="visible: getBranchLists().length == 0" class="txt-color-blue">{% trans "No Measurements Defined" %}</div>   
                        
                        <div data-bind='foreach: getBranchLists()'>
                            <div class="arches-crud-record">
                                <a href="javascript:void(0)" class="arches-CRUD-child" title="{% trans "Delete this measurement" %}"><i data-bind='click: $parent.deleteItem.bind($parent)' class="arches-CRUD-delete fa fa-times-circle"></i></a>
                                <a href="javascript:void(0)" class="arches-CRUD-child arches-CRUD-edit" data-bind='click: $parent.editItem.bind($parent)' title="Edit this measurement"><span data-bind="{text: nodes.get('VALUE_OF_MEASUREMENT.E60', 'value')}" style="padding-right:2px;"></span><span data-bind="{text: nodes.get('UNIT_OF_MEASUREMENT.E55', 'label')}" style="padding-right:2px"></span><span class="text-muted arches-crud-type-identifier">(<span data-bind="{text: nodes.get('MEASUREMENT_TYPE.E55', 'label')}"></span>)</span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>
            </div>
        </div>
    </div>
</div>
<!-- End Name Records -->
{% endblock form_content %}