 {% load i18n %}
 {% load staticfiles %}
<div class="col-xs-12 concept-report-loading hidden">{% trans "Loading..." %}</div>
{% if concept %}
    <div class="col-xs-12 concept-report-content">
        <div style="display:none" name="modeldata" data-id="{{concept.id}}" data-legacyoid="{{concept.legacyoid}}" data-nodetype="{{concept.nodetype}}"></div>
        <!-- Concept Preferred Label -->
        <div class="headline arches-RDM-headline"><h3 class="arches-RDM-Concept">{{prefLabel}} ({{lang}})</h3>

            <!-- Spacer for xs screens -->
            <div class="divider hidden-sm hidden-md hidden-lg"></div>

            <!-- Concept Type Label -->
            <span class="arches-search-filter-font text-muted" style="">
                ({{concept.nodetype}})
            </span>

            <!-- Spacer for xs screens -->
            <div class="divider hidden-sm hidden-md hidden-lg"></div>

            {% if concept.nodetype == 'Concept' or concept.nodetype == 'ConceptScheme'%}
            <!-- Concept Management Tools for larger screens -->
            <div class="btn-group pull-right hidden-xs">
                <button type="button" class="btn btn-primary dropdown-toggle arches-RDM-button" data-toggle="dropdown">
                    {% trans "Manage" %}
                    <i class="fa fa-chevron-down"></i>
                    <span class="sr-only">{% trans "Toggle Dropdown" %}</span>                            
                </button>
                <ul class="dropdown-menu" role="menu">
                    {% if concept.nodetype == 'Concept' or concept.nodetype == 'ConceptScheme'%}
                    <li><a href="javascript:void(0);" data-toggle="#add-concept-form">{% trans "Add Child" %}</a></li>
                    <li><a href="javascript:void(0);">{% trans "Import Child from AAT" %}</a></li>
                    {% endif %}
                    {% if concept.nodetype == 'Concept'%}
                    <li><a href="javascript:void(0);" data-toggle="#manage-parent-form">{% trans "Manage Parents" %}</a></li>
                    {% endif %}
                    <li class="divider"></li>
                    <li><a href="javascript:void(0);">{% trans "Close" %}</a></li>
                </ul>
            </div>
            {% endif %}

            <!-- Concept Management Tools for xs screens -->
            <div class="btn-group hidden-sm hidden-md hidden-lg">
                <button type="button" class="btn btn-primary dropdown-toggle arches-RDM-button-xs" data-toggle="dropdown">
                    {% trans "Manage" %}
                    <i class="fa fa-chevron-down"></i>
                    <span class="sr-only">{% trans "Toggle Dropdown" %}</span>                            
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="javascript:void(0);" data-toggle="#add-concept-form">{% trans "Add Child" %}</a></li>
                    <li><a href="javascript:void(0);">{% trans "Import Child from AAT" %}</a></li>
                    <li><a href="javascript:void(0);" data-toggle="#manage-parent-form">{% trans "Manage Parents" %}</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0);">{% trans "Close" %}</a></li>
                </ul>
            </div>

        </div>
        <!-- End Concept Preferred Label -->

        <!-- Concept Labels -->
        <div class="margin-bottom-10 padding-left-10">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Labels" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right edit-value" data-category="label" data-target="#labelmodal">{% trans "Add label" %}</a>
                        <span>
                    </h5>
                </dt>
                {% for value in labels %}
                    <dd class="arches-RDM-label-highlighted">
                        {% if labels|length > 1 %}
                            <a href="javascript:void(0);"><i class="arches-CRUD-delete fa fa-times-circle" title="{% trans "Delete this label?" %}" data-id="{{value.id}}" data-action="delete-value" data-message="{{value.value}}" data-category="{{value.category}}"></i></a>
                        {% endif %}
                        <a href="javascript:void(0);" class="arches-CRUD-child edit-value" title="Edit this label" data-action="edit" data-target="#labelmodal" data-id="{{value.id}}" data-datatype="{{value.datatype}}" data-type="{{value.type}}" data-category="{{value.category}}" data-value="{{value.value}}" data-language="{{value.language}}">{{value.value}} </a> 
                        <span class="text-muted"> ({% if value.type == 'prefLabel' %}{% trans "preferred" %}, {% endif %}{% if value.type == 'altLabel' %}{% trans "alternate" %}, {% endif %}{% if value.type == 'hiddenLabel' %}{% trans "hidden" %}, {% endif %}{{value.language}})</span>
                    </dd>
                {% endfor %}

            </dl>
        </div>

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

        <!-- Scope Notes -->
        <div class="margin-bottom-10 padding-left-10">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Notes" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right edit-value" data-category="note" data-target="#notemodal">{% trans "Add note" %}</a>
                        <span>
                    </h5>
                </dt>
                {% for value in concept.values %}
                    {% if value.category == 'note' %}
                    <dd class="arches-RDM-label">
                        <a href="javascript:void(0);"><i class="arches-CRUD-delete fa fa-times-circle" title="{% trans "Delete this note?" %}" data-id="{{value.id}}" data-action="delete-value" data-message="{{value.value}}" data-category="{{value.category}}"></i></a>
                        <a href="javascript:void(0);" class="arches-CRUD-child edit-value" title="Edit this note" data-action="edit" data-target="#notemodal" data-id="{{value.id}}" data-datatype="{{value.datatype}}" data-type="{{value.type}}" data-category="{{value.category}}" data-value="{{value.value}}" data-language="{{value.language}}">{{value.type}}</a> 
                        <span class="text-muted"> ({{value.language}})</span>
                    </dd>

                    <dd class="arches-RDM-note">
                        {{value.value}}
                    </dd>
                    {% endif %}
                {% endfor %}
            </dl>
        </div>
        <!-- End Scope Notes -->

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

        <!-- Broader/Narrower Concepts-->
        <div class="margin-bottom-10 padding-left-10">
            <dl>

                <dt>
                    <h5 id="" class="section-headline">{% trans "Broader/Narrower Concepts" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right graph-toggle">{% trans "Show graph" %}</a>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right graph-toggle" style="display: none;">{% trans "Show tree" %}</a>
                        <span>
                    </h5>
                </dt>

                <div class="concept-tree">
                    {% for path in concept_paths%}
                    {% with forloop.last as show_children %}
                    <div>
                        <dl>
                        {% for parent_concept in path %}
                            <dd class="arches-concept-heirarchy {% if forloop.last %}selected-concept{% endif %}" >
                                {% with ''|center:forloop.counter0 as range %}
                                <span class="text-muted" style="padding-left:13px;">{% for i in range %}...{% endfor %}</span>
                                {% endwith %}
                                <a href="javascript:void(0);" class="arches-CRUD-child" title="{% trans "Jump to this concept" %}" data-action="viewconcept" data-conceptid="{{parent_concept.id}}"> {{parent_concept.label}}</a>
                               
                            </dd>
                        {% if forloop.last %}{% with ''|center:forloop.counter as range %}
                                <!-- <a href="javascript:void(0);" class="arches-CRUD-child" title="{% trans "Jump to this concept" %}">{{prefLabel}}</a> -->
                            {% if show_children%}
                                {% for subconcept in concept.subconcepts %}
                                <dd class="arches-concept-heirarchy">
                                    <i class=" {% if subconcept.hassubconcepts %}fa fa-expand{% endif %}" style="color:#aaa"></i><span class="text-muted"{% if not subconcept.hassubconcepts %}style="padding-left:13px;"{% endif %}>...{% for i in range %}...{% endfor %}</span>
                                    <a href="javascript:void(0);"><i class="arches-CRUD-delete fa fa-times-circle" title="{% trans "Delete this concept?" %}" data-id="{{subconcept.id}}" data-nodetype="{{subconcept.nodetype}}" data-action="delete-concept" data-message="{% trans "By deleting this concept, you will also be deleting the following concepts as well.  This operation cannot be undone." %}" ></i></a>
                                    <a href="javascript:void(0);" class="arches-CRUD-child" title="{% trans "Jump to this concept" %}" data-action="viewconcept" data-conceptid="{{subconcept.id}}">{{subconcept.prefLabel.value}}</a>
                                </dd>
                                {% endfor %}
                            {% endif %}
                        {% endwith %}{% endif %}
                        {% endfor %}
                        </dl>
                    </div>
                    {% endwith %}
                    {% endfor %}
                </div>

                <!-- Broader/Narrower as Graph (for multi-parent concepts) -->
                <div style="display: none; margin-top: 10px;" class="concept-graph">

                   {% include "views/concept-graph.htm" %}
                    
                </div>
                <!-- End Broader/Narrower as Graph (for multi-parent concepts) -->

            </dl>
        </div>
        <!-- End Broader/Narrower Concepts -->

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

        <!-- Associative Concepts-->
        <div class="margin-bottom-10 padding-left-10">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Related Concepts" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right" data-toggle="#related-concept-form">{% trans "Add related concept" %}</a>
                        <span>
                    </h5>
                </dt>

                {% for concept in concept.relatedconcepts %}
                    <dd class="arches-RDM-label-highlighted">
                        <a href="javascript:void(0);"><i class="arches-CRUD-delete fa fa-times-circle" title="{% trans "Remove the relationship to this concept?" %}" data-id="{{concept.id}}" data-action="delete-relationship" data-message="{{concept.prefLabel.value}}"></i></a>
                        <a href="javascript:void(0);" title="{% trans "Jump to this concept" %}" data-action="viewconcept" data-conceptid="{{concept.id}}">{{concept.prefLabel.value}}</a>
                        <span class="text-muted"> (preferred, {{concept.prefLabel.language}})</span>
                    </dd>
                {% endfor %}
                
            </dl>
        </div>
        <!-- End Associative Concepts -->

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

        <!-- Related Values -->
        <div class="margin-bottom-10 padding-left-10">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Values" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right edit-value" data-category="" data-target="#related_valuemodal">{% trans "Add value" %}</a>
                        <span>
                    </h5>
                </dt>
                {% for value in concept.values %}
                    {% if value.category == 'undefined' %}
                    <dd class="arches-RDM-label-highlighted">
                        <a href="javascript:void(0);"><i class="color-red fa fa-times-circle" title="{% trans "Delete this value?" %}" data-id="{{value.id}}" data-action="delete-value" data-message="{{value.value}}" data-category="{{value.category}}"></i></a>
                        <a href="javascript:void(0);" title="{% trans "Edit this value" %}" data-action="edit" class="edit-value" data-target="#related_valuemodal" data-id="{{value.id}}" data-datatype="{{value.datatype}}" data-type="{{value.type}}" data-category="{{value.category}}" data-value="{{value.value}}" data-language="{{value.language}}">{{value.type}}</a>
                        <span class="arches-RDM-note">{{value.value}}</span>
                    </dd>
                    {% endif %}
                {% endfor %}
           </dl>

        </div>
        <!-- End Related Values -->

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


        <!-- Images -->
        <div class="padding-left-10">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Images" %}
                        <span>
                            <a href="javascript:void(0);" class="arches-RDM-link pull-right add-image-link">{% trans "Add images" %}</a>
                        <span>
                    </h5>
                </dt>

                <dd class="arches-RDM-labels">
                <!-- Images -->
                {% for value in concept.values %}
                    {% if value.type == 'image' %}
                    <div class="row margin-top-10">
                        <div class="col-xs-12 shadow-wrapper margin-bottom-10">
                            <div class="box-shadow shadow-effect-1">
                                <img style="width: 100%;" src="{{MEDIA_URL}}{{value.value}}" data-img="{{MEDIA_URL}}{{value.value}}" alt="Image Name" title="" class="superbox-img img-bordered arches-RDM-image">
                            </div>

                            <div class="margin-left-5 margin-top-10">
                                <a data-id="{{value.id}}" data-action="delete-value" data-message="{{value.value}}" href="javascript:void(0);" class="btn-u btn-u-small">{% trans "Delete Image" %}</a></p>
                            </div>
                        </div>
                    </div>
                    <!-- Spacer -->
                    <div class="margin-top-10"></div>
                    {% endif %}
                {% endfor %}
                <!-- End Images -->
                    

                </dd>
            </dl>
        </div>
        <!-- End Images -->

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

    <!-- Concept Unique Ids -->
    <div class="padding-left-10">
        <dl>
            <dt>
                <h5 id="arches-names-form" class="section-headline">
                    {% trans "Identifiers" %}  
                </h5>
            </dt>
            
            <dd class="arches-RDM-note">
                {% trans "Arches ID:" %} {{concept.id}} </br>
                <!-- URI: http://purl.org/heritagedataschemes/560/concepts/142513 -->
            </dd>

            </dl>
        </div>
        <!-- End Concept Unique Ids -->
    </div>


    <div action="" class="modal fade confirm-delete-modal" tabindex="-1" role="dialog" aria-labelledby="alertmodal" aria-hidden="true">
        <div class="modal-dialog confirm-delete">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{% trans "Are you ready to delete this item?" %}</h4>
                </div>
                <div class="modal-body">
                    <h5 name="warning-text">
                    </h5>
                    <div name="additional-info">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-u btn-u-default" data-dismiss="modal">{% trans "No" %}</button>
                    <button class="btn-u btn-u-red confirm-delete-yes" href="javascript:void(0);" data-id="" data-action="delete">{% trans "Yes" %}</button>
                </div>
            </div>
        </div>
    </div>


    <!-- End Modal window for adding a new concept -->
    <div id="value-form">
        {% include "views/rdm/modals/value-form.htm" %}
    </div>

    <div id="add-image-form">
        {% include "views/rdm/modals/add-image-form.htm" %}
    </div>

    <div id="related-concept-form">
        {% include "views/rdm/modals/related-concept-form.htm" %}
    </div>

    <div id="manage-parent-form">
        {% include "views/rdm/modals/manage-parent-form.htm" %}
    </div>

    <div id="add-child-form">
        {% include "views/rdm/modals/add-child-form.htm" %}
    </div>
{% else %}
    <div class="col-xs-12 concept-report-content">
        <div class="headline arches-RDM-headline"><h3 class="arches-RDM-Concept">Arches Reference Data Manager</h3></div>
     
        <div class="row margin-bottom-40">
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{collection_count}}</span>
                <h4>Collections</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{scheme_count}}</span> 
                <h4>Schemes</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{entitytype_count}}</span>
                <h4>Entity Types</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{concept_count}}</span>
                <h4>Concepts</h4>
            </div>
        </div>


    </div>
{% endif %}