--- a/src/p4l/static/p4l/css/p4l.css	Mon Sep 09 18:01:47 2013 +0200
+++ b/src/p4l/static/p4l/css/p4l.css	Tue Sep 10 02:01:31 2013 +0200
@@ -44,3 +44,8 @@
 .flag.flag-es {background-position: -16px 0}
 .flag.flag-fr {background-position: 0 -11px}
 .flag.flag-en {background-position: -16px -11px}
+
+/* css class to avoid angular flicker */
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}

--- a/src/p4l/static/p4l/js/p4l.js	Mon Sep 09 18:01:47 2013 +0200
+++ b/src/p4l/static/p4l/js/p4l.js	Tue Sep 10 02:01:31 2013 +0200
@@ -1,4 +1,5 @@
 
+"use strict";
 // initialize the app
 
 var app = angular.module("recordApp", ['ngResource', 'ngRoute', 'pascalprecht.translate'])
@@ -24,55 +25,107 @@
     this.uriLabels = context.uri_labels;
 });
 
-app.directive('objectForm', function(RecordModel, context) {
+
+app.directive('objectDisp', ['$compile', '$http', '$templateCache', 'context', function($compile, $http, $templateCache, context) {
+
+    var getTemplate = function(templateName) {
+        var templateLoader,
+        templateUrl = context.urls.base_static+'p4l/templates/'+templateName+'.html';
+        templateLoader = $http.get(templateUrl, {cache: $templateCache});
+
+        return templateLoader;
+    }
+
+    var linker = function(scope, element, attrs) {
+
+        var loader = getTemplate(scope.dispTemplate);
+
+        var promise = loader.success(function(html) {
+            element.html(html);
+        }).then(function (response) {
+            element.replaceWith($compile(element.html())(scope));
+        });
+    }
+
+    return {
+        restrict: 'E',
+        scope: {
+            dispTemplate: "=",
+            obj: "="
+        },
+        link: linker
+    };
+}]);
+
+
+app.directive('objectList', function(RecordModel, context) {
     return {
         restrict: 'E',
         replace: true,
         transclude: true,
         scope: {
-            obj:"=editedObject",
-            onOk: "&"
+            list:"=objectList",
+            dispTemplate: "@dispTemplate",
+            formTemplate: "@formTemplate",
+            objectFields: "@objectFields"
+        },
+        controller: function($scope, $element, $attrs, $transclude) {
+            $scope.getStaticTemplateUrl = function(templateName) {
+                return context.urls.base_static+'p4l/templates/'+templateName+".html";
+            }
+            $scope.getEmptyObjectFromList = function(fieldList) {
+                var res = {};
+                for ( var field in fieldList) {
+                    res[field] = "";
+                }
+                return res;
+            }
         },
-        //templateUrl: context.urls.base_static+'p4l/templates/imprintForm.html',
-        templateUrl: function(tElement, tAttrs) {
-            return context.urls.base_static+'p4l/templates/'+ tAttrs.templateName +'.html';  
-        },
-        link: function(scope, element, attrs) {
+        templateUrl: context.urls.base_static+'p4l/templates/objectList.html',  
+        link: function($scope, $element, $attrs) {
+            $scope.editedObj = null;
+            
+            $scope.getEmptyObject = function() {
+                return $scope.getEmptyObjectFromList(angular.fromJson($scope.objectFields));
+            };
+
+            $scope.setEditedObject = function(obj) {
+                $scope.editedObj = obj;
+            }
+            
+            $scope.newEditedObject = function() {
+                var newObj = $scope.getEmptyObject();
+                $scope.list.push(newObj);
+                $scope.setEditedObject(newObj);
+            };
+            
+            $scope.removeFromList = function(obj) {
+                var i = $scope.list.indexOf(obj);
+                if(i>=0){
+                    $scope.list.splice(i, 1);
+                }
+                $scope.setEditedObject(null);
+            }
+                        
+            $scope.onOk = function() {
+                $scope.setEditedObject(null);
+            }
             
         }
     };
 });
 
+
+
 app.controller("RecordCtrl", function($scope, RecordModel, context){
     
     $scope.record = RecordModel.record;
-    $scope.uriLabels = RecordModel.uriLabels;
-    $scope.editedImprint = null;
-    
+    $scope.uriLabels = RecordModel.uriLabels;    
         
     $scope.submitRecord = function() {
         $scope.record.$save({recordId: context.record_id});
     }
     
-    $scope.addUriToList = function(list, uri) {
-    	list.push(uri);
-    };
-    
-    $scope.removeFromList = function(uri, list) {
-    	i = list.indexOf(uri);
-    	if(i>=0){
-    		list.splice(i, 1);
-    	}
-    };
-    
-    $scope.setEditedObject = function(obj, prop) {
-        $scope[prop] = obj;
-    }
-    
-    $scope.newEditedObject = function(templ, list, prop) {
-        list.push(templ);
-        $scope[prop] = templ;
-    }
     
 });
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/imprintDisp.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,6 @@
+<ul class="list-unstyled">
+    <li>{{'City'|translate}} : {{ obj.imprintCity }}</li>
+    <li>{{'Publisher'|translate}} : {{ obj.publisher }}</li>
+    <li>{{'Date'|translate}} : {{ obj.imprintDate }}</li>
+    <li>{{'Language'|translate}} : {{ obj.lang }}</li>
+</ul>

--- a/src/p4l/static/p4l/templates/imprintForm.html	Mon Sep 09 18:01:47 2013 +0200
+++ b/src/p4l/static/p4l/templates/imprintForm.html	Tue Sep 10 02:01:31 2013 +0200
@@ -1,9 +1,10 @@
-<div>
-    <form>
-        <label for="imprint-city">{{'City'|translate}}</label><input type="text" ng_model="obj.imprintCity" name="imprintCity" id="imprint-city"/>
-        <label for="imprint-publisher">{{'Publisher'|translate}}</label><input type="text" ng_model="obj.publisher" name="publisher" id="imprint-publisher"/>
-        <label for="imprint-date">{{'Date'|translate}}</label><input type="text" ng_model="obj.imprintDate" name="imprintDate" id="imprint-date"/>
-        <label for="imprint-lang">{{'Language'|translate}}</label><input type="text" ng_model="obj.lang" name="lang" id="imprint-lang"/>        
-    </form>
-    <button ng-click="onOk()">OK</button>
-</div>
\ No newline at end of file
+ <form class="well span6">
+    <div class="span3 row">
+     <label for="imprint-city">{{'City'|translate}}</label><input type="text" placeholder="{{'City'|translate}}" ng_model="editedObj.imprintCity" name="imprintCity" id="imprint-city" class="span3"/>
+     <label for="imprint-publisher">{{'Publisher'|translate}}</label><input type="text" placeholder="{{'Publisher'|translate}}" ng_model="editedObj.publisher" name="publisher" id="imprint-publisher" class="span3"/>
+     </div>
+     <div class="span3 row">
+     <label for="imprint-date">{{'Date'|translate}}</label><input type="text" placeholder="{{'Date'|translate}}" ng_model="editedObj.imprintDate" name="imprintDate" id="imprint-date" class="span3"/>
+     <label for="imprint-lang">{{'Language'|translate}}</label><input type="text" placeholder="{{'Language'|translate}}" ng_model="editedObj.lang" name="lang" id="imprint-lang" class="span3"/>
+     </div>
+ </form>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/isbnDisp.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,1 @@
+<div>{{'isbn'|translate}} : {{obj.isbn}}</div>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/isbnForm.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,5 @@
+ <form class="well span3">
+    <div class="span3 row">
+     <label for="isbn-{{$id}}">{{'isbn'|translate}}</label><input type="text" placeholder="{{'isbn'|translate}}" ng_model="editedObj.isbn" name="isbn" id="isbn-{{$id}}" class="span3"/>
+     </div>
+ </form>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/issnDisp.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,1 @@
+<div>{{'issn'|translate}} : {{obj.issn}}</div>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/issnForm.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,5 @@
+ <form class="well span3">
+    <div class="span3 row">
+     <label for="issn-{{$id}}">{{'issn'|translate}}</label><input type="text" placeholder="{{'issn'|translate}}" ng_model="editedObj.issn" name="issn" id="issn-{{$id}}" class="span3"/>
+     </div>
+ </form>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/objectList.html	Tue Sep 10 02:01:31 2013 +0200
@@ -0,0 +1,15 @@
+<div>
+<ul>
+    <li ng-repeat="obj in list">
+        <!--ng-include src="getStaticTemplateUrl(dispTemplate)"></ng-include-->
+        <object-disp obj="obj" disp-template="dispTemplate"></object-disp>
+        <a ng-click='removeFromList(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
+        <a ng-click='setEditedObject(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
+    </li>
+</ul>
+<a ng-click='newEditedObject()' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
+<div ng-show="editedObj!==null">
+    <ng-include src="getStaticTemplateUrl(formTemplate)"></ng-include>
+    <button ng-click="onOk()" class="btn btn-primary">OK</button>
+</div>
+</div>
\ No newline at end of file

--- a/src/p4l/templates/p4l/record_update_form.html	Mon Sep 09 18:01:47 2013 +0200
+++ b/src/p4l/templates/p4l/record_update_form.html	Tue Sep 10 02:01:31 2013 +0200
@@ -42,7 +42,7 @@
 
 {% block content %}
 {% verbatim %}
-<div ng-app="recordApp" ng-controller="RecordCtrl">
+<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>
@@ -79,22 +79,16 @@
         <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><ul>
-          <li ng-repeat="imprint in record.imprints">
-            <ul class="list-unstyled">
-              <li>{{'City'|translate}} : {{ imprint.imprintCity }}</li>
-              <li>{{'Publisher'|translate}} : {{ imprint.publisher }}</li>
-              <li>{{'Date'|translate}} : {{ imprint.imprintDate }}</li>
-              <li>{{'Language'|translate}} : {{ imprint.lang }}</li>
-            </ul>
-            <a ng-click='removeFromList(imprint, record.imprints)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
-            <a ng-click='setEditedObject(imprint,"editedImprint")' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
-          </li>
-        </ul>
-        <a ng-click='newEditedObject({imprintCity:"", publisher:"", imprintDate:"", lang:""}, record.imprints, "editedImprint")' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
-        <object-form edited-object="editedImprint" on-ok="editedImprint=null" ng-show="obj!==null" template-name="imprintForm"></imprint-form>
-        </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>