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

{% block form_content %}
<!-- Resource Type CRUD Form -->
<div id="creation-section">
    <!-- Resource Type 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">Resource Creation</h5>
                    </dt>

                    <!-- Form -->
                    <dd class="arches-RDM-labels">

                        <div class="row">

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

                                <!-- Screens greater than xs -->
                                <form class="form-inline arches-form hidden-xs" role="form">
                                    <div class="form-group" style="width: 100%;">
                                        
                                        <!-- Resource Type -->
                                        <input style="width:50%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="resource-type-dropdown" data-bind="select2: {value: getEditedNode('INFORMATION_RESOURCE_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', multiple: false, dataKey: 'INFORMATION_RESOURCE_TYPE.E55'}"></input>

                                        <!-- Creation Date -->
                                        <div class="form-group" style="width:30%; padding-left: 3px;">
                                            <div class="input-group datetimepicker">
                                                <input style="font-size: 13px; height:32px;" type="text" placeholder="{% trans 'Creation Date' %}" class="form-control datepicker" data-date-format="YYYY-MM-DD" data-bind="{value: getEditedNode('DATE_OF_CREATION.E50', 'value')} ">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                            </div>
                                        </div>

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

                                        <!-- Spacer -->
                                        <div class="margin-top-5 hidden-xs"></div>

                                        <!-- Creator/Contibutor -->
                                        <input class="form-control arches-form-input" id="resource-name" style="width: 50%;" placeholder="{% trans "Creator" %}" data-bind="value: getEditedNode('CREATOR_APPELLATION.E82', 'value')">

                                        <input class="form-control arches-form-input" id="resource-name" style="width: 30%;" placeholder="{% trans "Contibutor" %}" data-bind="value: getEditedNode('CONTRIBUTOR_APPELLATION.E82', 'value')">

                                        
                                    </div>
                                </form>
                                <!-- End Screens greater than xs -->


                                <!-- Form for screens = xs -->
                                <form class="form-inline arches-form hidden-sm hidden-md hidden-lg" role="form">
                                    <div class="form-group" style="width: 100%">
                                        
                                        <!-- Resource Type --> 
                                        <input style="width:100%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="resource-type-dropdown" data-bind="select2: {value: getEditedNode('INFORMATION_RESOURCE_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', multiple: false, dataKey: 'INFORMATION_RESOURCE_TYPE.E55'}"></input>

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

                                        <!-- Creation Date -->
                                        <div class="form-group" style="width:100%;">
                                            <div class="input-group datetimepicker">
                                                <input style="font-size: 13px; height:32px;" type="text" placeholder="{% trans 'Creation Date' %}" class="form-control datepicker" data-date-format="YYYY-MM-DD" data-bind="{value: getEditedNode('DATE_OF_CREATION.E50', 'value')} ">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                            </div>
                                        </div>

                                        <input class="form-control arches-form-input" id="resource-name" style="width: 100%;" placeholder="{% trans "Creator" %}" data-bind="value: getEditedNode('CREATOR_APPELLATION.E82', 'value')">

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

                                        <input class="form-control arches-form-input" id="resource-name" style="width: 100%;" placeholder="{% trans "Contibutor" %}" data-bind="value: getEditedNode('CONTRIBUTOR_APPELLATION.E82', 'value')">

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

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

                                    </div>
                                </form>
                                <!-- Form for screens = xs -->

                            </div>

                        </div>
                    </dd>
                    <!-- End Form -->
                    <div class="alert alert-danger branch-invalid-alert" role="alert" style="display:none;">{% trans "The resource type value must be populated." %}</div>
                </dl>

            </div>
        </div>
    </div>
    <!-- End Rsource Type CRUD -->

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

            <!-- Publisher/Date -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        This resource has this creation history:
                    </dd>

                    <dd class="margin-left-5">
                        <div data-bind="visible: getBranchLists().length == 0" class="txt-color-blue">{% trans "No Creation History 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 publisher/date" %}"><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 publisher/date" %}">
                                    <span data-bind='text: nodes.get("INFORMATION_RESOURCE_TYPE.E55", "label")' style="padding-right:2px;"></span>
                                    <span class="text-muted arches-crud-type-identifier"> ({% trans "type" %})&nbsp; </span>
                                    <span data-bind='text: nodes.get("DATE_OF_CREATION.E50", "value")' style="padding-right:2px;"></span>
                                    <span class="text-muted arches-crud-type-identifier"> ({% trans "creation date" %})&nbsp; </span>
                                    <span data-bind='text: nodes.get("CREATOR_APPELLATION.E82", "value")' style="padding-right:2px;"></span>
                                    <span class="text-muted arches-crud-type-identifier"> ({% trans "creator" %})&nbsp; </span>
                                    <span data-bind='text: nodes.get("CONTRIBUTOR_APPELLATION.E82", "value")' style="padding-right:2px;"></span>
                                    <span class="text-muted arches-crud-type-identifier"> ({% trans "contributor" %})</span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>
            </div>
        </div>
    </div>
    <!-- End Name Records -->
</div>
<!-- End Rsource Type CRUD -->


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

<div id="publishers-section">
    <!-- Publication CRUD Form -->
    <div class="row">
        <div class="col-xs-12">
            <div class="padding-left-10">
                
                <dl>
                    <!-- Title -->
                    <dt>
                        <h5 id="arches-publishers-form" class="section-headline">Publishers</h5>
                    </dt>

                    <!-- Form -->
                    <dd class="arches-RDM-labels">

                        <div class="row">

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

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

                                <div class="col-sm-6 hidden-xs" style="padding-right: 5px; padding-left: 0px;">
                                    <input style="width:100%" class="form-control arches-form-input" placeholder='{% trans "Publisher" %}' data-bind="value: getEditedNode('PUBLISHER_APPELLATION.E82', 'value')">
                                    </input>
                                </div>

                                <div class="col-sm-6 hidden-sm hidden-md hidden-lg" style="padding-right: 0px; padding-left: 0px;">
                                    <input style="width:100%; font-size: 13px;" class="form-control arches-form-input" placeholder='{% trans "Publisher" %}' data-bind="value: getEditedNode('PUBLISHER_APPELLATION.E82', 'value')">
                                    </input>
                                </div>

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

                                <div class="col-sm-4 form-group hidden-xs" style="padding-left: 0px; padding-right: 0px; width: 30%;">
                                    <div class="input-group datetimepicker" style ="width:100%;" >
                                        <input style="font-size: 13px; height:32px;" type="text" placeholder="{% trans 'Date of Publication' %}" class="form-control datepicker" data-date-format="YYYY-MM-DD" data-bind="{value: getEditedNode('DATE_OF_PUBLICATION.E50', 'value')} ">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    </div>
                                </div>

                                <div class="col-sm-4 form-group hidden-sm hidden-md hidden-lg" style="padding-left: 0px; padding-right: 0px; width: 100%; margin-bottom:0;">
                                    <div class="input-group datetimepicker" style ="width:100%;" >
                                        <input type="text" id="date" placeholder="{% trans 'Creation Date' %}" class="form-control datepicker" data-date-format="YYYY-MM-DD" data-bind="{value: getEditedNode('DATE_OF_PUBLICATION.E50', 'value')} ">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    </div>
                                </div>

                                <!-- 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 publisher and date values must be populated." %}</div>
                </dl>

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

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

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

                    <dd class="margin-left-5">
                        <div data-bind="visible: getBranchLists().length == 0" class="txt-color-blue">{% trans "No Publishers Defined" %}</div> 
                        <div data-bind="foreach: getBranchLists()"> 
                            <div class="arches-crud-record" id="">
                                <a href="javascript:void(0)" class="arches-CRUD-child" title="{% trans "Delete this publisher/date" %}"><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 publisher/date" %}"><span data-bind='text: nodes.get("PUBLISHER_APPELLATION.E82", "value") + ", " + nodes.get("DATE_OF_PUBLICATION.E50", "value")' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

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

</div>


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

<div id="rights-section">
    <!-- Dates 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">Rights</h5>
                    </dt>

                    <!-- Form -->
                    <dd class="arches-RDM-labels">

                        <div class="row">

                            <div class="col-xs-12 padding-left-0">

                                <!-- Input for screens > xs -->
                                <form class="form-inline arches-form hidden-xs" role="form">
                                    <div class="form-group" style="width: 100%">
                                        
                                        <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="resource-type-dropdown" data-bind="select2: {value: getEditedNode('RIGHT_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', multiple: false, dataKey: 'RIGHT_TYPE.E55'}"></input>

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

                                    </div>
                                </form>
                                <!-- End Input for screens > xs -->

                                <!-- Input for screens = xs -->
                                <form class="form-inline arches-form hidden-sm hidden-md hidden-lg" role="form">
                                    <div class="form-group" style="width: 100%">

                                        <input style="width:80%; height: 36px; padding-top: 2px;" class="select2 arches-select2-crud-form resource-type" id="resource-type-dropdown" data-bind="select2: {value: getEditedNode('RIGHT_TYPE.E55', 'value'), placeholder: '{% trans "Type" %}', multiple: false, dataKey: 'RIGHT_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>
                                </form>
                                <!-- End Input for screens = xs -->

                            </div>
                        </div>
                    </dd>
                    <!-- End Form -->
                    <div class="alert alert-danger branch-invalid-alert" role="alert" style="display:none;">{% trans "A right type must be selected." %}</div>
                </dl>

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

    <!-- Dates 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 rights are associated with this resource:" %}
                    </dd>

                    <dd class="margin-left-5">
                        <div data-bind="visible: getBranchLists().length == 0" class="txt-color-blue">{% trans "No Rights Defined" %}</div> 
                        <div data-bind="foreach: getBranchLists()"> 
                            <div class="arches-crud-record" id="date1-record">
                                <a href="javascript:void(0)" class="arches-CRUD-child" title="{% trans "Delete this right" %}"><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 right" %}"><span data-bind='text: nodes.get("RIGHT_TYPE.E55", "label")' style="padding-right:2px;"></span>
                                </a>
                            </div>
                        </div>
                    </dd>

                </dl>

            </div>
        </div>
    </div>
    <!-- End Dates Records -->
</div>

{% endblock form_content %}