{% 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/lib/tag-it/css/jquery.tagit.css' %}">
  <link rel="stylesheet" href="{% static 'p4l/css/semantictree.css' %}">
{% endblock %}

{% block js_page %}
<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/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/tag-it/js/tag-it.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: {{uri_labels|safe}},
            urls: {
                record_api: "{% url 'record-detail' identifier=':recordId' %}".replace("\%3A",":")
            }
        });
    var sqd = {{ subjects_query_dict|safe }};
    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</td><td>value</td></tr>
  </thead>
  <tbody>
    <tr>
      <td>URI</td>
      <td>{{record.uri}}</td>
    </tr>
    <tr>
      <td>identifier</td>
      <td>{{record.identifier}}</td>
    </tr>
    <tr>
      <td>subjects</td>
      <td>
          <ul ng-repeat="subject in record.subjects">
              <li>{{uriLabels[subject]}} <small class="text-muted">({{subject}})</small></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" required="required"/>
	          ou 
	          <span id="dialog-link-container-addSubjectText" class="dialog-link-container ui-state-default ui-corner-all">
	            <a href="#" id="dialog-link-addSubjectText" class="dialog-link" title="Browse">Browse</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</button>
	        </div>
	      </form>
      </td>
    </tr>
  </tbody>
</table>
</div>
{% endverbatim %}
<div class="row">
    <div class="col-md-12 text-right">
      <a href="?lang=fr" alt="FR"><img src="{% static 'p4l/img/blank.gif' %}" class="flag flag-fr" alt="FR" /></a>&nbsp;
      <a href="?lang=en" alt="EN"><img src="{% static 'p4l/img/blank.gif' %}" class="flag flag-gb" alt="EN" /></a>&nbsp;
      <a href="?lang=es" alt="ES"><img src="{% static 'p4l/img/blank.gif' %}" class="flag flag-es" alt="ES" /></a>
    </div>
</div>
{% endblock %}