 {% load i18n %}
 {% load static %}
<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">
            <div>
                <h3 class="arches-RDM-Concept">{{prefLabel.value}} ({{prefLabel.language}})</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>
            </div>
            {% if concept.nodetype == 'Concept' or concept.nodetype == 'ConceptScheme'%}
            <!-- Concept Management Tools for larger screens -->
            <div class="btn-group 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 == 'ConceptScheme'%}
                    <li><a href="javascript:void(0);" data-toggle="#add-top-concept-form">{% trans "Add Top Concept" %}</a></li>
                    <li><a href="javascript:void(0);" data-toggle="#import-concept-form">{% trans "Import Top Concept from SPARQL" %}</a></li>
                    {% endif %}
                    {% if concept.nodetype == 'Concept'%}
                    <li><a href="javascript:void(0);" data-toggle="#add-concept-form">{% trans "Add Child" %}</a></li>
                    <li><a href="javascript:void(0);" data-toggle="#import-concept-form">{% trans "Import Child from SPARQL" %}</a></li>
                    {% endif %}
                    <li><a href="javascript:void(0);" data-toggle="#manage-parent-form">{% trans "Manage Parents" %}</a></li>
                    <li><a href="javascript:void(0);" data-toggle="#make-collection">{% trans "Make Collection" %}</a></li>
                    <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">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Labels" %}</h5>
                    <span>
                        <a href="javascript:void(0);" class="arches-RDM-link edit-value" data-category="label" data-target="#labelmodal">{% trans "Add label" %}</a>
                    <span>
                </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">
            <dl>
                <dt>
                    <h5 id="" class="section-headline">{% trans "Notes" %}</h5>
                    <span>
                        <a href="javascript:void(0);" class="arches-RDM-link edit-value" data-category="note" data-target="#notemodal">{% trans "Add note" %}</a>
                    <span>
                </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">
            <dl>

                <dt>
                    <h5 id="" class="section-headline">{% trans "Broader/Narrower Concepts" %}
                    </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 %}" >
                                <i></i>
                                {% with ''|center:forloop.counter0 as range %}
                                <span class="text-muted">{% 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 %}
                            {% 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" data-bind="css: {is_padded: !subconcept.hassubconcepts}">...{% 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">
            <dl>
                <dt>
                    <h5 class="section-headline">{% trans "Related Concepts" %}</h5>
                    <span>
                        <a href="javascript:void(0);" class="arches-RDM-link" data-toggle="#related-concept-form">{% trans "Add related concept" %}</a>
                    <span>
                </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">
            <dl>
                <dt>
                    <h5 class="section-headline">{% trans "Values" %}</h5>
                    <span>
                        <a href="javascript:void(0);" class="arches-RDM-link edit-value" data-category="" data-target="#related_valuemodal">{% trans "Add value" %}</a>
                    <span>
                </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>
            <dl>
                <dt>
                    <h5 class="section-headline">{% trans "Images" %}</h5>
                    <span>
                        <a href="javascript:void(0);" class="arches-RDM-link add-image-link">{% trans "Add images" %}</a>
                    <span>
                </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="{{value.full_image_url}}" data-img="{{value.full_image_url}}" alt="Image Name" title="" class="superbox-img img-bordered arches-RDM-image">
                            </div>

                            <div class="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>
        <dl>
            <dt>
                <h5 id="arches-names-form" class="section-headline">
                    {% trans "Identifiers" %}
                </h5>
            </dt>

            <dd class="arches-concept-heirarchy">
                {% trans "Arches ID:" %} {{concept.id}}
            </dd>
            {% for value in concept.values %}
                {% if value.category == 'identifiers' %}
                    <dd class="arches-concept-heirarchy">
                        <a href="{{value.value}}" target="_blank">{{value.value}}</a>
                    </dd>
                {% endif %}
            {% endfor %}

            </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">
                    <h4 class="modal-title">{% trans "Are you ready to delete this item?" %}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <h5 name="warning-text">
                    </h5>
                    <div name="additional-info" style="max-height: 300px; overflow-y: scroll;">
                    </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>

    <div id="import-concept-form">
        {% include "views/rdm/modals/import-concept-form.htm" %}
    </div>
{% else %}
    <div class="col-xs-12 concept-report-content">
        <div class="headline arches-RDM-headline">
            <h3 class="arches-RDM-Concept">{% trans "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>{% trans "Collections" %}</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{scheme_count}}</span>
                <h4>{% trans "Schemes" %}</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{entitytype_count}}</span>
                <h4>{% trans "Entity Types" %}</h4>
            </div>
            <div class="counters col-md-3 col-sm-3">
                <span class="counter">{{concept_count}}</span>
                <h4>{% trans "Concepts" %}</h4>
            </div>
        </div>


    </div>
{% endif %}
