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

{% block form_content %}


<hr class="divider arches-RDM-divider">

<div id="titles-section">
    <!-- Name CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-names-form" class="section-headline">{% trans "Title" %}</h5>
                    </dt>

                    <!-- Form -->
                     <dd class="hidden-xs">
                        <div class="row">

                            <div class="col-xs-12">
                                        
                                <input class="form-control arches-form-input hidden-xs" id="resource-name" style="width: 50%;" placeholder='{% trans "Title" %}' data-bind='value: getEditedNode("TITLE.E41", "value")'>                                    

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>
                                
                                <input style="width:30%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form name-type hidden-xs" id="resource-name-type" data-bind="select2: {value: getEditedNode('TITLE_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', dataKey: 'TITLE_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% include 'views/components/add-item-button.htm' %}

                            </div>
                        </div>
                    </dd>
                    <dd class="hidden-sm hidden-md hidden-lg">
                        <div class="row">

                            <div class="col-xs-12">
                                        
                                <input class="form-control arches-form-input" id="resource-name" style="width: 100%;" placeholder='{% trans "Title" %}' data-bind='value: getEditedNode("TITLE.E41", "value")'>                                    

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>
                                
                                <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form name-type" id="resource-name-type" data-bind="select2: {value: getEditedNode('TITLE_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', dataKey: 'TITLE_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% 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 "The Type value must be populated. A resource can only have one primary name." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Name CRUD Form Container -->

    <!-- 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 titles:" %}
                    </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 Titles 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 Title" %}'><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="{% trans "Edit this title" %}"><span data-bind='text: nodes.get("TITLE.E41", "value")' style="padding-right:2px;"></span><span class="text-muted arches-crud-type-identifier">(<span data-bind='text: nodes.get("TITLE_TYPE.E55", "label")'></span>)</span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>
            </div>
        </div>
    </div>
    <!-- End Name Records -->
</div>

<hr class="divider arches-RDM-divider">

<div id="identifiers-section">
    <!-- Modifications CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-subjects-form" class="section-headline">{% trans "Identifiers" %}</h5>
                    </dt>

                    <!-- Form -->
                    <dd>
                        <div class="row">
                            <div class="col-xs-12 hidden-xs">
                                <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('IDENTIFIER_TYPE.E55', 'value'), placeholder: '{% trans "Identifier Type" %}', dataKey: 'IDENTIFIER_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% include 'views/components/add-item-button.htm' %}
                            </div>
                            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                                <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('IDENTIFIER_TYPE.E55', 'value'), placeholder: '{% trans "Identifier Type" %}', dataKey: 'IDENTIFIER_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% 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 "The identifier must be populated." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Subjet CRUD -->

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

            <!-- Address -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans "These identifiers are associated with this resource:" %}
                    </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 Identifiers 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 Identifier" %}"><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="{% trans "Edit this Indentifier" %}"><span data-bind='{text: nodes.get("IDENTIFIER_TYPE.E55", "label")}' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>

            </div>
        </div>
    </div>
</div>

<hr class="divider arches-RDM-divider">

<div id="formats-section">
    <!-- Information Carrier Format CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-formats-form" class="section-headline">{% trans "Formats" %}</h5>
                    </dt>

                    <!-- Form -->
                    <dd>
                        <div class="row">
                            <div class="col-xs-12 hidden-xs">
                                <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('INFORMATION_CARRIER_FORMAT_TYPE.E55', 'value'), placeholder: '{% trans "Format Type" %}', dataKey: 'INFORMATION_CARRIER_FORMAT_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% include 'views/components/add-item-button.htm' %}
                            </div>
                            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                                <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('INFORMATION_CARRIER_FORMAT_TYPE.E55', 'value'), placeholder: '{% trans "Format Type" %}', dataKey: 'INFORMATION_CARRIER_FORMAT_TYPE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% 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 "The format must be populated." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Subjet CRUD -->

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

            <!-- Address -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans "These formats are associated with this resource:" %}
                    </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 Formats 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 format type" %}"><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="{% trans "Edit this format type" %}"><span data-bind='{text: nodes.get("INFORMATION_CARRIER_FORMAT_TYPE.E55", "label")}' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>

            </div>
        </div>
    </div>
</div>

<hr class="divider arches-RDM-divider">

<div id="languages-section">
    <!-- Modifications CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-subjects-form" class="section-headline">{% trans "Languages" %}</h5>
                    </dt>

                    <!-- Form -->
                    <dd>
                        <div class="row">
                            <div class="col-xs-12 hidden-xs">
                                <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('LANGUAGE.E55', 'value'), placeholder: '{% trans "Language" %}', dataKey: 'LANGUAGE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% include 'views/components/add-item-button.htm' %}
                            </div>
                            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                                <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="language-dropdown" data-bind="select2: {value: getEditedNode('LANGUAGE.E55', 'value'), placeholder: '{% trans "Language" %}', dataKey: 'LANGUAGE.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% 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 "The language must be populated." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Subjet CRUD -->

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

            <!-- Address -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans "These languages are associated with this resource:" %}
                    </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 Languages 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 language" %}"><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="{% trans "Edit this language" %}"><span data-bind='{text: nodes.get("LANGUAGE.E55", "label")}' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>

            </div>
        </div>
    </div>
</div>

<hr class="divider arches-RDM-divider">

<div id="keywords-section">
    <!-- Modifications CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-subjects-form" class="section-headline">{% trans "Keywords" %}</h5>
                    </dt>

                    <!-- Form -->
                    <dd>
                        <div class="row">
                            <div class="col-xs-12 hidden-xs">
                                <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('KEYWORD.E55', 'value'), placeholder: '{% trans "Keyword" %}', dataKey: 'KEYWORD.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% include 'views/components/add-item-button.htm' %}
                            </div>
                            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                                <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="keyword-dropdown" data-bind="select2: {value: getEditedNode('KEYWORD.E55', 'value'), placeholder: '{% trans "Keyword" %}', dataKey: 'KEYWORD.E55'}"></input>

                                <!-- Spacer (for xs screens) -->
                                <div class="margin-top-5 hidden-sm hidden-md hidden-lg"></div>

                                {% 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 "The Keyword must be populated." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Subjet CRUD -->

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

            <!-- Address -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans "These keywords are associated with this resource:" %}
                    </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 Keywords 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 keyword" %}"><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="{% trans "Edit this keyword" %}"><span data-bind='{text: nodes.get("KEYWORD.E55", "label")}' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>

            </div>
        </div>
    </div>
</div>

{% endblock form_content %}