{% 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-route.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}}'),
            csrf_token: "{{ csrf_token }}",
            urls: {
                base_static: "{% get_static_prefix %}",
                record_api: "{% url 'record-detail' identifier=':recordId' %}".replace("\%3A",":"),                
            },
            themes_query_dict: angular.fromJson('{{ themes_query_dict | safe | addslashes}}'),
            subjects_query_dict: angular.fromJson('{{ subjects_query_dict | safe | addslashes}}')
        })
        .config(['$translateProvider', function($translateProvider) {
            $translateProvider.translations(catalog); //catalog is declared in django.views.i18n.javascript_catalog
        }]);
    
</script>
{% endblock %}

{% block content %}
{% verbatim %}
<div ng-app="recordApp" ng-controller="RecordCtrl" ng-cloak>
<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>
              <li ng-repeat="subject in record.subjects">{{uriLabels[subject]}} <small class="text-muted">({{subject}})</small> <a ng-click='removeFromList(subject, record.subjects)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
          </ul>
          <add-sem-uri localid="addSubjectText" listname="subjects"></add-sem-uri>
      </td>
    </tr>
    <tr>
      <td>{{'themes' | translate}}</td>
      <td>
          <ul ng-repeat="theme in record.themes">
              <li>{{ uriLabels[theme] }} <small class="text-muted">({{theme}})</small> <a ng-click='removeFromList(theme, record.themes)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
          </ul>
          <add-sem-uri localid="addThemeText" listname="themes"></add-sem-uri>
      </td>
    </tr>
    <tr>
        <td>{{'notes' | translate}}</td>
        <td><textarea id="record-notes-input" class="form-control" ng-model="record.notes"></textarea></td>
    </tr>
    <tr>
      <td>{{ 'issns' | translate }}</td>
      <td><object-list form-template="issnForm" disp-template="issnDisp" object-list="record.issns" object-fields='["issn"]'></object-list></td>
    </tr>
    <tr>
      <td>{{ 'isbns' | translate }}</td>
      <td><object-list form-template="isbnForm" disp-template="isbnDisp" object-list="record.isbns" object-fields='["isbn"]'></object-list></td>
    </tr>
    <tr>
        <td>{{'imprints' | translate}}</td>
        <td><object-list form-template="imprintForm" disp-template="imprintDisp" object-list="record.imprints" object-fields='["imprintCity","publisher","imprintDate", "lang"]'></object-list></td>
    </tr>
  </tbody>
</table>
<button ng-click="submitRecord()">{{ 'Save' | translate }}</button>
</div>
{% endverbatim %}
{% endblock %}