{% extends "p4l/p4l_base.html" %}

{% load static %}

{% load i18n %}

{% block page_title %}{% trans 'Record' %} {{ params.identifier }} - {% trans 'View' %}{% endblock %}

{% block css_page %}

  <link rel="stylesheet" href="{% static 'p4l/lib/css/smoothness/jquery-ui-1.10.3.custom.css' %}">

  <link rel="stylesheet" href="{% static 'p4l/css/semantictree.css' %}">

{% endblock %}

{% block js_page %}

<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/angular/angular.min.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/angular/angular-resource.min.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/angular-mod/angular-translate.min.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/jquery-1.9.1.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/jquery-ui-1.10.3.custom.min.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/lib/jquery.jstree.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/js/p4l.js' %}"></script>

<script type="text/javascript" src="{% static 'p4l/js/semantictree.js' %}"></script>

<script type="text/javascript">

    angular.module("recordApp")

        .value('context', {

            record_id: "{{record.identifier}}",

            uri_labels: angular.fromJson('{{uri_labels | safe | addslashes}}'),

            urls: {

                record_api: "{% url 'record-detail' identifier=':recordId' %}".replace("\%3A",":")

            }

        })

        .config(['$translateProvider', function($translateProvider) {

            $translateProvider.translations(catalog); //catalog is declared in django.views.i18n.javascript_catalog

        }]);

    var sqd = angular.fromJson('{{ subjects_query_dict | safe | addslashes}}');

    for (var k in sqd){

        if (sqd.hasOwnProperty(k)) {

            $("#id_addSubjectText").attr(k,sqd[k]);

        }

    }

</script>

{% endblock %}

{% block content %}

{% verbatim %}

<div ng-app="recordApp" ng-controller="RecordCtrl">

<table class="table record-table">

  <thead>

    <tr><td>{{'property' | translate}}</td><td>{{'value' | translate }}</td></tr>

  </thead>

  <tbody>

    <tr>

      <td>URI</td>

      <td>{{record.uri}}</td>

    </tr>

    <tr>

      <td>{{'identifier' | translate}}</td>

      <td>{{record.identifier}}</td>

    </tr>

    <tr>

      <td>{{'subjects' | translate}}</td>

      <td>

          <ul ng-repeat="subject in record.subjects">

              <li>{{uriLabels[subject]}} <small class="text-muted">({{subject}})</small> <a ng-click='removeSubject(subject)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>

          </ul>

          <form class="form-inline" role="form" ng-submit="addSubject()">

	        <div class="form-group col-md-8">

	          <input id="id_addSubjectText" ng-model="addSubjectText" class="semantic-tree form-control col-md-10" type="text" placeholder="{{'Add a new subject' | translate}}" required="required"/>

	          {{'or' | translate}} 

	          <span id="dialog-link-container-addSubjectText" class="dialog-link-container ui-state-default ui-corner-all">

	            <a href="#" id="dialog-link-addSubjectText" class="btn dialog-link" title="Browse">{{'Browse' | translate}}</a>

	          </span>

	          <span id="dialog-addSubjectText" class="dialog" title="Select term"><span id="term-tree-addSubjectText"></span></span>

	        </div>

	        <div class="form-group">

	          <button type="submit" class="btn btn-primary">{{'Add' | translate}}</button>

	        </div>

	      </form>

      </td>

    </tr>

    <tr>

        <td>{{'notes' | translate}}</td>

        <td><textarea id="record-notes-input" class="form-control" ng-model="record.notes"></textarea></td>

    </tr>

  </tbody>

</table>

</div>

{% endverbatim %}

{% endblock %}