Update tpls use "html.twig" extension instead of "tpl" #1990

main/inc/lib/api.lib.php

@@ -788,7 +788,7 @@ function api_get_path($path = '', $configuration = [])
             REL_HOME_PATH => 'app/home/',
             SYS_APP_PATH => 'var/',
             WEB_APP_PATH => 'app/',
-            SYS_UPLOAD_PATH => 'app/upload/',
+            SYS_UPLOAD_PATH => 'var/upload/',
             SYS_INC_PATH => 'inc/',
             CONFIGURATION_PATH => 'app/config/',
             LIBRARY_PATH => 'inc/lib/',
@@ -1351,10 +1351,12 @@ function _api_format_user($user, $add_password = false, $loadAvatars = true)
     $result['firstname'] = null;
     $result['lastname'] = null;
 
-    if (isset($user['firstname']) && isset($user['lastname'])) { // with only lowercase
+    if (isset($user['firstname']) && isset($user['lastname'])) {
+        // with only lowercase
         $result['firstname'] = $user['firstname'];
         $result['lastname'] = $user['lastname'];
-    } elseif (isset($user['firstName']) && isset($user['lastName'])) { // with uppercase letters
+    } elseif (isset($user['firstName']) && isset($user['lastName'])) {
+        // with uppercase letters
         $result['firstname'] = isset($user['firstName']) ? $user['firstName'] : null;
         $result['lastname'] = isset($user['lastName']) ? $user['lastName'] : null;
     }
@@ -3448,8 +3450,8 @@ function api_is_anonymous($user_id = null, $db_check = false)
         if (!isset($user_id)) {
             $user_id = api_get_user_id();
         }
-        $info = api_get_user_info($user_id);
 
+        $info = api_get_user_info($user_id);
         if ($info['status'] == 6 || $user_id == 0 || empty($info)) {
             return true;
         }

main/inc/lib/template.lib.php

@@ -3,6 +3,7 @@
 
 use Chamilo\CoreBundle\Entity\SessionRelCourseRelUser;
 use Chamilo\UserBundle\Entity\User;
+use Chamilo\CoreBundle\Framework\Container;
 
 /**
  * Class Template
@@ -91,15 +92,13 @@ class Template
         ];
 
         $urlId = api_get_current_access_url_id();
-
         $cache_folder = api_get_path(SYS_ARCHIVE_PATH).'twig/'.$urlId.'/';
 
         if (!is_dir($cache_folder)) {
-            mkdir($cache_folder, api_get_permissions_for_new_directories(), true);
+            //mkdir($cache_folder, api_get_permissions_for_new_directories(), true);
         }
 
         $loader = new Twig_Loader_Filesystem($template_paths);
-
         $isTestMode = api_get_setting('server_type') === 'test';
 
         //Setting Twig options depending on the server see http://twig.sensiolabs.org/doc/api.html#environment-options
@@ -354,7 +353,7 @@ class Template
     public function display_one_col_template()
     {
         $tpl = $this->get_template('layout/layout_1_col.html.twig');
-        echo \Chamilo\CoreBundle\Framework\Container::getTemplating()->render($tpl, $this->params);
+        echo Container::getTemplating()->render($tpl, $this->params);
     }
 
     /**
@@ -363,7 +362,7 @@ class Template
     public function display_two_col_template()
     {
         $tpl = $this->get_template('layout/layout_2_col.html.twig');
-        echo \Chamilo\CoreBundle\Framework\Container::getTemplating()->render($tpl, $this->params);
+        echo Container::getTemplating()->render($tpl, $this->params);
     }
 
     /**
@@ -494,6 +493,7 @@ class Template
                 return 'default/'.$name;
             }
         }
+        $name = str_replace('tpl', 'html.twig', $name);
 
         return $this->templateFolder.'/'.$name;
     }
@@ -744,11 +744,11 @@ class Template
     {
         global $disable_js_and_css_files;
         // chamilo CSS
-        $css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'../chamilo.css');
+        //$css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'../chamilo.css');
 
         // Base CSS
-        $css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'base.css');
-
+        //$css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'base.css');
+        $css = [];
         if ($this->show_learnpath) {
             $css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).'scorm.css');
             if (is_file(api_get_path(SYS_CSS_PATH).$this->themeDir.'learnpath.css')) {
@@ -756,11 +756,10 @@ class Template
             }
         }
 
-        $css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).$this->themeDir.'default.css');
-
-        $css_file_to_string = null;
+        //$css[] = api_get_cdn_path(api_get_path(WEB_CSS_PATH).$this->themeDir.'default.css');
+        $css_file_to_string = '';
         foreach ($css as $file) {
-           // $css_file_to_string .= api_get_css($file);
+            $css_file_to_string .= api_get_css($file);
         }
 
         // @todo move this somewhere else. Special fix when using tablets in order to see the text near icons
@@ -1419,8 +1418,15 @@ class Template
         if ($clearFlashMessages) {
             Display::cleanFlashMessages();
         }
+        $template = str_replace('tpl', 'html.twig', $template);
+        $templateFile = api_get_path(SYS_PATH).'main/template/'.$template;
 
-        echo $this->twig->render($template, $this->params);
+        if (!file_exists($templateFile)) {
+            $e = new \Gaufrette\Exception\FileNotFound($templateFile);
+            echo $e->getMessage();
+            exit;
+        }
+        echo Container::getTemplating()->render($template, $this->params);
     }
 
     /**

main/template/default/auth/inscription.html.twig

@@ -1,6 +1,6 @@
 {%
     extends hide_header == true
-    ? template ~ "/layout/blank.tpl"
+    ? template ~ "/layout/blank.html.twig"
     : template ~ "/layout/layout_1_col.html.twig"
 %}
 

main/template/default/auth/session_catalog.html.twig

@@ -1,4 +1,4 @@
-{% extends template ~ "/layout/page.tpl" %}
+{% extends template ~ "/layout/page.html.twig" %}
 
 {% block body %}
     <script>

main/template/default/course_description/edit.html.twig

@@ -1,34 +1,34 @@
-{{javascript}}
-
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-
-{% if is_allowed_to_edit %}
-    <div class="btn-toolbar actions-bar" >
-        <div class="btn-group">
-            <a href="{{root}}&amp;action=listing" class="btn btn-default" title="{{'ImportCSV'|get_lang}}">
-                <em class="size-32 icon-back"></em>
-            </a>
-        </div>
-        <div class="btn-group edit new">
-            {% for type in types %}        
-                <a href="{{root}}&amp;action=add&amp;description_type={{type.id}}" class="btn btn-default">
-                    <img title="{{type.title}}" alt="{{type.title}}" src="{{type.icon|icon(32)}} " width="32" height="32">
-                </a>    
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}
-
-
-{% if type.question %}
-    <div class="normal-message">
-        <div>
-            <strong>{{'QuestionPlan'|get_lang}}</strong>
-        </div>
-        {{type.question}}
-    </div>
-{% endif %}
-
+{{javascript}}
+
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+
+{% if is_allowed_to_edit %}
+    <div class="btn-toolbar actions-bar" >
+        <div class="btn-group">
+            <a href="{{root}}&amp;action=listing" class="btn btn-default" title="{{'ImportCSV'|get_lang}}">
+                <em class="size-32 icon-back"></em>
+            </a>
+        </div>
+        <div class="btn-group edit new">
+            {% for type in types %}        
+                <a href="{{root}}&amp;action=add&amp;description_type={{type.id}}" class="btn btn-default">
+                    <img title="{{type.title}}" alt="{{type.title}}" src="{{type.icon|icon(32)}} " width="32" height="32">
+                </a>    
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
+
+
+{% if type.question %}
+    <div class="normal-message">
+        <div>
+            <strong>{{'QuestionPlan'|get_lang}}</strong>
+        </div>
+        {{type.question}}
+    </div>
+{% endif %}
+
 {{form.return_form()}}

main/template/default/course_description/index.html.twig

@@ -1,105 +1,105 @@
-{{javascript}}
-
-<script>
-{% if is_allowed_to_edit %}
-    var sec_token = '{{sec_token}}';
-{% endif %}
-
-function delete_entry(name, btn){
-    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
-        return false;
-    }
-
-    var item = $('#'+name);
-    var id = item.attr('data-id');
-    var c_id = item.attr('data-c_id');
-
-    var f = function(data){
-        if(data.success){
-            item.remove();
-        }
-        message.update(data);
-        $(btn).removeClass("loading");
-    };
-    CourseDescription.del(c_id, id, f);
-    $(btn).addClass("loading");
-}
-
-function delete_all(){
-    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
-        return false;
-    }
-
-    var f = function(data){
-        if(data.success){
-            var item = $('.course_descriptions');
-            item.remove();
-        }
-        message.update(data);
-    };
-    CourseDescription.delete_by_course({{c_id}}, {{session_id}}, f);
-}
-</script>
-
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-
-{% if is_allowed_to_edit %}
-    <div class="btn-toolbar actions-bar">
-        <div class="btn-group edit new">
-            {% for type in types %}
-                <a href="{{root}}&amp;action=add&amp;description_type={{type.id}}" class="btn btn-default">
-                    <img title="{{type.title}}" alt="{{type.title}}" src="{{type.icon|icon(32)}} " width="32" height="32">
-                </a>
-            {% endfor %}
-        </div>
-        <div class="btn-group edit">
-            <a href="{{root}}&amp;action=import_csv" class="btn btn-default" title="{{'ImportCSV'|get_lang}}">
-                <em class="size-32 icon-import-csv"></em>
-            </a>
-            <a href="{{root}}&amp;action=export_csv" class="btn btn-default" title="{{'ExportAsCSV'|get_lang}}">
-                <em class="size-32 icon-export-csv"></em>
-            </a>
-            <a href="javascript:void(0)" onclick="delete_all();return false;" class="btn btn-default" title="{{'DeleteAll'|get_lang}}">
-                <em class="size-32 icon-delete-all"></em>
-            </a>
-        </div>
-    </div>
-{% endif %}
-
-<ul style="list-style: none; margin-left:0;" class="course_descriptions">
-{% for description in descriptions %}
-    <li id="description_{{description.id}}" class="course_description" data-id="{{description.id}}" data-c_id="{{description.c_id}}" data-type="course_description">
-        <div class="title sectiontitle">
-            {% if is_allowed_to_edit %}
-                <div class="pull-right element-actions">
-                {% if session_id == description.session_id %}
-                    <a href="{{root}}&amp;action=delete&amp;id={{description.id}}"
-                       onclick="delete_entry('description_{{description.id}}', this); return false;"
-                       title="{{'Delete'|get_lang}}">
-                        <em class="size-22 icon-delete"></em>
-                    </a>
-
-                    <a href="{{root}}&amp;action=edit&amp;id={{description.id}}"
-                       title="{{'Edit'|get_lang}}">
-                        <em class="size-22 icon-edit"></em>
-                    </a>
-                {% else %}
-                    <img title="{{'EditionNotAvailableFromSession'|get_lang}}"
-                         alt="{{'EditionNotAvailableFromSession'|get_lang}}"
-                         src="{{'edit_na.png'|icon(22)}}"  width="22" height="22"
-                         style="vertical-align:middle;">
-                {% endif %}
-                </div>
-            {% endif %}
-
-            <img title="{{description.type.title}}" alt="{{description.type.title}}" src="{{description.type.icon|icon(32)}}" class="icon">
-            {{description.title}}
-        </div>
-        <div class="sectioncomment">
-            {{description.content}}
-        </div>
-    </li>
-{% endfor %}
+{{javascript}}
+
+<script>
+{% if is_allowed_to_edit %}
+    var sec_token = '{{sec_token}}';
+{% endif %}
+
+function delete_entry(name, btn){
+    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
+        return false;
+    }
+
+    var item = $('#'+name);
+    var id = item.attr('data-id');
+    var c_id = item.attr('data-c_id');
+
+    var f = function(data){
+        if(data.success){
+            item.remove();
+        }
+        message.update(data);
+        $(btn).removeClass("loading");
+    };
+    CourseDescription.del(c_id, id, f);
+    $(btn).addClass("loading");
+}
+
+function delete_all(){
+    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
+        return false;
+    }
+
+    var f = function(data){
+        if(data.success){
+            var item = $('.course_descriptions');
+            item.remove();
+        }
+        message.update(data);
+    };
+    CourseDescription.delete_by_course({{c_id}}, {{session_id}}, f);
+}
+</script>
+
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+
+{% if is_allowed_to_edit %}
+    <div class="btn-toolbar actions-bar">
+        <div class="btn-group edit new">
+            {% for type in types %}
+                <a href="{{root}}&amp;action=add&amp;description_type={{type.id}}" class="btn btn-default">
+                    <img title="{{type.title}}" alt="{{type.title}}" src="{{type.icon|icon(32)}} " width="32" height="32">
+                </a>
+            {% endfor %}
+        </div>
+        <div class="btn-group edit">
+            <a href="{{root}}&amp;action=import_csv" class="btn btn-default" title="{{'ImportCSV'|get_lang}}">
+                <em class="size-32 icon-import-csv"></em>
+            </a>
+            <a href="{{root}}&amp;action=export_csv" class="btn btn-default" title="{{'ExportAsCSV'|get_lang}}">
+                <em class="size-32 icon-export-csv"></em>
+            </a>
+            <a href="javascript:void(0)" onclick="delete_all();return false;" class="btn btn-default" title="{{'DeleteAll'|get_lang}}">
+                <em class="size-32 icon-delete-all"></em>
+            </a>
+        </div>
+    </div>
+{% endif %}
+
+<ul style="list-style: none; margin-left:0;" class="course_descriptions">
+{% for description in descriptions %}
+    <li id="description_{{description.id}}" class="course_description" data-id="{{description.id}}" data-c_id="{{description.c_id}}" data-type="course_description">
+        <div class="title sectiontitle">
+            {% if is_allowed_to_edit %}
+                <div class="pull-right element-actions">
+                {% if session_id == description.session_id %}
+                    <a href="{{root}}&amp;action=delete&amp;id={{description.id}}"
+                       onclick="delete_entry('description_{{description.id}}', this); return false;"
+                       title="{{'Delete'|get_lang}}">
+                        <em class="size-22 icon-delete"></em>
+                    </a>
+
+                    <a href="{{root}}&amp;action=edit&amp;id={{description.id}}"
+                       title="{{'Edit'|get_lang}}">
+                        <em class="size-22 icon-edit"></em>
+                    </a>
+                {% else %}
+                    <img title="{{'EditionNotAvailableFromSession'|get_lang}}"
+                         alt="{{'EditionNotAvailableFromSession'|get_lang}}"
+                         src="{{'edit_na.png'|icon(22)}}"  width="22" height="22"
+                         style="vertical-align:middle;">
+                {% endif %}
+                </div>
+            {% endif %}
+
+            <img title="{{description.type.title}}" alt="{{description.type.title}}" src="{{description.type.icon|icon(32)}}" class="icon">
+            {{description.title}}
+        </div>
+        <div class="sectioncomment">
+            {{description.content}}
+        </div>
+    </li>
+{% endfor %}
 </ul>

main/template/default/course_description/upload.html.twig

@@ -1,15 +1,15 @@
-{{javascript}}
-
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-
-<div class="btn-toolbar actions-bar" >
-    <div class="btn-group">
-        <a href="{{root}}&amp;action=listing" class="btn" title="{{'ImportCSV'|get_lang}}">
-            <em class="size-32 icon-back"></em>
-        </a>
-    </div>
-</div>
-
+{{javascript}}
+
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+
+<div class="btn-toolbar actions-bar" >
+    <div class="btn-group">
+        <a href="{{root}}&amp;action=listing" class="btn" title="{{'ImportCSV'|get_lang}}">
+            <em class="size-32 icon-back"></em>
+        </a>
+    </div>
+</div>
+
 {{form.return_form()}}

main/template/default/javascript/editor/ckeditor/elfinder.html.twig

@@ -1,5 +1,5 @@
-{% extends template ~ "/layout/no_layout.tpl" %}
+{% extends template ~ "/layout/no_layout.html.twig" %}
 
 {% block body %}
-    {% include template ~ '/javascript/editor/elfinder_standalone.tpl' %}
+    {% include template ~ '/javascript/editor/elfinder_standalone.html.twig' %}
 {% endblock %}

main/template/default/layout/blank.html.twig

@@ -4,7 +4,7 @@
 <!--[if IE 8]>    <html lang="{{document_language}}" class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--><html lang="{{document_language}}" class="no-js"> <!--<![endif]-->
 <head>
-{% include template ~ "/layout/head.tpl" %}
+{% include template ~ "/layout/head.html.twig" %}
 </head>
 <body dir="{{text_direction}}" class="{{section_name}}">
     <div class="page-blank">

main/template/default/layout/footer.html.twig

@@ -76,7 +76,7 @@
     </div>
 </div>
 
-{% include template ~ '/layout/footer.js.tpl' %}
+{% include template ~ '/layout/footer.js.html.twig' %}
 
 {{ execution_stats }}
 {% endautoescape %}

main/template/default/layout/head.html.twig

@@ -55,7 +55,7 @@ $(document).ready(function () {
 
 </script>
 
-{% include template ~ '/layout/header.js.tpl' %}
+{% include template ~ '/layout/header.js.html.twig' %}
 
 {{ css_custom_file_to_string }}
 {{ css_style_print }}

main/template/default/layout/hot_courses.html.twig

@@ -35,7 +35,7 @@ $(document).ready( function() {
     </div>
     <div id="list-hot-courses" class="grid-courses">
         <div class="row">
-            {% include template ~ '/layout/hot_course_item.tpl' %}
+            {% include template ~ '/layout/hot_course_item.html.twig' %}
         </div>
     </div>
 </section>

main/template/default/layout/layout_1_col.html.twig

@@ -1,4 +1,4 @@
-{% extends template ~ "/layout/page.tpl" %}
+{% extends template ~ "/layout/page.html.twig" %}
 
 {% block body %}
     {% autoescape false %}
@@ -19,7 +19,7 @@
 
     <div class="row">
         <div class="col-xs-12 col-md-12">
-            {% include template ~ "/layout/page_body.tpl" %}
+            {% include template ~ "/layout/page_body.html.twig" %}
             {% block content %}
                 {% if content is not null %}
                     <section id="main_content">

main/template/default/layout/layout_1_col.tpl

@@ -1,47 +0,0 @@
-{% extends template ~ "/layout/page.tpl" %}
-
-{% block body %}
-    {% if plugin_main_top %}
-        <div class="row">
-            <div id="plugin_main_top" class="col-md-12">
-                {{ plugin_main_top }}
-            </div>
-        </div>
-    {% endif %}
-    {% if plugin_content_top %}
-        <div class="row">
-            <div id="plugin_content_top" class="col-md-12">
-                {{ plugin_content_top }}
-            </div>
-        </div>
-    {% endif %}
-
-    <div class="row">
-        <div class="col-xs-12 col-md-12">
-            {% include template ~ "/layout/page_body.tpl" %}
-            {% block content %}
-                {% if content is not null %}
-                    <section id="main_content">
-                        {{ content }}
-                    </section>
-                {% endif %}
-            {% endblock %}
-        </div>
-    </div>
-
-    {% if plugin_content_bottom %}
-        <div class="row">
-            <div id="plugin_content_bottom" class="col-md-12">
-                {{ plugin_content_bottom }}
-            </div>
-        </div>
-    {% endif %}
-
-    {% if plugin_main_bottom %}
-        <div class="row">
-            <div id="plugin_main_bottom" class="col-md-12">
-                {{ plugin_main_bottom }}
-            </div>
-        </div>
-    {% endif %}
-{% endblock %}

main/template/default/layout/layout_2_col.html.twig

@@ -1,4 +1,4 @@
-{% extends template ~ "/layout/page.tpl" %}
+{% extends template ~ "/layout/page.html.twig" %}
 
 {% block body %}
     {% autoescape false %}
@@ -27,7 +27,7 @@
                 {% endif %}
 
                 {% block page_body %}
-                    {% include template ~ "/layout/page_body.tpl" %}
+                    {% include template ~ "/layout/page_body.html.twig" %}
                 {% endblock %}
 
                 {% if welcome_to_course_block %}
@@ -56,7 +56,7 @@
                     </article>
                 {% endif %}
 
-                {% include template ~ "/layout/hot_courses.tpl" %}
+                {% include template ~ "/layout/hot_courses.html.twig" %}
 
                 {% if plugin_content_bottom %}
                     <div id="plugin_content_bottom">
@@ -73,7 +73,7 @@
                     </div>
                 {% endif %}
 
-                {% include template ~ "/layout/login_form.tpl" %}
+                {% include template ~ "/layout/login_form.html.twig" %}
 
                 {% if _u.logged  == 1 %}
                     {{ user_image_block }}

main/template/default/layout/layout_2_col.tpl

@@ -1,263 +0,0 @@
-{% extends template ~ "/layout/page.tpl" %}
-
-{% block body %}
-    {% if plugin_main_top %}
-        <div class="row">
-            <div class="page-main-top" class="col-md-12">
-                {{ plugin_main_top }}
-            </div>
-        </div>
-    {% endif %}
-    <div class="row">
-        <div class="col-md-9 col-md-push-3">
-            <div class="page-content">
-                {% if plugin_content_top %}
-                    <div class="page-content-top">
-                        {{ plugin_content_top }}
-                    </div>
-                {% endif %}
-
-                {{ sniff_notification }}
-
-                {% if home_page_block %}
-                    <article id="homepage-home">
-                        {{ home_page_block }}
-                    </article>
-                {% endif %}
-
-                {% block page_body %}
-                    {% include template ~ "/layout/page_body.tpl" %}
-                {% endblock %}
-
-                {% if welcome_to_course_block %}
-                    <article id="homepage-course">
-                        {{ welcome_to_course_block }}
-                    </article>
-                {% endif %}
-
-                {% block content %}
-                    {% if content is not null %}
-                        <section id="page" class="{{ course_history_page }}">
-                            {{ content }}
-                        </section>
-                    {% endif %}
-                {% endblock %}
-
-                {% if announcements_block %}
-                    <article id="homepage-announcements">
-                        {{ announcements_block }}
-                    </article>
-                {% endif %}
-
-                {% if course_category_block %}
-                    <article id="homepage-course-category">
-                        {{ course_category_block }}
-                    </article>
-                {% endif %}
-
-                {% include template ~ "/layout/hot_courses.tpl" %}
-
-                {% if plugin_content_bottom %}
-                    <div id="plugin_content_bottom">
-                        {{ plugin_content_bottom }}
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-        <div class="col-md-3 col-md-pull-9">
-            <div class="sidebar">
-                {% if plugin_menu_top %}
-                    <div class="siderbar-menu-top">
-                        {{ plugin_menu_top }}
-                    </div>
-                {% endif %}
-
-                {% include template ~ "/layout/login_form.tpl" %}
-
-                {% if _u.logged  == 1 %}
-                    {{ user_image_block }}
-                {% endif %}
-
-                {% if profile_block %}
-                <!-- block profile -->
-                <div class="panel-group" id="profile" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default" id="profile_block">
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#profile" href="#profileCollapse" aria-expanded="true" aria-controls="profileCollapse">
-                                    {{ 'Profile' | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div style="" aria-expanded="true" id="profileCollapse" class="panel-collapse collapse in" role="tabpanel">
-                            <div class="panel-body">
-                                <ul class="list-group">
-                                    {% for item in profile_block %}
-                                    <li class="list-group-item {{ item.class }}">
-                                        <span class="item-icon">
-                                            {{ item.icon }}
-                                        </span>
-                                        <a href="{{ item.link }}">{{ item.title }}</a>
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- end block profile -->
-                {% endif %}
-
-                {% if course_block %}
-                <!-- block course -->
-                <div class="panel-group" id="course" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default" id="course_block">
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#course" href="#courseCollapse" aria-expanded="true" aria-controls="courseCollapse">
-                                    {{ 'Courses' | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div style="" aria-expanded="true" id="courseCollapse" class="panel-collapse collapse in" role="tabpanel">
-                            <div class="panel-body">
-                                <ul class="list-group">
-                                    {% for item in course_block %}
-                                    <li class="list-group-item {{ item.class }}">
-                                        <span class="item-icon">
-                                            {{ item.icon }}
-                                        </span>
-                                        <a href="{{ item.link }}">{{ item.title }}</a>
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- end block course -->
-                {% endif %}
-
-                {% if grade_book_sidebar %}
-                    <div class="panel-group" id="skill" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default" id="gradebook_block">
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#skill" href="#skillCollapse" aria-expanded="true" aria-controls="skillCollapse">
-                                    {{ 'Gradebook' | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div style="" aria-expanded="true" id="skillCollapse" class="panel-collapse collapse in" role="tabpanel">
-                            <div class="panel-body">
-                                <ul class="list-group">
-                                    <li class="list-group-item {{ item.class }}">
-                                        {{ 'Progress' | get_lang  }} : {{ grade_book_progress }} %
-                                        <br />
-                                        {% for badge in grade_book_badge_list %}
-                                            <div class="badge_sidebar">
-                                            {% for skill in badge.skills %}
-                                                {% if badge.finished %}
-                                                    <img class="badge_sidebar_image " src ="{{ skill.icon_big }}" />
-                                                {% else %}
-                                                    <img class="badge_sidebar_image badge_sidebar_image_transparency" src = "{{ skill.icon_big }}" />
-                                                {% endif %}
-                                                <div class="badge_sidebar_title">
-                                                {{ skill.name }}
-                                                </div>
-                                            {% endfor %}
-                                            </div>
-                                            {#<div class="badge_sidebar_title">#}
-                                            {#{{ badge.name }}#}
-                                            {#</div>#}
-                                        {% endfor %}
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {% endif %}
-
-                {% if skills_block %}
-                <!-- block skills -->
-                <div class="panel-group" id="skill" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default" id="skill_block">
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#skill" href="#skillCollapse" aria-expanded="true" aria-controls="skillCollapse">
-                                    {{ 'Skills' | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div style="" aria-expanded="true" id="skillCollapse" class="panel-collapse collapse in" role="tabpanel">
-                            <div class="panel-body">
-                                <ul class="list-group">
-                                    {% for item in skills_block %}
-                                    <li class="list-group-item {{ item.class }}">
-                                        <span class="item-icon">
-                                            {{ item.icon }}
-                                        </span>
-                                        <a href="{{ item.link }}">{{ item.title }}</a>
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- end block skills -->
-                {% endif %}
-
-                {{ teacher_block }}
-                {{ certificates_search_block }}
-                {{ notice_block }}
-                {{ help_block }}
-
-                <!-- block navigation -->
-                {% if navigation_course_links %}
-                <div class="panel-group" id="menu" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default" id="menu_block">
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#menu" href="#menuCollapse" aria-expanded="true" aria-controls="menuCollapse">
-                                    {{ 'MainNavigation' | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div style="" aria-expanded="true" id="menuCollapse" class="panel-collapse collapse in" role="tabpanel">
-                            <div class="panel-body">
-                                <ul class="nav nav-pills nav-stacked">
-                                    {% for item in navigation_course_links %}
-                                    <li>
-                                        <a href="{{ item.link }}">{{ item.title }}</a>
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-                <!-- end block navigation -->
-
-                {{ search_block }}
-                {{ classes_block }}
-
-                {% if plugin_menu_bottom %}
-                    <div class="sidebar-menu-bottom">
-                        {{ plugin_menu_bottom }}
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    {% if plugin_main_bottom %}
-        <div class="row">
-            <div class="page-main-bottom" class="col-md-12">
-                {{ plugin_main_bottom }}
-            </div>
-        </div>
-    {% endif %}
-{% endblock %}

main/template/default/layout/layout_3_col.html.twig

@@ -1,4 +1,4 @@
-{% extends template ~ "/layout/page.tpl" %}
+{% extends template ~ "/layout/page.html.twig" %}
 {% block body %}
 <div id="maincontent" class="maincontent">
     {{ plugin_courses_block }}

main/template/default/layout/no_layout.html.twig

@@ -4,7 +4,7 @@
 <!--[if IE 8]>    <html lang="{{document_language}}" class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--><html lang="{{document_language}}" class="no-js"> <!--<![endif]-->
 <head>
-{% include template ~ "/layout/head.tpl" %}
+{% include template ~ "/layout/head.html.twig" %}
 </head>
 <body dir="{{text_direction}}" class="{{section_name}}">
 <section id="content-scorm">

main/template/default/layout/page.html.twig

@@ -7,7 +7,7 @@
 <html lang="{{ document_language }}" class="no-js"> <!--<![endif]-->
 <head>
 {% block head %}
-{% include template ~ "/layout/head.tpl" %}
+{% include template ~ "/layout/head.html.twig" %}
 {% endblock %}
 </head>
 <body dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}">
@@ -35,7 +35,7 @@
     {% endif %}
 
     {% if show_header == true %}
-    {% include template ~ "/layout/page_header.tpl" %}
+    {% include template ~ "/layout/page_header.html.twig" %}
     {% endif %}
     {% if show_course_shortcut is not null %}
         <div class="nav-tools">
@@ -57,10 +57,10 @@
 	</section>
 
     {% if show_footer == true %}
-	    {% include template ~ "/layout/page_footer.tpl" %}
+	    {% include template ~ "/layout/page_footer.html.twig" %}
     {% endif %}
 
-    {% include template ~ '/layout/footer.js.tpl' %}
+    {% include template ~ '/layout/footer.js.html.twig' %}
     </div>
   </body>
 </html>

main/template/default/layout/page_header.html.twig

@@ -4,7 +4,7 @@
     {{ bug_notification }}
 </div>
 {% block topbar %}
-    {% include template ~ "/layout/topbar.tpl" %}
+    {% include template ~ "/layout/topbar.html.twig" %}
 {% endblock %}
 <div class="extra-header">{{ header_extra_content }}</div>
 <header id="header-section" class="header-movil">
@@ -54,7 +54,7 @@
     </div>
 </header>
 {% block menu %}
-    {% include template ~ "/layout/menu.tpl" %}
+    {% include template ~ "/layout/menu.html.twig" %}
 {% endblock %}
-{% include template ~ "/layout/course_navigation.tpl" %}
+{% include template ~ "/layout/course_navigation.html.twig" %}
 {% endautoescape %}

main/template/default/layout/show_footer.html.twig

@@ -0,0 +1,9 @@
+    {% if show_footer == true %}
+            </div>
+        </section>
+        {% include template ~ "/layout/page_footer.html.twig" %}
+    {% endif %}
+    </div>
+    {% include template ~ '/layout/footer.js.html.twig' %}
+</body>
+</html>

main/template/default/layout/show_footer.tpl

@@ -1,9 +0,0 @@
-    {% if show_footer == true %}
-            </div>
-        </section>
-        {% include template ~ "/layout/page_footer.tpl" %}
-    {% endif %}
-    </div>
-    {% include template ~ '/layout/footer.js.tpl' %}
-</body>
-</html>

main/template/default/layout/show_header.html.twig

@@ -9,7 +9,7 @@
 <html lang="{{ document_language }}" class="no-js"> <!--<![endif]-->
 <head>
     {% block head %}
-        {% include template ~ "/layout/head.tpl" %}
+        {% include template ~ "/layout/head.html.twig" %}
     {% endblock %}
 </head>
 <body dir="{{ text_direction }}" class="{{ section_name }} {{ login_class }}">
@@ -36,7 +36,7 @@
                 </form>
             </div>
         {% endif %}
-        {% include template ~ "/layout/page_header.tpl" %}
+        {% include template ~ "/layout/page_header.html.twig" %}
         {% if show_course_shortcut is not null %}
             <div class="nav-tools">
                 {{ show_course_shortcut }}

main/template/default/learnpath/view.html.twig

@@ -66,7 +66,7 @@
             </div>
         {# TOC layout #}
         <div id="toc_id" class="scorm-body" name="toc_name">
-                {% include template ~ '/learnpath/scorm_list.tpl' %}
+                {% include template ~ '/learnpath/scorm_list.html.twig' %}
             </div>
         {# end TOC layout #}
         </div>

main/template/default/link/edit_category.html.twig

@@ -1,16 +1,16 @@
-
-{{javascript}}
-
-<div class="btn-toolbar actions-bar" >
-    <div class="btn-group">
-        <a href="{{root}}&amp;action=listing" class="btn">
-            <em class="size-32 icon-back"></em>
-        </a>
-    </div>
-</div>
-
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-
+
+{{javascript}}
+
+<div class="btn-toolbar actions-bar" >
+    <div class="btn-group">
+        <a href="{{root}}&amp;action=listing" class="btn">
+            <em class="size-32 icon-back"></em>
+        </a>
+    </div>
+</div>
+
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+
 {{form.return_form()}}

main/template/default/link/edit_link.html.twig

@@ -1,16 +1,16 @@
-
-{{javascript}}
-
-<div class="btn-toolbar actions-bar" >
-    <div class="btn-group">
-        <a href="{{root}}&amp;action=listing" class="btn">
-            <em class="size-32 icon-back"></em>
-        </a>
-    </div>
-</div>
-
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-
+
+{{javascript}}
+
+<div class="btn-toolbar actions-bar" >
+    <div class="btn-group">
+        <a href="{{root}}&amp;action=listing" class="btn">
+            <em class="size-32 icon-back"></em>
+        </a>
+    </div>
+</div>
+
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+
 {{form.return_form()}}

main/template/default/link/index.html.twig

@@ -1,343 +1,343 @@
-
-{{javascript}}
-
-<script type="text/javascript">
-
-    {% if is_allowed_to_edit %}
-        var sec_token = '{{sec_token}}';
-    {% endif %}
-
-$(function() {
-	$('.collapsible .head').click(function(e) {
-        $(this).toggleClass('collapsed');
-        $(this).next().toggle();
-		return true;
-	});
-
-    {% if is_allowed_to_edit %}
-        $(".categories.sortable" ).sortable({
-            axis: 'y',
-            handle: '.handle',
-            //placeholder: 'ui-state-highlight',
-            update: function(event, ui) {
-                var c_id = 0;
-                var ids = [];
-                var items;
-                items = $(this).children('li');
-                items.each(function(index, li){
-                    li = $(li);
-                    var id;
-                    id = li.attr('data-id');
-                    c_id = li.attr('data-c_id');
-                    ids.push(id);
-                });
-
-                LinkCategory.sort(c_id, ids, message.update);
-            }
-        });
-        $(".categories.sortable" ).disableSelection();
-
-        $(".links.sortable" ).sortable({
-            axis: 'y',
-            placeholder: 'ui-state-highlight',
-            update: function(event, ui) {
-                var c_id = 0;
-                var ids = [];
-                var items;
-                items = $(this).children('li');
-                items.each(function(index, li){
-                    li = $(li);
-                    var id;
-                    id = li.attr('data-id');
-                    c_id = li.attr('data-c_id');
-                    ids.push(id);
-                });
-
-                Link.sort(c_id, ids, message.update);
-            }
-        });
-        $(".links.sortable" ).disableSelection();
-
-    {% endif %}
-
-});
-
- function expand_all(){
-    $('.collapsible .head').removeClass('collapsed').next().show();
- }
-
- function collapse_all(){
-    $('.collapsible .head').addClass('collapsed').next().hide();
- }
-
- function delete_category(name){
-    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
-        return false;
-    }
-
-    var item = $('#'+name);
-    var id = item.attr('data-id');
-    var c_id = item.attr('data-c_id');
-
-    var f = function(data){
-        if(data.success){
-            item.remove();
-        }
-        message.update(data);
-    };
-    LinkCategory.del(c_id, id, f);
- }
-
- function delete_all(){
-    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
-        return false;
-    }
-
-    var f = function(data){
-        if(data.success){
-            var item = $('.data');
-            item.remove();
-        }
-        message.update(data);
-    };
-    Link.delete_by_course({{c_id}}, {{session_id}}, f);
-
- }
-
- function delete_link(name, btn){
-    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
-        return false;
-    }
-
-    var item = $('#'+name);
-    var id = item.attr('data-id');
-    var c_id = item.attr('data-c_id');
-
-    var f = function(data){
-        if(data.success){
-            item.remove();
-        }else{
-            $(btn).removeClass("loading");
-        }
-        message.update(data);
-    };
-    $(btn).addClass("loading");
-    Link.del(c_id, id, f);
- }
-
-function switch_li_visibility(name, btn)
-{
-    var li = $('#'+name);
-    var id = li.attr('data-id');
-    var c_id = li.attr('data-c_id');
-
-    var is_visible = !li.hasClass('text-muted')
-
-    var f = function(data){
-        if(data.success){
-            var btn =  $('.btn.visibility', li);
-            if(is_visible){
-                btn.addClass('show');
-                btn.removeClass('hide');
-                li.addClass('text-muted');
-                li.removeClass('visible');
-            }else{
-                btn.removeClass('show');
-                btn.addClass('hide');
-                li.removeClass('text-muted');
-                li.addClass('visible');
-            }
-        }
-        message.update(data);
-        $(btn).removeClass("loading");
-    };
-    if(is_visible){
-        Link.hide(c_id, id, f);
-    }else{
-        Link.show(c_id, id, f);
-    }
-    $(btn).addClass("loading");
-}
-
-function validate_link(name, btn){
-    var li = $('#'+name);
-    var id = li.attr('data-id');
-    var c_id = li.attr('data-c_id');
-
-    var f = function(data){
-        if(data.success){
-            li.addClass('valid');
-            li.removeClass('invalid');
-        }else{
-            li.addClass('invalid');
-            li.removeClass('valid');
-        }
-        message.update(data);
-        $(btn).removeClass("loading");
-    };
-    $(btn).addClass("loading");
-    Link.validate(c_id, id, f);
-}
-
-</script>
-
-<div id="messages">
-{% for message in messages %}
-    {{ message }}
-{% endfor %}
-</div>
-
-<div class="btn-toolbar actions-bar" >
-    {% if is_allowed_to_edit %}
-        <div class="btn-group edit">
-            <a href="{{root}}&amp;action=add_category" class="btn new_folder" title="{{'AddCategory'|get_lang}}">
-                <em class="size-32 icon-new-folder"></em>
-            </a>
-            <a href="{{root}}&amp;action=add_link" class="btn new_link" title="{{'AddLink'|get_lang}}">
-                <em class="size-32 icon-new-link"></em>
-            </a>
-            <a href="javascript:void(0)" onclick="delete_all();return false;" class="btn btn-default" title="{{'DeleteAll'|get_lang}}">
-                <em class="size-32 icon-delete-all"></em>
-            </a>
-            <a href="{{root}}&amp;action=import_csv" class="btn import_csv" title="{{'ImportCSV'|get_lang}}">
-                <em class="size-32 icon-import-csv"></em>
-            </a>
-            <a href="{{root}}&amp;action=export_csv" class="btn" title="{{'ExportAsCSV'|get_lang}}">
-                <em class="size-32 icon-export-csv"></em>
-            </a>
-        </div>
-    {% endif %}
-    <div class="btn-group">
-        <a href="javascript:void(0)" onclick="expand_all();return false;" class="btn btn-default" title="{{'ShowAll'|get_lang}}">
-            <em class="size-32 icon-expand"></em>
-        </a>
-        <a href="javascript:void(0)" onclick="collapse_all();return false;" class="btn btn-default" title="{{'ShowNone'|get_lang}}">
-            <em class="size-32 icon-collapse"></em>
-        </a>
-    </div>
-</div>
-
-<div class="data">
-    <ul style="list-style: none; margin-left:0;" class="links sortable">
-        {% for link in links %}
-            {% set link_class %}
-                {% if loop.first %}first{% endif %}
-                {% if loop.last %}last{% endif %}
-                {% if loop.index is odd %}odd{% else %}even{% endif %}
-                {% if link.is_visible() %}visible{% else %}invisible{% endif %}
-            {% endset %}
-
-            <li id="link_{{link.id}}" class="link {{link_class}}" data-id="{{link.id}}" data-c_id="{{link.c_id}}" data-type="link" >
-                <a class="icon" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
-                    {{ 'link.png' |icon(22)}}
-                </a>
-                <a class="title" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
-                    {%if link.title %}{{link.title}}{% else %}{{link.url}}{%endif%}
-                </a>
-                {% if link.session_id %}
-                    {{session_image}}
-                {% endif %}
-                <div class="status" style="display:inline-block;">&nbsp;</div>
-                {% if is_allowed_to_edit %}
-                    <div style="float:right;">
-                        <a href="javascript:void(0)" onclick="validate_link('link_{{link.id}}', this);return false;"
-                        title="{{'CheckURL'|get_lang}}"
-                        class="btn validate_link">
-
-                        </a>
-                        <a href="{{root}}&amp;action=edit_link&amp;id={{link.id}}&amp;c_id={{link.c_id}}"
-                        title="{{'Edit'|get_lang}}"
-                        class="">
-                            <em class="size-22 icon-edit"></em>
-                        </a>
-                        <a href="javascript:void(0)" onclick="switch_li_visibility('link_{{link.id}}', this);return false;"
-                        class="btn visibility {%if link.visibility == 1%}hide{%else%}show{%endif%}">
-
-                        </a>
-                        <a href="javascript:void(0)" onclick="delete_link('link_{{link.id}}', this);return false;" title="{{'Delete'|get_lang}}" class="">
-                            <em class="size-22 icon-delete"></em>
-                        </a>
-                    </div>
-                {% endif %}
-                <div class="description">{{link.description}}</div>
-            </li>
-        {% endfor%}
-    </ul>
-
-    <ul id="link_categories" class="categories sortable" style="list-style: none; margin-left:0;">
-    {% for category in categories %}
-        <li id="category_{{category.id}}" class="link_category collapsible" data-id="{{category.id}}" data-c_id="{{category.c_id}}" data-type="category" >
-            <div class="head handle collapsed">
-                {% if is_allowed_to_edit %}
-                    <div style="float:right;">
-                        <a href="{{root}}&amp;action=edit_category&amp;id={{category.id}}&amp;c_id={{category.c_id}}"
-                        onclick="event.stopPropagation();"
-                        title="{{'Edit'|get_lang}}"
-                        class="">
-                            <em class="size-22 icon-edit"></em>
-                        </a>
-                        <a href="javascript:void(0)"
-                        onclick="delete_category('category_{{category.id}}');event.stopPropagation();return false;"
-                            title="{{'Delete'|get_lang}}"
-                            class="">
-                            <em class="size-22 icon-delete"></em>
-                        </a>
-                    </div>
-                {% endif %}
-                <h3>
-                    <a href="{{root}}&amp;action=view&amp;id={{category.id}}&amp;c_id={{category.c_id}}">{{category.category_title|escape}}</a>
-                </h3>
-                {{category.description}}
-            </div>
-            <div class="body" style="display:none;">
-                <ul style="list-style: none; margin-left:0;" class="links sortable">
-                    {% for link in category.links %}
-                    {% set link_class %}
-                        {% if loop.first %}first{% endif %}
-                        {% if loop.last %}last{% endif %}
-                        {% if loop.index is odd %}odd{% else %}even{% endif %}
-                        {% if link.is_visible() %}visible{% else %}invisible{% endif %}
-                    {% endset %}
-
-                        <li id="link_{{link.id}}" class="link {{link_class}}" data-id="{{link.id}}" data-c_id="{{link.c_id}}" data-type="link" >
-                            <a class="icon" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
-                                {{ 'link.png' |icon(22) }}
-                            </a>
-                            <a class ="title" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
-                                {%if link.title %}{{link.title}}{% else %}{{link.url}}{%endif%}
-                            </a>
-                            {% if link.session_id %}
-                                {{session_image}}
-                            {% endif %}
-                            <div class="status" style="display:inline-block;">&nbsp;</div>
-                            {% if is_allowed_to_edit %}
-                                <div style="float:right;">
-                                    <a href="javascript:void(0)" onclick="validate_link('link_{{link.id}}', this);return false;"
-                                    title="{{'CheckURL'|get_lang}}"
-                                    class="btn validate_link"></a>
-                                    <a href="{{root}}&amp;action=edit_link&amp;id={{link.id}}&amp;c_id={{link.c_id}}"
-                                    onclick=""
-                                    title="{{'Edit'|get_lang}}"
-                                    class="">
-                                        <em class="size-22 icon-edit"></em>
-                                    </a>
-                                    <a href="javascript:void(0)"
-                                    onclick="switch_li_visibility('link_{{link.id}}', this);return false;"
-                                    class="btn visibility {%if link.visibility == 1%}hide{%else%}show{%endif%}"></a>
-                                    <a href="javascript:void(0)"
-                                    onclick="delete_link('link_{{link.id}}', this);return false;"
-                                    title="{{'Delete'|get_lang}}"
-                                    class="">
-                                        <em class="size-22 icon-delete"></em>
-                                    </a>
-                                </div>
-                            {% endif %}
-                        </li>
-                    {% endfor%}
-                </ul>
-            </div>
-            <div class="details "></div>
-        </li>
-    {% endfor%}
-    </ul>
+
+{{javascript}}
+
+<script type="text/javascript">
+
+    {% if is_allowed_to_edit %}
+        var sec_token = '{{sec_token}}';
+    {% endif %}
+
+$(function() {
+	$('.collapsible .head').click(function(e) {
+        $(this).toggleClass('collapsed');
+        $(this).next().toggle();
+		return true;
+	});
+
+    {% if is_allowed_to_edit %}
+        $(".categories.sortable" ).sortable({
+            axis: 'y',
+            handle: '.handle',
+            //placeholder: 'ui-state-highlight',
+            update: function(event, ui) {
+                var c_id = 0;
+                var ids = [];
+                var items;
+                items = $(this).children('li');
+                items.each(function(index, li){
+                    li = $(li);
+                    var id;
+                    id = li.attr('data-id');
+                    c_id = li.attr('data-c_id');
+                    ids.push(id);
+                });
+
+                LinkCategory.sort(c_id, ids, message.update);
+            }
+        });
+        $(".categories.sortable" ).disableSelection();
+
+        $(".links.sortable" ).sortable({
+            axis: 'y',
+            placeholder: 'ui-state-highlight',
+            update: function(event, ui) {
+                var c_id = 0;
+                var ids = [];
+                var items;
+                items = $(this).children('li');
+                items.each(function(index, li){
+                    li = $(li);
+                    var id;
+                    id = li.attr('data-id');
+                    c_id = li.attr('data-c_id');
+                    ids.push(id);
+                });
+
+                Link.sort(c_id, ids, message.update);
+            }
+        });
+        $(".links.sortable" ).disableSelection();
+
+    {% endif %}
+
+});
+
+ function expand_all(){
+    $('.collapsible .head').removeClass('collapsed').next().show();
+ }
+
+ function collapse_all(){
+    $('.collapsible .head').addClass('collapsed').next().hide();
+ }
+
+ function delete_category(name){
+    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
+        return false;
+    }
+
+    var item = $('#'+name);
+    var id = item.attr('data-id');
+    var c_id = item.attr('data-c_id');
+
+    var f = function(data){
+        if(data.success){
+            item.remove();
+        }
+        message.update(data);
+    };
+    LinkCategory.del(c_id, id, f);
+ }
+
+ function delete_all(){
+    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
+        return false;
+    }
+
+    var f = function(data){
+        if(data.success){
+            var item = $('.data');
+            item.remove();
+        }
+        message.update(data);
+    };
+    Link.delete_by_course({{c_id}}, {{session_id}}, f);
+
+ }
+
+ function delete_link(name, btn){
+    if(!confirm("{{'ConfirmYourChoice'|get_lang}}")){
+        return false;
+    }
+
+    var item = $('#'+name);
+    var id = item.attr('data-id');
+    var c_id = item.attr('data-c_id');
+
+    var f = function(data){
+        if(data.success){
+            item.remove();
+        }else{
+            $(btn).removeClass("loading");
+        }
+        message.update(data);
+    };
+    $(btn).addClass("loading");
+    Link.del(c_id, id, f);
+ }
+
+function switch_li_visibility(name, btn)
+{
+    var li = $('#'+name);
+    var id = li.attr('data-id');
+    var c_id = li.attr('data-c_id');
+
+    var is_visible = !li.hasClass('text-muted')
+
+    var f = function(data){
+        if(data.success){
+            var btn =  $('.btn.visibility', li);
+            if(is_visible){
+                btn.addClass('show');
+                btn.removeClass('hide');
+                li.addClass('text-muted');
+                li.removeClass('visible');
+            }else{
+                btn.removeClass('show');
+                btn.addClass('hide');
+                li.removeClass('text-muted');
+                li.addClass('visible');
+            }
+        }
+        message.update(data);
+        $(btn).removeClass("loading");
+    };
+    if(is_visible){
+        Link.hide(c_id, id, f);
+    }else{
+        Link.show(c_id, id, f);
+    }
+    $(btn).addClass("loading");
+}
+
+function validate_link(name, btn){
+    var li = $('#'+name);
+    var id = li.attr('data-id');
+    var c_id = li.attr('data-c_id');
+
+    var f = function(data){
+        if(data.success){
+            li.addClass('valid');
+            li.removeClass('invalid');
+        }else{
+            li.addClass('invalid');
+            li.removeClass('valid');
+        }
+        message.update(data);
+        $(btn).removeClass("loading");
+    };
+    $(btn).addClass("loading");
+    Link.validate(c_id, id, f);
+}
+
+</script>
+
+<div id="messages">
+{% for message in messages %}
+    {{ message }}
+{% endfor %}
+</div>
+
+<div class="btn-toolbar actions-bar" >
+    {% if is_allowed_to_edit %}
+        <div class="btn-group edit">
+            <a href="{{root}}&amp;action=add_category" class="btn new_folder" title="{{'AddCategory'|get_lang}}">
+                <em class="size-32 icon-new-folder"></em>
+            </a>
+            <a href="{{root}}&amp;action=add_link" class="btn new_link" title="{{'AddLink'|get_lang}}">
+                <em class="size-32 icon-new-link"></em>
+            </a>
+            <a href="javascript:void(0)" onclick="delete_all();return false;" class="btn btn-default" title="{{'DeleteAll'|get_lang}}">
+                <em class="size-32 icon-delete-all"></em>
+            </a>
+            <a href="{{root}}&amp;action=import_csv" class="btn import_csv" title="{{'ImportCSV'|get_lang}}">
+                <em class="size-32 icon-import-csv"></em>
+            </a>
+            <a href="{{root}}&amp;action=export_csv" class="btn" title="{{'ExportAsCSV'|get_lang}}">
+                <em class="size-32 icon-export-csv"></em>
+            </a>
+        </div>
+    {% endif %}
+    <div class="btn-group">
+        <a href="javascript:void(0)" onclick="expand_all();return false;" class="btn btn-default" title="{{'ShowAll'|get_lang}}">
+            <em class="size-32 icon-expand"></em>
+        </a>
+        <a href="javascript:void(0)" onclick="collapse_all();return false;" class="btn btn-default" title="{{'ShowNone'|get_lang}}">
+            <em class="size-32 icon-collapse"></em>
+        </a>
+    </div>
+</div>
+
+<div class="data">
+    <ul style="list-style: none; margin-left:0;" class="links sortable">
+        {% for link in links %}
+            {% set link_class %}
+                {% if loop.first %}first{% endif %}
+                {% if loop.last %}last{% endif %}
+                {% if loop.index is odd %}odd{% else %}even{% endif %}
+                {% if link.is_visible() %}visible{% else %}invisible{% endif %}
+            {% endset %}
+
+            <li id="link_{{link.id}}" class="link {{link_class}}" data-id="{{link.id}}" data-c_id="{{link.c_id}}" data-type="link" >
+                <a class="icon" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
+                    {{ 'link.png' |icon(22)}}
+                </a>
+                <a class="title" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
+                    {%if link.title %}{{link.title}}{% else %}{{link.url}}{%endif%}
+                </a>
+                {% if link.session_id %}
+                    {{session_image}}
+                {% endif %}
+                <div class="status" style="display:inline-block;">&nbsp;</div>
+                {% if is_allowed_to_edit %}
+                    <div style="float:right;">
+                        <a href="javascript:void(0)" onclick="validate_link('link_{{link.id}}', this);return false;"
+                        title="{{'CheckURL'|get_lang}}"
+                        class="btn validate_link">
+
+                        </a>
+                        <a href="{{root}}&amp;action=edit_link&amp;id={{link.id}}&amp;c_id={{link.c_id}}"
+                        title="{{'Edit'|get_lang}}"
+                        class="">
+                            <em class="size-22 icon-edit"></em>
+                        </a>
+                        <a href="javascript:void(0)" onclick="switch_li_visibility('link_{{link.id}}', this);return false;"
+                        class="btn visibility {%if link.visibility == 1%}hide{%else%}show{%endif%}">
+
+                        </a>
+                        <a href="javascript:void(0)" onclick="delete_link('link_{{link.id}}', this);return false;" title="{{'Delete'|get_lang}}" class="">
+                            <em class="size-22 icon-delete"></em>
+                        </a>
+                    </div>
+                {% endif %}
+                <div class="description">{{link.description}}</div>
+            </li>
+        {% endfor%}
+    </ul>
+
+    <ul id="link_categories" class="categories sortable" style="list-style: none; margin-left:0;">
+    {% for category in categories %}
+        <li id="category_{{category.id}}" class="link_category collapsible" data-id="{{category.id}}" data-c_id="{{category.c_id}}" data-type="category" >
+            <div class="head handle collapsed">
+                {% if is_allowed_to_edit %}
+                    <div style="float:right;">
+                        <a href="{{root}}&amp;action=edit_category&amp;id={{category.id}}&amp;c_id={{category.c_id}}"
+                        onclick="event.stopPropagation();"
+                        title="{{'Edit'|get_lang}}"
+                        class="">
+                            <em class="size-22 icon-edit"></em>
+                        </a>
+                        <a href="javascript:void(0)"
+                        onclick="delete_category('category_{{category.id}}');event.stopPropagation();return false;"
+                            title="{{'Delete'|get_lang}}"
+                            class="">
+                            <em class="size-22 icon-delete"></em>
+                        </a>
+                    </div>
+                {% endif %}
+                <h3>
+                    <a href="{{root}}&amp;action=view&amp;id={{category.id}}&amp;c_id={{category.c_id}}">{{category.category_title|escape}}</a>
+                </h3>
+                {{category.description}}
+            </div>
+            <div class="body" style="display:none;">
+                <ul style="list-style: none; margin-left:0;" class="links sortable">
+                    {% for link in category.links %}
+                    {% set link_class %}
+                        {% if loop.first %}first{% endif %}
+                        {% if loop.last %}last{% endif %}
+                        {% if loop.index is odd %}odd{% else %}even{% endif %}
+                        {% if link.is_visible() %}visible{% else %}invisible{% endif %}
+                    {% endset %}
+
+                        <li id="link_{{link.id}}" class="link {{link_class}}" data-id="{{link.id}}" data-c_id="{{link.c_id}}" data-type="link" >
+                            <a class="icon" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
+                                {{ 'link.png' |icon(22) }}
+                            </a>
+                            <a class ="title" target="{{link.target}}" href="{{root}}&amp;action=go&amp;id={{link.id}}&amp;c_id={{link.c_id}}">
+                                {%if link.title %}{{link.title}}{% else %}{{link.url}}{%endif%}
+                            </a>
+                            {% if link.session_id %}
+                                {{session_image}}
+                            {% endif %}
+                            <div class="status" style="display:inline-block;">&nbsp;</div>
+                            {% if is_allowed_to_edit %}
+                                <div style="float:right;">
+                                    <a href="javascript:void(0)" onclick="validate_link('link_{{link.id}}', this);return false;"
+                                    title="{{'CheckURL'|get_lang}}"
+                                    class="btn validate_link"></a>
+                                    <a href="{{root}}&amp;action=edit_link&amp;id={{link.id}}&amp;c_id={{link.c_id}}"
+                                    onclick=""
+                                    title="{{'Edit'|get_lang}}"
+                                    class="">
+                                        <em class="size-22 icon-edit"></em>
+                                    </a>
+                                    <a href="javascript:void(0)"
+                                    onclick="switch_li_visibility('link_{{link.id}}', this);return false;"
+                                    class="btn visibility {%if link.visibility == 1%}hide{%else%}show{%endif%}"></a>
+                                    <a href="javascript:void(0)"
+                                    onclick="delete_link('link_{{link.id}}', this);return false;"
+                                    title="{{'Delete'|get_lang}}"
+                                    class="">
+                                        <em class="size-22 icon-delete"></em>
+                                    </a>
+                                </div>
+                            {% endif %}
+                        </li>
+                    {% endfor%}
+                </ul>
+            </div>
+            <div class="details "></div>
+        </li>
+    {% endfor%}
+    </ul>
 </div>