{% load i18n %}
<!-- New Parent Concept Modal Data Entry Form -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content no-corners">
            
            <!-- Form Header -->
            <div class="modal-header arches-modal-header">
                <h4 id="" class="modal-title">{% trans "New Parent Concept" %}</h4>
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            </div>
            <!-- End Form Header -->
            
            <!-- Form -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">  
                        <div class="form-group arches-modal-form-group">
                            <div class="row form-group">
                                <div class="col-xs-8">  
                                    {% include 'views/concept-search.htm' %}  
                                </div>
                                <div class="col-xs-4">
                                    <select style="width:100%;" class="select2" id="parent-relation-type" placeholder="{% trans "Relation to Parent" %}">
                                        {% for relation in parent_relations %}
                                          <option value="{{relation.relationtype}}">{{relation.relationtype}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>  
                            <h5 id="" class="arches-modal-section">{% trans "Current Parents" %}</h5>
                            <div class="col-xs-12">
                                <input id="number_of_parents" type="hidden" value="{{ direct_parents|length }}"></input>
                                {% for parent in direct_parents%}
                                <div data-id="{{parent.conceptid}}">
                                    <dd class="arches-RDM-label-highlighted">
                                        <a href="javascript:void(0);" title="{% trans "Remove the relationship to this parent concept" %}"><i class="arches-CRUD-delete fa fa-times-circle" data-id="{{parent.conceptid}}"  data-message="{% trans "Remove the relationship to this parent concept." %}" ></i></a>
                                        <span href="javascript:void(0);" class="arches-CRUD-child">{{parent.value}}</span>
                                    </dd>
                                </div>
                                {% endfor %}
                            </div>    
                        </div>   
                    </div> 
                </div>
            </div>
            <!-- End Form (modal body) -->

            <div class="modal-footer">
                {% for parent in direct_parents%}
                <div data-id="{{parent.conceptid}}" style="display:none" class="pull-left">
                    <dd class="arches-RDM-label-highlighted">
                        <span href="javascript:void(0);" class="arches-CRUD-child">{% trans "Deleting reference to parent:" %} {{parent.value}}</span>
                    </dd>
                </div>
                {% endfor %}
                <button data-dismiss="modal" class="btn-u btn-u-default" type="button">{% trans "Cancel" %}</button>
                <button class="btn-u savebtn" type="button">{% trans "Save" %}</button>
            </div>
          </div>
    </div>
</div>
<!-- End New Parent Concept Modal Data Entry Form -->