@(metadata: List[models.Metadata], toDelete: Boolean)(implicit user: Option[models.User])
    @import java.net.URL
    @import play.api.libs.json.JsString
    @import play.api.libs.json.JsObject
    @import play.api.libs.json.JsValue
    @import play.api.libs.json.JsArray
    @import api.Permission

    <script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
    @if(play.api.Play.current.plugin[services.StagingAreaPlugin].isDefined) {
        <script src="@routes.Assets.at("javascripts/people.js")" type="text/javascript"></script>
    }

     @defining(1) { counter: Int =>
        <script>
                function activateTable() {
                    $("#metadataCardsBtn").addClass("btn-link").removeClass("btn-primary");
                    $("#metadata-cards").hide();
                    $("#metadata-table").show();
                    $("#metadataTableBtn").addClass("btn-primary").removeClass("btn-link");
                }

                function activateCards() {
                    $("#metadataTableBtn").addClass("btn-link").removeClass("btn-primary");
                    $("#metadata-table").hide();
                    $("#metadata-cards").show();
                    $("#metadataCardsBtn").addClass("btn-primary").removeClass("btn-link");
                }

                $(document).ready(function () {
                    activateCards();
                });
        </script>

        <div class="row" id="cards-table-view-selector">
            <div class="col-sm-12">
                <div class="pull-left">
                    <h4>Metadata</h4>
                </div>
                <div class="pull-right">
                    <div class="btn-group btn-group-sm" role="group" aria-label="...">
                        <button id="metadataCardsBtn" type="button" class="btn btn-primary" onclick="activateCards()">
                            <span class="glyphicon glyphicon-th-list"></span>
                        </button>
                        <button id="metadataTableBtn" type="button" class="btn btn-link" onclick="activateTable()">
                            <span class="glyphicon glyphicon-th-large"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="cards-table-view">
            <div class="col-md-12">
                <div id="metadata-table" role="tabpanel" class="tab-pane fade in active">
                    <div class="table-responsive">
                        <table class="table table-hover table-condensed">
                            <thead>
                                <tr>
                                    <th width="20%" style="width: 20%">Name</th>
                                    <th width="40%" style="width: 40%">Value</th>
                                    <th width="30%" style="width: 30%">Last Modified</th>
                                    <th width="10%" style="width: 10%"></th>
                                </tr>
                            </thead>
                            <tbody id="metadata-table-body">
                                @for((m, i) <- metadata.zipWithIndex) {
                                    @m.content match {
                                        case o: JsObject => {
                                            @if(o.fields.length == 0) {
                                                <tr id="row_@m.id">
                                                    <td colspan="4">
                                                        No field content found
                                                    </td>
                                                </tr>
                                            }
                                            @if(o.fields.length == 1) {
                                                @for((key, value) <- o.fields) {
                                                    <tr id="row_@m.id">
                                                        <td><a href="#">@key</a></td>
                                                        <td class="md-block tree" style="padding-left: 0;">
                                                        @printContent(m, "content", i, true)
                                                        </td>
                                                        <td>@printContent(m, "header", i, true)</td>
                                                        <td>
                                                            @if(toDelete && Permission.checkPermission(Permission.DeleteMetadata, ResourceRef(ResourceRef.metadata, m.id))) {
                                                                <a id="@m.id" title="Delete this metadata" class="btn btn-link delete-icon">
                                                                    <span class="panel-icon glyphicon glyphicon-trash"></span>
                                                                </a>
                                                            }
                                                            @******************************
                                                            This dropdown can be used to easily expand the functions offered by each row
                                                            <div class="dropdown">
                                                            <button class="btn btn-link btn-xs dropdown-toggle" type="button" id="dropdownMenu-@m.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                            <span class="glyphicon glyphicon-option-horizontal"></span>
                                                            </button>
                                                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu-@m.id">
                                                            @if(Permission.checkPermission(Permission.EditMetadata, ResourceRef(ResourceRef.metadata, m.id))) {
                                                            <li><a class="btn btn-link disabled" disabled="true">Edit</a></li>
                                                            }

                                                            @if(toDelete && Permission.checkPermission(Permission.DeleteMetadata, ResourceRef(ResourceRef.metadata, m.id))) {
                                                            <li>
                                                            <a id="@m.id" title="Delete this metadata" class="btn btn-link delete-icon">
                                                            <span class="panel-icon glyphicon glyphicon-trash"></span>
                                                            </a>
                                                            </li>
                                                            }
                                                            </ul>
                                                            </div>
                                                            ******************************@
                                                        </td>
                                                    </tr>
                                                }
                                            }
                                            @if(o.fields.length > 1){
                                                @for((key, value) <- o.fields.headOption.toList) {
                                                    <tr id="row_@m.id">
                                                        <td><a href="#">@key</a></td>
                                                        <td class="md-block tree" style="padding-left: 0;">
                                                        @printContent(m, "content", i, true)
                                                        </td>
                                                        <td>@printContent(m, "header", i, true)</td>
                                                        <td>
                                                        @if(toDelete && Permission.checkPermission(Permission.DeleteMetadata, ResourceRef(ResourceRef.metadata, m.id))) {
                                                            <a id="@m.id" title="Delete this metadata" class="btn btn-link delete-icon">
                                                                <span class="panel-icon glyphicon glyphicon-trash"></span>
                                                            </a>
                                                        }
                                                        </td>
                                                    </tr>
                                                }
                                            }
                                        }
                                        case _ => {
                                            @m.content
                                        }
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="metadata-cards" role="tabpanel" class="tab-pane fade in active">
                    @for((m, i) <- metadata.zipWithIndex) {

                        <div class="panel panel-default" id="panel_@m.id">
                            <div class="panel-heading" role="tab" id="heading_@m.id">
                                <a data-toggle="collapse" href="#collapse_@m.id" class="collapse-icon">
                                    <span class="panel-icon glyphicon glyphicon-minus"></span>
                                </a>
                                <span>
                                @printContent(m, "header", i)

                                </span>
                                @if(toDelete && Permission.checkPermission(Permission.DeleteMetadata, ResourceRef(ResourceRef.metadata, m.id))) {
                                    <a id="@m.id" title="Delete this metadata" class="btn btn-link delete-icon">
                                        <span class="panel-icon glyphicon glyphicon-trash"></span>
                                    </a>
                                }
                            </div>
                            <div id="collapse_@m.id" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_@m.id">
                                <div class="panel-body">
                                    <div class="tree">
                                    @printContent(m, "content", i)
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }

    @if(metadata.size == 0) {
        <p class="text-center" id="no-metadata-label">No metadata available for this resource</p>
    }


    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();

            $('.collapse')
                    .on('shown.bs.collapse', function(){
                        $(this).parent().find(".panel-icon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
                    })
                    .on('hidden.bs.collapse', function(){
                        $(this).parent().find(".panel-icon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
                    });

            $('.tree li').on('click', function (e) {
                var children = $(this).find('> ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
                } else {
                    children.show('fast');
                    $(this).find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
                }
                e.stopPropagation();
            });
        })

        $(function () {
            $('.delete-icon').unbind().on('click', function(){
                var delete_icon = $(this);
                var metadataId = this.id;
                var request = jsRoutes.api.Metadata.removeMetadata(metadataId).ajax({
                    type: 'DELETE'
                });

                request.done(function (response, textStatus, jqXHR) {
                    // Remove both the panel and the table row for this entry
                    $("#panel_" + metadataId).remove();
                    $("#row_" + metadataId).remove();

                    // No more panels left, display placeholder text instead
                    if($('#metadata-content .panel').length == 0) {
                        $('#no-metadata-label').text('No metadata available for this resource');
                    }
                });

                request.fail(function (jqXHR, textStatus, errorThrown){
                    console.error("The following error occured: " + textStatus, errorThrown);
                    var errMsg = "You must be logged in to add metadata";
                    if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                        notify("Metadata was not removed due to : " + errorThrown, "error");
                    }
                });
            });
        })

        $(document).on('mouseenter', '.context-key', function(){
            var contextId = this.id.split("-",1)[0];
            getMetadataContext(this.id, contextId, this.textContent)
        });

        $(document).on('mouseenter', '.context-url-key', function() {
            var contextUrl = $(this).data("url");
            $('#'+this.id).addClass("popping");
            showPopover(this.id, contextUrl);
        });

        $(document).on('mouseleave', '.context-url-key', function() {
            leaveMetadataContext(this.id)
        });


        $(document).on('mouseleave', '.context-key', function(){
            leaveMetadataContext(this.id)
        });

        // get metadata definitions
        function getMetadataContext(mid, uuid, key) {
            var request = jsRoutes.api.ContextLD.getContextById(uuid).ajax({
                type: 'GET',
                contentType: "application/json"
            });
            $("#"+mid).addClass("popping");
            request.done(function (response, textStatus, jqXHR) {
                var fields = response;
                var context = "Context is not defined.";
                if (fields['@@context'][1] && typeof fields['@@context'][1][key] !== 'undefined') {
                    context = JSON.stringify(fields['@@context'][1][key]);
                }
                showPopover(mid, context)
            });

            request.fail(function (jqXHR, textStatus, errorThrown){
                $("#"+mid).removeClass("popping");
                console.error("The following error occured: " + textStatus, errorThrown);
                var errMsg = "You must be logged in to retrieve metadata definitions";
                if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                    notify("Metadata context was not shown due to : " + errorThrown, "error");
                }
            });
        }

        function showPopover(id, context) {
            $("#"+id).popover({
                content:context,
                placement:'top',
                template: '<div class="popover" role="tooltip" style="max-width:600px;word-break:break-all"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            });
            $("#"+id).popover('show');
            if (!$("#"+id).hasClass("popping")) {
                setTimeout(leaveMetadataContext, 500, id);
            }

        }

        function leaveMetadataContext(mid) {
            $("#"+mid).removeClass("popping");
            $("#"+mid).popover('hide');
        }
    </script>