From 6c2cf3e60a9decdae39e51531ccca0f66509ab62 Mon Sep 17 00:00:00 2001
From: Daniel Berteaud <daniel@firewall-services.com>
Date: Thu, 23 Jul 2015 14:15:30 +0200
Subject: [PATCH] Big templates cleanup

---
 templates/default/about.html.ep              |  43 +-
 templates/default/admin.html.ep              |  10 +-
 templates/default/admin_audit.html.ep        |  53 +-
 templates/default/admin_manage_rooms.html.ep |  26 +-
 templates/default/auth_modal.html.ep         |  33 +-
 templates/default/configure_modal.html.ep    | 182 ++--
 templates/default/delete_room_modal.html.ep  |  25 +-
 templates/default/documentation.html.ep      | 867 ++++++++++++++-----
 templates/default/error.html.ep              |  55 +-
 templates/default/exception.html.ep          |   6 +-
 templates/default/feedback.html.ep           |  38 +-
 templates/default/feedback.mail.ep           |   3 +-
 templates/default/feedback_thanks.html.ep    |  16 +-
 templates/default/footer.html.ep             |   9 +-
 templates/default/goodbye.html.ep            |  16 +-
 templates/default/header.html.ep             |  28 +-
 templates/default/index.html.ep              | 182 ++--
 templates/default/invitation.html.ep         |  44 +-
 templates/default/invitation_thanks.html.ep  |  15 +-
 templates/default/invite.mail.ep             |  31 +-
 templates/default/invite_modal.html.ep       |  51 +-
 templates/default/join.html.ep               | 378 +++++---
 templates/default/js_common.html.ep          |  44 +-
 templates/default/kicked.html.ep             |  15 +-
 templates/default/noscript.html.ep           |   2 +-
 templates/default/not_found.html.ep          |   6 +-
 templates/default/notification.mail.ep       |  21 +-
 templates/default/public_toolbar.html.ep     |  59 +-
 28 files changed, 1550 insertions(+), 708 deletions(-)

diff --git a/templates/default/about.html.ep b/templates/default/about.html.ep
index f3bb2c5..0798fc7 100644
--- a/templates/default/about.html.ep
+++ b/templates/default/about.html.ep
@@ -1,58 +1,69 @@
-% title $self->l('ABOUT');
+% title l('ABOUT');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">
-        <%= l('ABOUT') %>
+        %= l('ABOUT')
       </h3>
     </div>
     <div class="panel-body">
       <p>
-        <%== l('ABOUT_VROOM') %>
+        %== l('ABOUT_VROOM')
       </p>
     </div>
   </div>
-  <% if ($config->{'interface.demo'}){ %>
+  % if ($config->{'interface.demo'}){
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">
-        <%= l('WHO_IS_BEHIND_VROOM') %>
+        %= l('WHO_IS_BEHIND_VROOM')
       </h3>
     </div>
     <div class="panel-body">
       <p>
-        <%== l('ABOUT_WHO_IS_BEHIND_VROOM') %>
+        %== l('ABOUT_WHO_IS_BEHIND_VROOM')
       </p>
     </div>
   </div>
-  <% } %>
+  % }
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">
-        <%= l('THANKS') %>
+        %= l('THANKS')
       </h3>
     </div>
     <div class="panel-body">
       <p>
-        <%== l('ABOUT_THANKS') %>
+        %== l('ABOUT_THANKS')
         <ul>
-          <% foreach my $component (sort keys %{$components}) { %>
+          % foreach my $component (sort keys %{$components}) {
             <li>
-              <a href="<%= $components->{$component}->{url} %>"><%= $component %></a>
+              <a href="<%= $components->{$component}->{url} %>">
+                %= $component
+              </a>
             </li>
-          <% } %>
+          % }
         </ul>
       </p>
       <p>
-        <%= l('ABOUT_MUSICS') %>
+        %= l('ABOUT_MUSICS')
         <ul>
-          <% foreach my $music (sort keys %{$musics}) { %>
+          % foreach my $music (sort keys %{$musics}) {
             <li>
-              <%= $music %> <%= l('FROM_AUTHOR') %> <a href="<%= $musics->{$music}->{author_url} %>"><%= $musics->{$music}->{author} %></a> (<a href="<%= $musics->{$music}->{licence_url} %>"><%= $musics->{$music}->{licence} %></a>)
+              %= $music
+              %= l('FROM_AUTHOR')
+              <a href="<%= $musics->{$music}->{author_url} %>">
+                %= $musics->{$music}->{author}
+              </a>
+              (
+              <a href="<%= $musics->{$music}->{licence_url} %>">
+                %= $musics->{$music}->{licence}
+              </a>
+              )
             </li>
-          <% } %>
+          % }
       </p>
     </div>
   </div>
diff --git a/templates/default/admin.html.ep b/templates/default/admin.html.ep
index d8ef1ad..6dabfce 100644
--- a/templates/default/admin.html.ep
+++ b/templates/default/admin.html.ep
@@ -3,11 +3,13 @@
 %= include 'public_toolbar'
 
 <div class="col-sm-offset-3 col-md-offset-4 col-sm-6 col-md-4">
-  <a class="btn btn-lg btn-primary btn-block" href="<%= $self->url_for('/admin/rooms') %>">
-    <%= l('ROOM_MANAGEMENT') %>
+  <a class="btn btn-lg btn-primary btn-block"
+     href="<%= url_for('/admin/rooms') %>">
+    %= l('ROOM_MANAGEMENT')
   </a>
-  <a class="btn btn-lg btn-primary btn-block" href="<%= $self->url_for('/admin/audit') %>">
-    <%= l('AUDIT') %>
+  <a class="btn btn-lg btn-primary btn-block"
+     href="<%= url_for('/admin/audit') %>">
+    %= l('AUDIT')
   </a>
 </div>
 
diff --git a/templates/default/admin_audit.html.ep b/templates/default/admin_audit.html.ep
index f16c178..d0407f7 100644
--- a/templates/default/admin_audit.html.ep
+++ b/templates/default/admin_audit.html.ep
@@ -5,10 +5,14 @@
 %= include 'noscript'
   <div class="panel panel-default">
     <div class="panel-heading">
-      <form class="form-inline" id="eventSearch" role="form">
+      <form class="form-inline"
+            id="eventSearch">
         <div class="form-group">
           <div class="input-group">
-            <input type="text" id="searchEvent" class="form-control" value=""/>
+            <input type="text"
+                   id="searchEvent"
+                   class="form-control"
+                   value="">
             <div class="input-group-addon">
               <span class="glyphicon glyphicon-search">
               </span>
@@ -16,53 +20,70 @@
           </div>
         </div>
         <div class="form-group">
-          <input type="text" id="dateStart" name="dateStart" class="form-control date-picker" value="<%= DateTime->now->ymd %>"/>
+          <input type="text"
+                 id="dateStart"
+                 name="dateStart"
+                 class="form-control date-picker"
+                 value="<%= DateTime->now->ymd %>">
         </div>
         <div class="form-group">
           <div class="input-group">
-            <input type="text" id="dateEnd" name="dateEnd" class="form-control date-picker" value="<%= DateTime->now->ymd %>"/>
+            <input type="text"
+                   id="dateEnd"
+                   name="dateEnd"
+                   class="form-control date-picker"
+                   value="<%= DateTime->now->ymd %>">
             <span class="input-group-btn">
-              <button id="events_refresh" class="btn btn-primary help" data-toggle="tooltip" data-placement="bottom" title="<%= l('REFRESH_EVENTS') %>">
+              <button id="events_refresh"
+                      class="btn btn-primary help"
+                      data-toggle="tooltip"
+                      data-placement="bottom"
+                      title="<%= l('REFRESH_EVENTS') %>">
                 <span class="glyphicon glyphicon-play">
                 </span>
               </button>
-              <% if ($self->get_opt_features->{excel}){ %>
-              <button id="events_export" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%= l('EXPORT_EVENTS') %>">
+              % if ($self->get_opt_features->{excel}){
+              <button id="events_export"
+                      class="btn btn-default help"
+                      data-toggle="tooltip"
+                      data-placement="bottom"
+                      title="<%= l('EXPORT_EVENTS') %>">
                 <span class="glyphicon glyphicon-save">
                 </span>
               </button>
-              <% } %>
+              % }
             </span>
           </div>
         </div>
         <div class="form-group pull-right hidden-xs">
-          %= image '/img/loading.gif', alt => $self->l('LOADING'), id => 'loadingIcon'
+          %= image url_for('/img/loading.gif'), alt => $self->l('LOADING'), id => 'loadingIcon'
         </div>
       </div>
     </div>
     <div class="panel-body">
-      <div class="text-center" id="pagination">
+      <div class="text-center"
+           id="pagination">
       </div>
       <table class="table table-hover">
         <thead>
           <tr>
             <th class="hidden-xs">
-              <%= l('EVENT_ID') %>
+              %= l('EVENT_ID')
             </th>
             <th>
-              <%= l('EVENT_DATE') %>
+              %= l('EVENT_DATE')
             </th>
             <th>
-              <%= l('EVENT_FROM_IP') %>
+              %= l('EVENT_FROM_IP')
             </th>
             <th class="hidden-xs">
-              <%= l('EVENT') %>
+              %= l('EVENT')
             </th>
             <th class="hidden-xs">
-              <%= l('EVENT_USER') %>
+              %= l('EVENT_USER')
             </th>
             <th>
-              <%= l('EVENT_MESSAGE') %>
+              %= l('EVENT_MESSAGE')
             </th>
           </tr>
         </thead>
diff --git a/templates/default/admin_manage_rooms.html.ep b/templates/default/admin_manage_rooms.html.ep
index b35e573..c1c2fd2 100644
--- a/templates/default/admin_manage_rooms.html.ep
+++ b/templates/default/admin_manage_rooms.html.ep
@@ -1,6 +1,6 @@
 % title $self->l('ROOM_MANAGEMENT');
-%=include 'header'
-%=include 'public_toolbar'
+%= include 'header'
+%= include 'public_toolbar'
 <div class="container-fluid">
 %= include 'noscript'
 %= include 'configure_modal'
@@ -10,7 +10,10 @@
       <div class="form-inline">
         <div class="form-group">
           <div class="input-group input-group-lg">
-            <input type="text" id="searchRoom" class="form-control" value=""/>
+            <input type="text"
+                   id="searchRoom"
+                   class="form-control"
+                   value="">
             <div class="input-group-addon">
               <span class="glyphicon glyphicon-search">
               </span>
@@ -20,25 +23,26 @@
       </div>
     </div>
     <div class="panel-body">
-      <div class="text-center" id="pagination">
+      <div class="text-center"
+           id="pagination">
       </div>
       <table class="table table-hover">
         <thead>
           <tr>
             <th>
-              <%= l('ROOM_NAME') %>
+              %= l('ROOM_NAME')
             </th>
             <th class="hidden-xs">
-              <%= l('CREATION_DATE') %>
+              %= l('CREATION_DATE')
             </th>
             <th class="hidden-xs">
-              <%= l('LAST_ACTIVITY') %>
+              %= l('LAST_ACTIVITY')
             </th>
             <th class="hidden-xs hidden-sm">
-              <%= l('NUMBER_OF_PARTICIPANTS') %>
+              %= l('NUMBER_OF_PARTICIPANTS')
             </th>
             <th>
-              <%= l('MANAGE') %>
+              %= l('MANAGE')
             </th>
           </tr>
         </thead>
@@ -49,10 +53,10 @@
   </div>
 </div>
 
-%=include 'js_common'
+%= include 'js_common'
 <script>
 $(document).ready(function(){
   initAdminRooms();
 });
 </script>
-%=include 'footer'
+%= include 'footer'
diff --git a/templates/default/auth_modal.html.ep b/templates/default/auth_modal.html.ep
index 971a696..8140736 100644
--- a/templates/default/auth_modal.html.ep
+++ b/templates/default/auth_modal.html.ep
@@ -1,31 +1,41 @@
-    <div class="modal fade" role="dialog" id="ownerAuthModal" aria-labelledby="ownerAuthModal" aria-hidden="true">
+    <div class="modal fade"
+         id="ownerAuthModal"
+         aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('AUTHENTICATE') %>
+              %= l('AUTHENTICATE')
             </h4>
           </div>
           <div class="modal-body">
-            <form class="form-horizontal" role="form" id="ownerAuthForm">
+            <form class="form-horizontal"
+                  id="ownerAuthForm">
               <div class="form-group">
-                <label for="ownerAuthPass" class="col-sm-4 control-label">
-                  <%= l('PASSWORD') %>
+                <label for="ownerAuthPass"
+                       class="col-sm-4 control-label">
+                  %= l('PASSWORD')
                 </label>
                 <div class="col-sm-8">
-                  <input type="password" id="ownerAuthPass" class="form-control" placeholder="<%= l('PASSWORD') %>"/>
+                  <input type="password"
+                         id="ownerAuthPass"
+                         class="form-control"
+                         placeholder="<%= l('PASSWORD') %>">
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-4 col-sm-8">
-                  <button type="submit" class="btn btn-default btn-primary">
-                    <%= l('SUBMIT') %>
+                  <button type="submit"
+                          class="btn btn-default btn-primary">
+                    %= l('SUBMIT')
                   </button>
-                  <button class="btn btn-default" data-dismiss="modal">
-                    <%= l('CANCEL') %>
+                  <button class="btn btn-default"
+                          data-dismiss="modal">
+                    %= l('CANCEL')
                   </button>
                 </div>
               </div>
@@ -34,4 +44,3 @@
         </div>
       </div>
     </div>
-
diff --git a/templates/default/configure_modal.html.ep b/templates/default/configure_modal.html.ep
index cb6b64e..42384a9 100644
--- a/templates/default/configure_modal.html.ep
+++ b/templates/default/configure_modal.html.ep
@@ -1,114 +1,175 @@
-    <div class="modal fade" role="dialog" id="configureModal" aria-labelledby="configureModal" aria-hidden="true">
+    <div class="modal fade"
+         id="configureModal"
+         aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+              data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('CONFIGURE') %>
+              %= l('CONFIGURE')
             </h4>
           </div>
           <div class="modal-body">
-            <form id="configureRoomForm" class="form-horizontal" role="form">
+            <form id="configureRoomForm" class="form-horizontal">
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="lockedSet">
-                  <%= l('LOCK_ROOM') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_LOCK_ROOM') %>">
+                <label class="col-sm-4 control-label"
+                      for="lockedSet">
+                  %= l('LOCK_ROOM')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_LOCK_ROOM') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
                 <div class="col-sm-8">
-                  <input type="checkbox" class="bs-switch" id="lockedSet">
+                  <input type="checkbox"
+                         class="bs-switch"
+                         id="lockedSet">
                 </div>
               </div>
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="askForNameSet">
-                  <%= l('ASK_FOR_NAME') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_ASK_FOR_NAME') %>">
+                <label class="col-sm-4 control-label"
+                       for="askForNameSet">
+                  %= l('ASK_FOR_NAME')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_ASK_FOR_NAME') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
                 <div class="col-sm-8">
-                  <input type="checkbox" class="bs-switch" id="askForNameSet">
+                  <input type="checkbox"
+                         class="bs-switch"
+                         id="askForNameSet">
                 </div>
               </div>
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="joinPassSet">
-                  <%= l('PASSWORD_PROTECT') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_PASSWORD_PROTECT') %>">
+                <label class="col-sm-4 control-label"
+                       for="joinPassSet">
+                  %= l('PASSWORD_PROTECT')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_PASSWORD_PROTECT') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
                 <div class="col-sm-8">
-                  <input type="checkbox" class="bs-switch" id="joinPassSet">
+                  <input type="checkbox"
+                         class="bs-switch"
+                         id="joinPassSet">
                 </div>
               </div>
-              <div class="form-group hidden-form" id="joinPassFields">
-                <label class="col-sm-4 control-label" for="joinPass">
-                  <%= l('PASSWORD') %>
+              <div class="form-group hidden-form"
+                   id="joinPassFields">
+                <label class="col-sm-4 control-label"
+                       for="joinPass">
+                  %= l('PASSWORD')
                 </label>
                 <div class="col-sm-8">
-                  <input id="joinPass" type="password" class="form-control" placeholder="<%= l('PASSWORD') %>"/>
+                  <input id="joinPass"
+                         type="password"
+                         class="form-control"
+                         placeholder="<%= l('PASSWORD') %>">
                 </div>
-                <label class="col-sm-4 control-label" for="joinPassConfirm">
-                  <%= l('CONFIRM_PASSWORD') %>
+                <label class="col-sm-4 control-label"
+                       for="joinPassConfirm">
+                  %= l('CONFIRM_PASSWORD')
                 </label>
                 <div class="col-sm-8">
-                  <input id="joinPassConfirm" type="password" class="form-control" placeholder="<%= l('CONFIRM_PASSWORD') %>"/>
+                  <input id="joinPassConfirm"
+                         type="password"
+                         class="form-control"
+                         placeholder="<%= l('CONFIRM_PASSWORD') %>">
                 </div>
               </div>
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="ownerPassSet">
-                  <%= l('RESERVE_THIS_ROOM') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_RESERVE_THIS_ROOM') %>">
+                <label class="col-sm-4 control-label"
+                       for="ownerPassSet">
+                  %= l('RESERVE_THIS_ROOM')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_RESERVE_THIS_ROOM') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
                 <div class="col-sm-8">
-                  <input type="checkbox" class="bs-switch" id="ownerPassSet">
+                  <input type="checkbox"
+                         class="bs-switch"
+                         id="ownerPassSet">
                 </div>
               </div>
-              <div class="form-group hidden-form" id="ownerPassFields">
-                <label class="col-sm-4 control-label" for="ownerPass">
-                  <%= l('PASSWORD') %>
+              <div class="form-group hidden-form"
+                   id="ownerPassFields">
+                <label class="col-sm-4 control-label"
+                       for="ownerPass">
+                  %= l('PASSWORD')
                 </label>
                 <div class="col-sm-8">
-                  <input id="ownerPass" type="password" class="form-control" placeholder="<%= l('PASSWORD') %>"/>
+                  <input id="ownerPass"
+                         type="password"
+                         class="form-control"
+                         placeholder="<%= l('PASSWORD') %>">
                 </div>
-                <label class="col-sm-4 control-label" for="ownerPassConfirm">
-                  <%= l('CONFIRM_PASSWORD') %>
+                <label class="col-sm-4 control-label"
+                       for="ownerPassConfirm">
+                  %= l('CONFIRM_PASSWORD')
                 </label>
                 <div class="col-sm-8">
-                  <input id="ownerPassConfirm" type="password" class="form-control" placeholder="<%= l('CONFIRM_PASSWORD') %>"/>
+                  <input id="ownerPassConfirm"
+                         type="password"
+                         class="form-control"
+                         placeholder="<%= l('CONFIRM_PASSWORD') %>">
                 </div>
               </div>
-              <% if (defined(stash("page")) && stash("page") eq 'admin'){ %>
+              % if (defined(stash("page")) && stash("page") eq 'admin'){
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="persistentSet">
-                  <%= l('PERSISTENT') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_PERSISTENT') %>">
+                <label class="col-sm-4 control-label"
+                       for="persistentSet">
+                  %= l('PERSISTENT')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_PERSISTENT') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
                 <div class="col-sm-8">
-                  <input type="checkbox" class="bs-switch" id="persistentSet">
+                  <input type="checkbox"
+                         class="bs-switch"
+                         id="persistentSet">
                 </div>
               </div>
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="maxMembers">
-                  <%= l('MAX_MEMBERS') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%= l('TOOLTIP_MAX_MEMBERS') %>">
+                <label class="col-sm-4 control-label"
+                       for="maxMembers">
+                  %= l('MAX_MEMBERS')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-content="<%= l('TOOLTIP_MAX_MEMBERS') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
@@ -122,21 +183,32 @@
                          max="<%= $config->{'rooms.max_members'} > 0 ? $config->{'rooms.max_members'} : 255 %>">
                 </div>
               </div>
-              <% } %>
+              % }
               <div class="form-group">
-                <label class="col-sm-4 control-label" for="emailNotifications">
-                  <%= l('NOTIFICATION_ON_JOIN') %>
-                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-placement="left" data-content="<%= l('TOOLTIP_NOTIFICATION_ON_JOIN') %>">
+                <label class="col-sm-4 control-label"
+                       for="emailNotifications">
+                  %= l('NOTIFICATION_ON_JOIN')
+                  <a href="#"
+                     class="popup"
+                     data-container="body"
+                     data-toggle="popover"
+                     data-placement="left"
+                     data-content="<%= l('TOOLTIP_NOTIFICATION_ON_JOIN') %>">
                     &nbsp;&nbsp
                     <span class="glyphicon glyphicon-question-sign">
                     </span>
                   </a>
                 </label>
-                <div class="col-sm-8 email-list" id="email-list-notification">
+                <div class="col-sm-8 email-list"
+                     id="email-list-notification">
                   <div class="email-entry input-group">
-                    <input class="form-control" autocomplete="off" name="emails[]" type="text" placeholder="<%= l('EMAIL_PLACEHOLDER') %>" />
+                    <input class="form-control"
+                           autocomplete="off"
+                           name="emails[]"
+                           type="text"
+                           placeholder="<%= l('EMAIL_PLACEHOLDER') %>">
                     <span class="input-group-btn">
-                      <button class="btn btn-primary btn-add-email" type="button">
+                      <button class="btn btn-primary btn-add-email">
                         <span class="glyphicon glyphicon-plus">
                         </span>
                       </button>
@@ -146,11 +218,14 @@
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-4 col-sm-8">
-                  <button type="submit" id="configureButton" class="btn btn-primary">
-                    <%= l('SUBMIT') %>
+                  <button type="submit"
+                          id="configureButton"
+                          class="btn btn-primary">
+                    %= l('SUBMIT')
                   </button>
-                  <button class="btn btn-default" data-dismiss="modal">
-                    <%= l('CANCEL') %>
+                  <button class="btn btn-default"
+                          data-dismiss="modal">
+                    %= l('CANCEL')
                   </button>
                 </div>
               </div>
@@ -159,4 +234,3 @@
         </div>
       </div>
     </div>
-
diff --git a/templates/default/delete_room_modal.html.ep b/templates/default/delete_room_modal.html.ep
index 003a6d1..ee0bea7 100644
--- a/templates/default/delete_room_modal.html.ep
+++ b/templates/default/delete_room_modal.html.ep
@@ -1,28 +1,34 @@
-    <div class="modal fade" role="dialog" id="deleteRoomModal" aria-labelledby="deleteRoomModal" aria-hidden="true">
+    <div class="modal fade"
+         id="deleteRoomModal"
+         aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"*
+                    data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('CONFIRM_DELETE') %>
+              %= l('CONFIRM_DELETE')
             </h4>
           </div>
           <div class="modal-body">
             <p>
-              <%= l('ROOM_WILL_BE_DELETED') %>
+              %= l('ROOM_WILL_BE_DELETED')
             </p>
           </div>
           <div class="modal-footer">
-            <form id="deleteRoomForm" class="form-horizontal" role="form">
+            <form id="deleteRoomForm"
+                  class="form-horizontal">
               <div class="form-group">
                 <div class="col-sm-offset-4 col-sm-8">
-                  <button type="submit" class="btn btn-danger">
-                    <%= l('DELETE') %>
+                  <button type="submit"
+                          class="btn btn-danger">
+                    %= l('DELETE')
                   </button>
-                  <button class="btn btn-default" data-dismiss="modal">
-                    <%= l('CANCEL') %>
+                  <button class="btn btn-default"
+                          data-dismiss="modal">
+                    %= l('CANCEL')
                   </button>
                 </div>
               </div>
@@ -31,4 +37,3 @@
         </div>
       </div>
     </div>
-
diff --git a/templates/default/documentation.html.ep b/templates/default/documentation.html.ep
index 32a6577..ef9c124 100644
--- a/templates/default/documentation.html.ep
+++ b/templates/default/documentation.html.ep
@@ -7,7 +7,8 @@
       <div id="toc">
       </div>
     </div>
-    <div class="col-sm-9" id="doc-content">
+    <div class="col-sm-9"
+         id="doc-content">
 
 
 
@@ -15,19 +16,35 @@
         Introduction
       </h1>
       <p>
-        VROOM (short for <strong>V</strong>ideo <strong>ROOM</strong>) is a simple to use, web-based and opensource (MIT licence) video conferencing application.
+        VROOM (short for <strong>V</strong>ideo <strong>ROOM</strong>) is a simple to use,
+        web-based and opensource (MIT licence) video conferencing application.
       </p>
       <p>
-        VROOM uses the latest WebRTC technologies to allow video conferencing through a web browser without any plugin.
+        VROOM uses the latest WebRTC technologies to allow video conferencing through a web
+        browser without any plugin.
         There are several more or less similar hosted solutions available (like
-          <a href="https://talky.io/" target="_blank">talky.io</a>,
-          <a href="https://appear.in/" target="_blank">appear.in</a>,
-          <a href="https://vline.com/" target="_blank">vLine.com</a> 
+          <a href="https://talky.io/"
+             target="_blank">
+            talky.io
+          </a>,
+          <a href="https://appear.in/"
+             target="_blank">
+            appear.in
+          </a>,
+          <a href="https://vline.com/"
+             target="_blank">
+            vLine.com
+          </a> 
         for example).
-        Most of them are more polished than VROOM, but I've found none entirely opensource, so I started this project.
+        Most of them are more polished than VROOM, but I've found none entirely opensource,
+        so I started this project.
       </p>
       <p>
-        You can get the source, and follow the development of VROOM on the <a href="https://github.com/dani/vroom" target="_blank">github page</a>
+        You can get the source, and follow the development of VROOM on the
+        <a href="https://github.com/dani/vroom"
+           target="_blank">
+          github page
+        </a>
         of the project.
       </p>
 
@@ -39,21 +56,49 @@
       <p>
         VROOM implements the following features:
         <ul>
-          <li>P2P Audio/Video conversations (no limit on the number of peers per room)</li>
-          <li>P2P text chat</li>
-          <li>Screen or single windows sharing</li>
-          <li>Send invitations by email</li>
-          <li>Be notified when someone joins one of your rooms</li>
-          <li>Persistent/reserved rooms</li>
-          <li>Chairman functionnalities (mute/pause/kick other peers)</li>
-          <li>Grant chairman role to other peers</li>
-          <li>Password protected rooms (different passwords for access and chairman)</li>
-          <li>Music on hold (when you're alone in a room)</li>
-          <li>Can be optionaly integrated with <a href="https://github.com/ether/etherpad-lite" target="_blank">Etherpad-Lite</a></li>
+          <li>
+            P2P Audio/Video conversations (no limit on the number of peers per room)
+          </li>
+          <li>
+            P2P text chat
+          </li>
+          <li>
+            Screen or single windows sharing
+          </li>
+          <li>
+            Send invitations by email
+          </li>
+          <li>
+            Be notified when someone joins one of your rooms
+          </li>
+          <li>
+            Persistent/reserved rooms
+          </li>
+          <li>
+            Chairman functionnalities (mute/pause/kick other peers)
+          </li>
+          <li>
+            Grant chairman role to other peers
+          </li>
+          <li>
+            Password protected rooms (different passwords for access and chairman)
+          </li>
+          <li>
+            Music on hold (when you're alone in a room)
+          </li>
+          <li>
+            Can be optionaly integrated with
+            <a href="https://github.com/ether/etherpad-lite"
+               target="_blank">
+              Etherpad-Lite
+            </a>
+          </li>
         </ul>
       </p>
       <p>
-        VROOM is available in French and English. You're welcome to submit patches or pull requests to enhance existing localizations, or add new ones.
+        VROOM is available in french and english.
+        You're welcome to submit patches or pull requests to enhance existing localizations,
+        or add new ones.
       </p>
 
 
@@ -61,22 +106,52 @@
         How it works
       </h1>
       <p>
-        <a href="http://www.webrtc.org/" taget="_blank">WebRTC</a> allows browsers to browsers direct connections. This provides the best latency as it avoids round trip through a server,
-        which is important with real time communications. But it also ensures the privacy of your communications. VROOM takes advantage of those
+        <a href="http://www.webrtc.org/"
+           taget="_blank">
+          WebRTC
+        </a>
+        allows browsers to browsers direct connections. This provides the best latency
+        as it avoids round trip through a server, which is important with real time communications.
+        But it also ensures the privacy of your communications. VROOM takes advantage of those
         new technologies, and does the following:
         <ul>
-          <li>When a client joins a room, it establishes a <a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank">websocket</a> connection to VROOM server. 
-              This is called the signaling channel. With this, all peers are able to exchange small messages with each other. But messages sent through this channels are 
-              routed through VROOM server, so it's not peer to peer yet</li>
-          <li>When a second peer joins the same room, he gets informations about how to connect directly to the other one(s) through this signaling channel.</li>
-          <li>Now, both peer exchange their video and audio stream directly</li>
-          <li>The signaling channel stays open and is used to transmit non sensitive informations (peer colors synchronization, notification of muting/kicking etc...)</li>
-          <li>Everything else (audio/video/text chat) is sent directly between peers through data channels</li>
+          <li>
+            When a client joins a room, it establishes a
+            <a href="https://en.wikipedia.org/wiki/WebSocket"
+               target="_blank">
+              websocket
+            </a>
+            connection to VROOM server. 
+            This is called the signaling channel.
+            With this, all peers are able to exchange small messages with each other.
+            But messages sent through this channels are routed through VROOM server,
+            so it's not peer to peer yet
+          </li>
+          <li>
+            When a second peer joins the same room, he gets informations about how
+            to connect directly to the other one(s) through this signaling channel.
+          </li>
+          <li>
+            Now, both peer exchange their video and audio stream directly
+          </li>
+          <li>
+            The signaling channel stays open and is used to transmit non sensitive informations
+            (peer colors synchronization, notification of muting/kicking etc...)
+          </li>
+          <li>
+            Everything else (audio/video/text chat) is sent directly between peers through data channels
+          </li>
         </ul>
       </p>
       <div class="alert alert-warning">
-        As long as possible, data channels and audio/video streams are established directly between peers, but in some situations, this is not possible (NAT, restrictive firewalls etc...). In those cases
-        data streams are relayed through a <a href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT" target="_blank">TURN</a> server
+        As long as possible, data channels and audio/video streams are established directly between peers,
+        but in some situations, this is not possible (NAT, restrictive firewalls etc...). In those cases
+        data streams are relayed through a
+        <a href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT"
+           target="_blank">
+          TURN
+        </a>
+        server
       </div>
 
       <h1 id="technologies">
@@ -84,10 +159,23 @@
       </h1>
       VROOM is composed of two distincts
       <ul>
-        <li>The client side: written in Javascript, it's the code executed on the browsers. This is where webcam streams are captured and sent to other peers. The biggest part is
-            <a href="http://simplewebrtc.com/" target="_blank">SimpleWebRTC</a>.</li>
-        <li>The server side: mainly written in Perl using the fabulous <a href="http://mojolicio.us/" target="_blank">Mojolicious</a> framework. This is where room are created
-            their configurations are stored, and where permissions are managed. The backend uses an SQL (MySQL is the only supported engine for now) to store configurations</li>
+        <li>
+          The client side: written in Javascript, it's the code executed on the browsers. This is where
+          webcam streams are captured and sent to other peers. The biggest part is
+            <a href="http://simplewebrtc.com/"
+               target="_blank">
+              SimpleWebRTC
+            </a>
+        </li>
+        <li>
+          The server side: mainly written in Perl using the fabulous
+          <a href="http://mojolicio.us/"
+             target="_blank">
+            Mojolicious
+          </a>
+          framework. This is where room are created and their configuration stored, and where permissions
+          are managed. The backend uses an SQL (MySQL is the only supported engine for now) to store configurations
+        </li>
       </ul>
 
       <h1 id="install_your_own">
@@ -101,58 +189,114 @@
       <p>
         If you want to run your own VROOM instance, you'll need the following components
         <ul>
-          <li>A MySQL compatible server (MySQL or MariaDB)</li>
-          <li>A webserver supporting HTTPS and reverse proxying, including websocket reverse proxying (Apache can do this with mod_proxy_wstunnel)</li>
-          <li>The following perl modules
+          <li>
+            A MySQL compatible server (MySQL or MariaDB)
+          </li>
+          <li>
+            A webserver supporting HTTPS and reverse proxying, including websocket reverse
+            proxying (Apache can do this with mod_proxy_wstunnel)
+          </li>
+          <li>
+            The following perl modules
             <ul>
-              <li>DBI</li>
-              <li>DBD::mysql</li>
-              <li>Mojolicious</li>
-              <li>Mojolicious::Plugin::Mail</li>
-              <li>Mojolicious::Plugin::Database</li>
-              <li>Mojolicious::Plugin::StaticCompressor</li>
-              <li>Crypt::SaltedHash</li>
-              <li>MIME::Base64</li>
-              <li>Session::Token</li>
-              <li>Config::Simple</li>
-              <li>Email::Valid</li>
-              <li>Protocol::SocketIO::Handshake</li>
-              <li>Protocol::SocketIO::Message</li>
-              <li>Data::Dumper</li>
-              <li>DateTime</li>
-              <li>Array::Diff</li>
-              <li>Locale::Maketext::Lexicon</li>
+              <li>
+                DBI
+              </li>
+              <li>
+                DBD::mysql
+              </li>
+              <li>
+                Mojolicious
+              </li>
+              <li>
+                Mojolicious::Plugin::Mail
+              </li>
+              <li>
+                Mojolicious::Plugin::Database
+              </li>
+              <li>
+                Mojolicious::Plugin::StaticCompressor
+              </li>
+              <li>
+                Crypt::SaltedHash
+              </li>
+              <li>
+                MIME::Base64
+              </li>
+              <li>
+                Session::Token
+              </li>
+              <li>
+                Config::Simple
+              </li>
+              <li>
+                Email::Valid
+              </li>
+              <li>
+                Protocol::SocketIO::Handshake
+              </li>
+              <li>
+                Protocol::SocketIO::Message
+              </li>
+              <li>
+                Data::Dumper
+              </li>
+              <li>
+                DateTime
+              </li>
+              <li>
+                Array::Diff
+              </li>
+              <li>
+                Locale::Maketext::Lexicon
+              </li>
             </ul>
           </li>
-          <li>The following perl modules are optional
+          <li>
+            The following perl modules are optional
             <ul>
               <li>
                 For Etherpad-Lite support:
                 <ul>
-                  <li>Etherpad</li>
+                  <li>
+                    Etherpad
+                  </li>
                 </ul>
               </li>
               <li>
                 To export events in a XLSX file
                 <ul>
-                  <li>Mojolicious::Plugin::RenderFile</li>
-                  <li>File::Temp</li>
-                  <li>Excel::Writer::XLSX</li>
+                  <li>
+                    Mojolicious::Plugin::RenderFile
+                  </li>
+                  <li>
+                    File::Temp
+                  </li>
+                  <li>
+                    Excel::Writer::XLSX
+                  </li>
                 </ul>
               </li>
             </ul>
           </li>
         </ul>
-        It's also advised to run VROOM on a systemd powered distribution (simply because that's what I use and I include service units for VROOM). 
-        For the same reasons, I recommend running Apache as webserver (others like Nginx probably work too, but I provide configuration sample only for Apache)
+        It's also advised to run VROOM on a systemd powered distribution (simply because that's what
+        I use and I include service units for VROOM). 
+        For the same reasons, I recommend running Apache as webserver (others like Nginx probably work too,
+        but I provide configuration sample only for Apache)
       </p>
       <div class="alert alert-warning">
         VROOM can probably work with other database engines (like PostgreSQL) with minor modifications.
         If you're interrested in adding support, you're welcome to help
       </div>
       <div class="alert alert-warning">
-        While VROOM should run on any distro, it's only tested on CentOS 7 x86_64, so it's the recommended platform.
-        Also, all dependencies are available as RPM in <a href="http://repo.firewall-services.com/centos/" target="_blank">Firewall Services'</a> 
+        While VROOM should run on any distro, it's only tested on CentOS 7 x86_64,
+        so it's the recommended platform.
+        Also, all dependencies are available as RPM in
+        <a href="http://repo.firewall-services.com/centos/"
+           target="_blank">
+          Firewall Services'
+        </a> 
         repository, so installation will be easier on CentOS 7. 
         If you have it running on another system, please send me your notes so I can update this documentation.
       </div>
@@ -165,14 +309,16 @@
         This guide assumes that you have installed a minimal CentOS 7 x86_64 system
       </div>
       <div class="alert alert-danger">
-        For now, VROOM requires SELinux to be disabled, or permissive. You can set this in <strong>/etc/selinux/config</strong>
+        For now, VROOM requires SELinux to be disabled, or permissive.
+        You can set this in <strong>/etc/selinux/config</strong>
       </div>
 
       <h3 id="c7_repo">
         Configure the required repositories
       </h3>
       <p>
-        You need to configure both EPEL and FWS repo<br>
+        You need to configure both EPEL and FWS repo
+        <br>
         <pre>
 cat <<'_EOF' > /etc/yum.repos.d/fws.repo
 [fws]
@@ -250,7 +396,8 @@ GRANT ALL PRIVILEGES ON `vroom`.* TO 'vroom'@'localhost' IDENTIFIED BY 'MySuperP
 FLUSH PRIVILEGES;</pre>
       </p>
       <div class="alert alert-warning">
-        It's better to generate a long, random password here. Just write it somewhere, you'll need it later
+        It's better to generate a long, random password here.
+        Just write it somewhere, you'll need it later
       </div>
       <p>
         Now that we have our MySQL database, we can create the tables
@@ -262,11 +409,20 @@ mysql -uroot vroom < /opt/vroom/docs/database/schema.mysql</pre>
         Setup Apache
       </h3>
       <p>
-        Two sample apache configurations are provided in the <strong>doc/httpd</strong> directory
+        Two sample apache configurations are provided in the <strong>doc/httpd</strong>
+        directory
         <ul>
-          <li><strong>httpd_alias.conf</strong> should work out of the box, VROOM will be available at <em>https://yourservername/vroom</em></li>
-          <li><strong>httpd_vhost.conf</strong> is an alternative which you can use if you prefer working with named virtualhosts 
-              (but will require additional config adjustments, especially in ssl.conf, which is out of scope for this guide)</li>
+          <li>
+            <strong>httpd_alias.conf</strong> should work out of the box, VROOM will be available at
+            <em>
+              https://yourservername/vroom
+            </em>
+          </li>
+          <li>
+            <strong>httpd_vhost.conf</strong> is an alternative which you can use if you prefer
+            working with named virtualhosts (but will require additional config adjustments,
+            especially in ssl.conf, which is out of scope for this guide)
+          </li>
         </ul>
         Copy the config you want in /etc/httpd/conf.d/
       </p>
@@ -274,12 +430,15 @@ mysql -uroot vroom < /opt/vroom/docs/database/schema.mysql</pre>
         In either case, you might want to adjust the apache configuration
       </div>
       <div class="alert alert-danger">
-        The admin interface of VROOM will be available on /vroom/admin (alias) or /admin (vhost) and <strong>must</strong> be protected by your web server.
-        VROOM provides <strong>no authentication at all</strong>. In the sample configuration, the access is restricted to localhost, 
+        The admin interface of VROOM will be available on /vroom/admin (alias) or
+        /admin (vhost) and <strong>must</strong> be protected by your web server.
+        VROOM provides <strong>no authentication at all</strong>.
+        In the sample configuration, the access is restricted to localhost, 
         but you can change this to anything you want
       </div>
       <p>
-        You also have to make sure the <strong>mod_proxy_wstunnel</strong> module is enabled, which is not the case by default on CentOS 7
+        You also have to make sure the <strong>mod_proxy_wstunnel</strong>
+        module is enabled, which is not the case by default on CentOS 7
         <pre>
 echo "LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so" \\
  > /etc/httpd/conf.modules.d/00-proxy_wstunnel.conf</pre>
@@ -289,19 +448,20 @@ echo "LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so" \\
         Set permissions on the cache and tmp directories
       </h3>
       <p>
-        The <strong>cache</strong> and <strong>tmp</strong> directories must be writeable for the user running the VROOM daemon, which is <strong>vroom</strong> in the provided systemd unit
+        The <strong>data</strong> directory must be writeable for the user running the VROOM daemon,
+        which is <strong>vroom</strong> in the provided systemd unit
         <pre>
-chown -R vroom ./data/{tmp,cache}
-chmod 700 ./data/{cache,tmp}</pre>
+useradd -r -d /dev/null -s /sbin/nologin vroom
+chown -R vroom ./data/
+chmod 700 ./data/</pre>
       </p>
 
       <h3 id="c7_systemd_unit">
         Setup systemd units
       </h3>
       <p>
-        Here, we'll copy the sample vroom.service unit so that systemd picks it up, and create the vroom user account
+        Here, we'll copy the sample vroom.service unit so that systemd picks it up
         <pre>
-useradd -r -d /dev/null -s /sbin/nologin vroom
 cp /opt/vroom/docs/systemd/vroom.service /etc/systemd/system/
 systemctl daemon-reload
 systemctl enable vroom</pre>
@@ -315,19 +475,28 @@ systemctl enable vroom</pre>
         Now, we just need to configure vroom itself. Just copy the sample conf file
         <pre>
 cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
-        And edit it to your need. settings.ini has plenty of comments, but here's an explanation of the different sections and settings
+        And edit it to your need. settings.ini has plenty of comments,
+        but here's an explanation of the different sections and settings
       </p>
 
       <h3 id="settings_database">
        database
       </h3>
       <p>
-        This section is where you define access to the database used by VROOM. The following settings are available
+        This section is where you define access to the database used by VROOM.
+        The following settings are available
         <ul>
-          <li><strong>dsn</strong>: The <strong>D</strong>ata <strong>S</strong>ource <strong>N</strong>ame for your database.
-              For example <kbd>dsn = 'DBI:mysql:database=vroom;host=localhost'</kbd>. See perl DBI documentation if you want more information</li>
-          <li><strong>user</strong>: This is the username for your database</li>
-          <li><strong>password</strong>: The password for your database</li>
+          <li>
+            <strong>dsn</strong>: The <strong>D</strong>ata <strong>S</strong>ource <strong>N</strong>ame for your database.
+            For example <kbd>dsn = 'DBI:mysql:database=vroom;host=localhost'</kbd>.
+            See perl DBI documentation if you want more information
+          </li>
+          <li>
+            <strong>user</strong>: This is the username for your database
+          </li>
+          <li>
+            <strong>password</strong>: The password for your database
+          </li>
         </ul>
       </p>
 
@@ -335,34 +504,73 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
        turn
       </h3>
       <p>
-        This section defines which <a href="http://en.wikipedia.org/wiki/STUN" target="_blank">STUN</a> and 
-        <a href="http://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT" target="_blank">TURN</a> servers
-        will be used by the <a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment" target="_blank">ICE</a> process. 
-        If you plan to use VROOM only on a local network, where each peer can connect to each others, you can just omit this part. But if you want
-        VROOM to work from anywhere, you'll need to use STUN and most likely TURN too.
+        This section defines which
+        <a href="http://en.wikipedia.org/wiki/STUN"
+           target="_blank">
+          STUN
+        </a>
+        and 
+        <a href="http://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT"
+           target="_blank">
+          TURN
+        </a>
+        servers will be used by the
+        <a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment"
+          target="_blank">
+          ICE
+        </a>
+        process. If you plan to use VROOM only on a local network, where each peer can connect to
+        each others, you can just omit this part. But if you want VROOM to work from anywhere,
+        you'll need to use STUN and most likely TURN too.
         <ul>
-          <li><strong>stun_server</strong>: The STUN server(s) to use. For example
+          <li>
+            <strong>stun_server</strong>: The STUN server(s) to use. For example
             <kbd>stun_server = 'stun:stun.l.google.com:19302','stun:vroom.example.net:3478'</kbd>. 
-          This must be a comma separated list of full STUN URI as defined by <a href="https://tools.ietf.org/html/rfc7064" target="_blank">rfc7064</a></li>
-
-          <li><strong>turn_server</strong>: The TURN server(s) to use. For example
+            This must be a comma separated list of full STUN URI as defined by
+            <a href="https://tools.ietf.org/html/rfc7064"
+               target="_blank">
+              rfc7064
+            </a>
+          </li>
+          <li>
+            <strong>turn_server</strong>: The TURN server(s) to use. For example
             <kbd>turn_server = 'turns:vroom.example.net:5349','turns:vroom.example.net:5349?transport=tcp'</kbd>.
-          This must be a comma separated list of full STUN URI as defined by <a href="https://tools.ietf.org/html/rfc7065" target="_blank">rfc7065</a></li>
-
-          <li><strong>credentials</strong>: This defines what TURN credentials are sent to clients. It can take two values:
+            This must be a comma separated list of full STUN URI as defined by
+            <a href="https://tools.ietf.org/html/rfc7065"
+               target="_blank">
+              rfc7065
+            </a>
+          </li>
+          <li>
+            <strong>credentials</strong>: This defines what TURN credentials are sent to clients.
+            It can take two values:
             <ul>
-              <li><strong>static</strong>: With this mode, you're using a single set of credentials (set with <strong>turn_user</strong> and
-                <strong>turn_password</strong>) and they will be used by every peer in every room</li>
-              <li><strong>rest</strong>: In this mode, VROOM will generate <a href="https://tools.ietf.org/html/draft-uberti-rtcweb-turn-rest-00" target="_blank">TURN REST API</a>
-                compatible credentials for each room. Each credentials set will be valid only for 5 minutes. You must set <strong>secret_key</strong> to the same secret key
-                set in your TURN server</li>
+              <li>
+                <strong>static</strong>: With this mode, you're using a single set of credentials
+                (defined in <strong>turn_user</strong> and <strong>turn_password</strong>) and they
+                will be used by every peer in every room
+              </li>
+              <li>
+                <strong>rest</strong>: In this mode, VROOM will generate
+                <a href="https://tools.ietf.org/html/draft-uberti-rtcweb-turn-rest-00"
+                   target="_blank">
+                  TURN REST API
+                </a>
+                compatible credentials for each room. Each credentials set will be valid only
+                for 5 minutes. You must set <strong>secret_key</strong> to the same secret key
+                set in your TURN server. This is of course the prefered method.
+              </li>
             </ul>
           </li>
-
-          <li><strong>turn_user</strong> and <strong>turn_password</strong>: To use your TURN server, you'll most likely require credentials.
-            If using static credentials, you must set this to the username and password the clients will use</li>
-
-          <li><strong>secret_key</strong>: When using the <strong>rest</strong> credentials method, set this to the secret key shared with the turn server</li>          
+          <li>
+            <strong>turn_user</strong> and <strong>turn_password</strong>: To use your TURN server,
+            you'll most likely require credentials. If using static credentials, you must set this to
+            the username and password the clients will use
+          </li>
+          <li>
+            <strong>secret_key</strong>: When using the <strong>rest</strong> credentials method,
+            set this to the secret key shared with the turn server
+          </li>
         </ul>
       </p>
 
@@ -372,8 +580,11 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
       <p>
         This section is for video quality settings. the available settings are
         <ul>
-          <li><strong>frame_rate</strong>: Number of frames per second for webcam streams. A bigger number will provide a better quality stream
-          but will also require more bandwidth and CPU on each peer. The default is 15 fps
+          <li>
+            <strong>frame_rate</strong>: Number of frames per second for webcam streams.
+            A bigger number will provide a better quality stream but will also require more
+            bandwidth and CPU on each peer. The default is 15 fps
+          </li>
         </ul>
       </p>
 
@@ -381,11 +592,19 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
         email
       </h3>
       <p>
-        This section is for emails sent by VROOM (invitations, notifications, feedback form etc...). The available settings are
+        This section is for emails sent by VROOM (invitations, notifications, feedback form etc...).
+        The available settings are
         <ul>
-          <li><strong>from</strong>: The address used in the From field of emails sent by VROOM.</li>
-          <li><strong>contact</strong>: The email address which will get feedback form submissions.</li>
-          <li><strong>sendmail</strong>: The path to the sendmail compatible binary to use (default is /usr/bin/sendmail and will probably won't need to be changed)</li>
+          <li>
+            <strong>from</strong>: The address used in the From field of emails sent by VROOM.
+          </li>
+          <li>
+            <strong>contact</strong>: The email address which will get feedback form submissions.
+          </li>
+          <li>
+            <strong>sendmail</strong>: The path to the sendmail compatible binary to use (default is
+            /usr/bin/sendmail and will probably won't need to be changed)
+          </li>
         </ul>
       </p>
 
@@ -395,15 +614,32 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
       <p>
         This section controls the web interface. The available settings are
         <ul>
-          <li><strong>powered_by</strong>: will be displayed in the footer. You can put HTML code here.</li>
-          <li><strong>template</strong>: The name of the template to use. Must be a directory under <strong>templates</strong>. The default, 
-          and only template provided is called <strong>default</strong>. But you can copy it and customize it to your needs</li>
-          <li><strong>chrome_extension_id</strong>: This is the ID of the Chrome extension proposed to clients when trying to share screen for the first time
-          (obviously, only for Chrome users). The reason this is configurable is because the extension requires the allowed websites to be listed.
-          Two extensions are provided, the default (ecicdpoejfllflombfanbhfpgcimjddn) will work everywhere but allows screen capture on any website,
-          which can be a security risk. The other extension (lfkdfilifapafomlhaaihfdglamkmdme) only works on <a href="https://vroom.im" target="_blank">https://vroom.im</a>.
-          You can create your own extension which will only work for your site, and submit it to Google Chrome Store if you want.</li>
-          <li><strong>demo</strong>: If enabled, a few more pages and elements will be displayed, like the documentation you're reading right now.</li>
+          <li>
+            <strong>powered_by</strong>: will be displayed in the footer. You can put HTML code here.
+          </li>
+          <li>
+            <strong>template</strong>: The name of the template to use. Must be a directory under <strong>templates</strong>.
+            The default, and only template provided is called <strong>default</strong>.
+            But you can copy it and customize it to your needs
+          </li>
+          <li>
+            <strong>chrome_extension_id</strong>: This is the ID of the Chrome extension proposed to
+            clients when trying to share screen for the first time (obviously, only for Chrome users).
+            The reason this is configurable is because the extension requires the allowed websites to be listed.
+            Two extensions are provided, the default (ecicdpoejfllflombfanbhfpgcimjddn) will work everywhere
+            but allows screen capture on any website, which can be a security risk.
+            The other extension (lfkdfilifapafomlhaaihfdglamkmdme) only works on
+            <a href="https://vroom.im"
+               target="_blank">
+              https://vroom.im
+            </a>.
+            You can create your own extension which will only work for your site, and submit it to Google Chrome Store
+            if you want.
+          </li>
+          <li>
+            <strong>demo</strong>: If enabled, a few more pages and elements will be displayed,
+            like the documentation you're reading right now.
+          </li>
         </ul>
       </p>
 
@@ -414,13 +650,21 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
       <p>
         This section controls rooms behavior. The available settings are
         <ul>
-          <li><strong>inactivity_timeout</strong>: The time (in minutes) after which a room without activity will be deleted</li>
-          <li><strong>reserved_inactivity_timeout</strong>: The same, but for rooms which have been reserved (owner password set).
-            You can set it to 0 if you do not want reserved room to expire</li>
-          <li><strong>common_names</strong>: a comma separated list of names you don't want anyone to be able to reserve. Rooms with
-            those names can be created, but not reserved. This is to prevent cybersquatting</li>
-          <li><strong>max_members</strong>: This is the maximum number of peers able to be in a room at the same time. You can define a limit
-            per room if you want. But the limit set here cannot be exceeded.</li>
+          <li>
+            <strong>inactivity_timeout</strong>: The time (in minutes) after which a room without activity will be deleted
+          </li>
+          <li>
+            <strong>reserved_inactivity_timeout</strong>: The same, but for rooms which have been reserved (owner password set).
+            You can set it to 0 if you do not want reserved room to expire
+          </li>
+          <li>
+            <strong>common_names</strong>: a comma separated list of names you don't want anyone to be able to reserve.
+            Rooms with those names can be created, but not reserved. This is to prevent cybersquatting
+          </li>
+          <li>
+            <strong>max_members</strong>: This is the maximum number of peers able to be in a room at the same time.
+            You can define a limit per room if you want. But the limit set here cannot be exceeded.
+          </li>
         </ul>
       </p>
 
@@ -429,14 +673,28 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
         etherpad
       </h3>
       <p>
-        Controls <a href="https://github.com/ether/etherpad-lite" target="_blank">Etherpad-Lite</a> integration. The following settings are available
+        Controls
+        <a href="https://github.com/ether/etherpad-lite"
+           target="_blank">
+          Etherpad-Lite
+        </a>
+        integration. The following settings are available
         <ul>
-          <li><strong>uri</strong>: The URI to reach your Etherpad Lite instance. This instance must share the same base domain as VROOM because
-            of the way sessions are created (Etherpad Lite sessions are created by VROOM directly and sent as a cookie to the clients)</li>
-          <li><strong>api_key</strong>: The API key of your Etherpad Lite instance. You can find it in the file <strong>APIKEY.txt</strong> at the root
-            of your Etherpad Lite installation</li>
-          <li><strong>base_domain</strong>: This is the common part of your domain between VROOM and Etherpad Lite. For example, if you have VROOM running
-            on https://vroom.example.net/ and Etherpad-Lite as https://pads.example.net, you'd put <kbd>base_domain = 'example.net'</kbd> here</li>
+          <li>
+            <strong>uri</strong>: The URI to reach your Etherpad Lite instance.
+            This instance must share the same base domain as VROOM because
+            of the way sessions are created (Etherpad Lite sessions are created by VROOM
+            directly and sent as a cookie to the clients)
+          </li>
+          <li>
+            <strong>api_key</strong>: The API key of your Etherpad Lite instance.
+            You can find it in the file <strong>APIKEY.txt</strong> at the root of your Etherpad Lite
+            installation
+          </li>
+          <li><strong>base_domain</strong>: This is the common part of your domain between VROOM and Etherpad Lite.
+            For example, if you have VROOM running on https://vroom.example.net/ and Etherpad-Lite as
+            https://pads.example.net, you'd put <kbd>base_domain = 'example.net'</kbd> here
+          </li>
         </ul>
       </p>
 
@@ -446,8 +704,13 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
       <p>
         Controls where to find some specific directories
         <ul>
-          <li><strong>cache</strong>: This is where VROOM will store its cache (including auto generated and compressed assets like JS and CSS bundles)</li>
-          <li><strong>tmp</strong>: This is where VROOM will store temp data like XLSX files when exporting events</li>
+          <li>
+            <strong>cache</strong>: This is where VROOM will store its cache (including auto generated and
+            compressed assets like JS and CSS bundles)
+          </li>
+          <li>
+            <strong>tmp</strong>: This is where VROOM will store temp data like XLSX files when exporting events
+          </li>
         </ul>
       </p>
 
@@ -457,16 +720,35 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
       <p>
         Controls how VROOM daemon behaves. The following settings are available
         <ul>
-          <li><strong>listen_ip</strong>: This is the IP the daemon will listen on. Most of the time, you'll let <strong>127.0.0.1</strong> here as VROOM will
-            be accessed through a reverse proxy</li>
-          <li><strong>listen_port</strong>: The port VROOM daemon will bind to. Default is <strong>8090</strong>. Just be sure to adjust your reverse proxy
-            configuration if you change this.</li>
-          <li><strong>backend</strong>: The backend used to run VROOM. Can be either
-            <a href="http://mojolicio.us/perldoc/Mojo/Server/Morbo" target="_blank"><strong>morbo</strong></a> (recommended for developments) or
-            <a href="http://mojolicio.us/perldoc/Mojo/Server/Hypnotoad" target="_blank"><strong>hypnotoad</strong></a> (recommanded for production).</li>
-          <li><strong>log_level</strong>: Set the logging level. Can be one of <strong>debug</strong>, <strong>info</strong>, <strong>warn</strong>,
-            <strong>error</strong> or <strong>fatal</strong></li>
-          <li><strong>pid_file</strong>: Where to store the PID file of VROOM daemon (has no effect when using the morbo backend)</li>
+          <li>
+            <strong>listen_ip</strong>: This is the IP the daemon will listen on. Most of the time, you'll let
+            <strong>127.0.0.1</strong> here as VROOM will be accessed through a reverse proxy
+          </li>
+          <li>
+            <strong>listen_port</strong>: The port VROOM daemon will bind to. Default is <strong>8090</strong>.
+            Just be sure to adjust your reverse proxy configuration if you change this.
+          </li>
+          <li>
+            <strong>backend</strong>: The backend used to run VROOM. Can be either
+            <a href="http://mojolicio.us/perldoc/Mojo/Server/Morbo"
+               target="_blank">
+              <strong>morbo</strong>
+            </a>
+            (recommended for developments) or
+            <a href="http://mojolicio.us/perldoc/Mojo/Server/Hypnotoad"
+              target="_blank">
+              <strong>hypnotoad</strong>
+            </a>
+            (recommanded for production).
+          </li>
+          <li>
+            <strong>log_level</strong>: Set the logging level. Can be one of <strong>debug</strong>,
+            <strong>info</strong>, <strong>warn</strong>, <strong>error</strong> or <strong>fatal</strong>
+          </li>
+          <li>
+            <strong>pid_file</strong>: Where to store the PID file of VROOM daemon (has no effect when using
+            the morbo backend)
+          </li>
         </ul>
       </p>
 
@@ -475,8 +757,18 @@ cp /opt/vroom/conf/settings.ini.dist /opt/vroom/conf/settings.ini</pre>
         Setup coturn or rfc5766-turn-server
       </h1>
       <p>
-        You can run any TURN server you want, but VROOM is mainly tested <a href="https://code.google.com/p/rfc5766-turn-server/" target="_blank">rfc5766-turn-server</a>
-        or <a href="https://code.google.com/p/coturn/" target="_blank">coturn</a> (which are very similar). The reference instance https://vroom.im is using coturn.
+        You can run any TURN server you want, but VROOM has only been tested with
+        <a href="https://code.google.com/p/rfc5766-turn-server/"
+           target="_blank">
+          rfc5766-turn-server
+        </a>
+        and
+        <a href="https://code.google.com/p/coturn/"
+           target="_blank">
+          coturn
+        </a>
+        (which are very similar).
+        The reference instance https://vroom.im is using coturn.
         To make use of it, follow those steps
       </p>
 
@@ -522,13 +814,25 @@ EOF</pre>
       </p>
       <div class="alert alert-warning">
         <ul>
-          <li>An SSL certificate is needed for everything to work correctly and securely (<strong>/etc/turnserver/cert.pem</strong> and <strong>/etc/turnserver/key.pem</strong> in this example)</li>
-          <li>Both key and certificate must be readable by turnserver user and/or group</li>
-          <li>You can comment no-tcp, no-udp and alt-tls-listening-port if you want to test without encryption</li>
-          <li>If you have intermediate(s) CA, you have to put them in the cert.pem file, but after your certificate</li>
-          <li>In this example, the turn server will use TURN REST API compatible authentication, so you must set
-            <kbd>credentials='rest'</kbd> and <kbd>secret_key='SuperSecretPassword'</kbd> in the <strong>turn</strong> section of VROOM's <strong>settings.ini</strong>
-          </li> 
+          <li>
+            An SSL certificate is needed for everything to work correctly and securely
+            (<strong>/etc/turnserver/cert.pem</strong> and <strong>/etc/turnserver/key.pem</strong>
+            in this example)
+          </li>
+          <li>
+            Both key and certificate must be readable by turnserver user and/or group
+          </li>
+          <li>
+            You can comment no-tcp, no-udp and alt-tls-listening-port if you want to test without encryption
+          </li>
+          <li>
+            If you have intermediate(s) CA, you have to put them in the cert.pem file, but after your certificate
+          </li>
+          <li>
+            In this example, the turn server will use TURN REST API compatible authentication, so you must set
+            <kbd>credentials='rest'</kbd> and <kbd>secret_key='SuperSecretPassword'</kbd> in the <strong>turn</strong>
+            section of VROOM's <strong>settings.ini</strong>
+          </li>
         </ul>
       </div>
 
@@ -550,8 +854,12 @@ journalctl -fl -u turnserver.service</pre>
       <div class="alert alert-warning">
         Configuration of your firewall is out of scope for this doc, but you have to ensure the following ports are open:
         <ul>
-          <li>TCP 3478, 3479, 5349, 5350 and 49152 to 65535</li>
-          <li>UDP 3478, 3479, 5349, 5350 and 49152 to 65535</li>
+          <li>
+            TCP 3478, 3479, 5349, 5350 and 49152 to 65535
+          </li>
+          <li>
+            UDP 3478, 3479, 5349, 5350 and 49152 to 65535
+          </li>
         </ul>
         If you use <strong>firewalld</strong> you can open the correct ports with the following commands
         <pre>
@@ -589,7 +897,8 @@ firewall-cmd --permanent \\
         Etherpad-Lite integration
       </h1>
       <p>
-        If you want to integrate VROOM with Etherpad-Lite, you'll have to get your instance running. First, install the dependencies
+        If you want to integrate VROOM with Etherpad-Lite, you'll have to get your instance running.
+        First, install the dependencies
         <pre>
 yum groupinstall "Development Tools"</pre>
         Then, Create a user, clone the repository and prepare the config
@@ -603,9 +912,15 @@ cp -a etherpad-lite/settings.json.template etherpad-lite/settings.json</pre>
       <div class="alert alert-warning">
         Adapt /opt/etherpad-lite/settings.json to your need. The important settings are
         <ul>
-          <li><kbd>"requireSession" : true</kbd></li>
-          <li><kbd>"editOnly" : true</kbd></li>
-          <li><kbd>"requireAuthentication": false</kbd></li>
+          <li>
+            <kbd>"requireSession" : true</kbd>
+          </li>
+          <li>
+            <kbd>"editOnly" : true</kbd>
+          </li>
+          <li>
+            <kbd>"requireAuthentication": false</kbd>
+          </li>
         </ul>
       </div>
       <p>
@@ -631,7 +946,8 @@ _EOF
 systemctl daemon-reload
 systemctl enable etherpad
 systemctl start etherpad</pre>
-        And uncomment the corresponding lines in your httpd configuration (/etc/httpd/conf.d/vroom_alias.conf or /etc/httpd/conf.d/vroom_vhost.conf)
+        And uncomment the corresponding lines in your httpd configuration
+        (/etc/httpd/conf.d/vroom_alias.conf or /etc/httpd/conf.d/vroom_vhost.conf)
       </p>
       
 
@@ -663,13 +979,14 @@ cp -a /opt/vroom/templates/default /opt/vroom/templates/my_template</pre>
         Restart VROOM so the configuration change is applied
         <pre>
 systemctl restart vroom.service</pre>
-        And you can start modifying your template.
+        And you can start modifying your templates.
         <div class="alert alert-danger">
-          As VROOM is still in early development, you'll have to closely follow how the default templates evolve and merge the changes in your own template
+          As VROOM is still in early development, you'll have to closely follow how the default templates
+          evolve and merge the changes in your own template
         </div>
         <div class="alert alert-warning">
-          While working on your new template, it's recommanded to switch to the <strong>morbo</strong> backend as templates will be 
-          reloaded automatically after each modification
+          While working on your new template, it's recommanded to switch to the
+          <strong>morbo</strong> backend as templates will be reloaded automatically after each modification
         </div>
       </p>
 
@@ -678,7 +995,8 @@ systemctl restart vroom.service</pre>
         Admin area
       </h1>
       <p>
-        The admin area is available on /vroom/admin or /admin (depending on how you have configured your web server). 
+        The admin area is available on /vroom/admin or /admin
+        (depending on how you have configured your web server). 
         <div class="alert alert-danger">
           Once again: There's no builtin auth mechanism, your web server must protect this URI
         </div>
@@ -689,8 +1007,9 @@ systemctl restart vroom.service</pre>
         Room Management
       </h2>
       <p>
-        This page lists all the existing rooms wih some important informations (creation date, last activity, number of participants) and
-        three buttons to manage each room (join, configure, delete)
+        This page lists all the existing rooms wih some important informations
+        (creation date, last activity, number of participants) and three buttons to manage each room
+        (join, configure, delete)
       </p>
 
       <h2 id="audit">
@@ -699,21 +1018,38 @@ systemctl restart vroom.service</pre>
       <p>
         This page is to consult audit logs. Every important event in VROOM is logged
         <ul>
-          <li>On stdout (ideally captured by systemd's Journal or similar)</li>
-          <li>In the audit table</li>
+          <li>
+            On stdout (ideally captured by systemd's Journal or similar)
+          </li>
+          <li>
+            In the audit table
+          </li>
         </ul>
         Each event is composed of the following:
         <ul>
-          <li><strong>ID</strong>: It's just a unique ID for each event</li>
-          <li><strong>Date</strong>: the date and time of the event</li>
-          <li><strong>IP Address</strong>: The IP address of the user</li>
-          <li><strong>Event</strong>: The type of event (see below)</li>
-          <li><strong>User</strong>: The login of the user</li>
-          <li><strong>Message</strong>: A human readable information describing the event</li>
+          <li>
+            <strong>ID</strong>: It's just a unique ID for each event
+          </li>
+          <li>
+            <strong>Date</strong>: the date and time of the event
+          </li>
+          <li>
+            <strong>IP Address</strong>: The IP address of the user
+          </li>
+          <li>
+            <strong>Event</strong>: The type of event (see below)
+          </li>
+          <li>
+            <strong>User</strong>: The login of the user
+          </li>
+          <li>
+            <strong>Message</strong>: A human readable information describing the event
+          </li>
         </ul>
         <div class="alert alert-warning">
-          As all other dates, event dates are stored in the database in UTC and converted in local time when displayed. If you access
-          directly the database to check the events, you'll have to do the conversion yourself
+          As all other dates, event dates are stored in the database in UTC and converted in local time when displayed.
+          If you access directly the database to check the events, you'll have to do the conversion yourself. The dates
+          also are in UTC in the XLSX exports of events
         </div>
         <div class="panel panel-default">
           <div class="panel-heading">
@@ -723,90 +1059,175 @@ systemctl restart vroom.service</pre>
         <table class="table">
           <thead>
             <tr>
-              <th>Event type</th>
-              <th>Signification</th>
+              <th>
+                Event type
+              </th>
+              <th>
+                Signification
+              </th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>session_create</td>
-              <td>A new cookie based session is created</td>
+              <td>
+                session_create
+              </td>
+              <td>
+                A new cookie based session is created
+              </td>
             </tr>
             <tr>
-              <td>session_destroy</td>
-              <td>A session is destroyed. Usually the user explicitely quit a room
+              <td>
+                session_destroy
+              </td>
+              <td>
+                A session is destroyed. Usually the user explicitely quit a room
+              </td>
             </tr>
             <tr>
-              <td>room_create</td>
-              <td>A new room is created</td>
+              <td>
+                room_create
+              </td>
+              <td>
+                A new room is created
+              </td>
             </tr>
             <tr>
-              <td>room_modify</td>
-              <td>Room configuration is modified</td>
+              <td>
+                room_modify
+              </td>
+              <td>
+                Room configuration is modified
+              </td>
             </tr>
             <tr>
-              <td>peer_role</td>
-              <td>The role of a peer is changing (after authentication or being promoted to an owner of a room)</td>
+              <td>
+                peer_role
+              </td>
+              <td>
+                The role of a peer is changing (after authentication or being promoted to an owner of a room)
+              </td>
             </tr>
             <tr>
-              <td>room_expire</td>
-              <td>A room is being deleted because it showed no activity for too long</td>
+              <td>
+                room_expire
+              </td>
+              <td>
+                A room is being deleted because it showed no activity for too long
+              </td>
             </tr>
             <tr>
-              <td>room_delete</td>
-              <td>A room is being deleted by a user action</td>
+              <td>
+                room_delete
+              </td>
+              <td>
+                A room is being deleted by a user action
+              </td>
             </tr>
             <tr>
-              <td>email_notification_change</td>
-              <td>The list of email being notified when someone joins a room has been updated</td>
+              <td>
+                email_notification_change
+              </td>
+              <td>
+                The list of email being notified when someone joins a room has been updated
+              </td>
             </tr>
             <tr>
-              <td>send_invitation</td>
-              <td>An email invitation to join the room is being sent</td>
+              <td>
+                send_invitation
+              </td>
+              <td>
+                An email invitation to join the room is being sent
+              </td>
             </tr>
             <tr>
-              <td>invitation_response</td>
-              <td>Response to an invitation received</td>
+              <td>
+                invitation_response
+              </td>
+              <td>
+                Response to an invitation received
+              </td>
             </tr>
             <tr>
-              <td>invalidate_invitation</td>
-              <td>An invitation has been used, so is marked as invalide (invitations are only usable once)</td>
+              <td>
+                invalidate_invitation
+              </td>
+              <td>
+                An invitation has been used, so is marked as invalide (invitations are only usable once)
+              </td>
             </tr>
             <tr>
-              <td>pad_create</td>
-              <td>A pad (Etherpad-Lite) is created</td>
+              <td>
+                pad_create
+              </td>
+              <td>
+                A pad (Etherpad-Lite) is created
+              </td>
             </tr>
             <tr>
-              <td>admin_key</td>
-              <td>An API Key aquire admin privileges. Usually this happens when a user access /admin for the first time with this session</td>
+              <td>
+                admin_key
+              </td>
+              <td>
+                An API Key aquires admin privileges.
+                Usually this happens when a user access /admin for the first time with this session
+              </td>
             </tr>
             <tr>
-              <td>peer_id_mismatch</td>
-              <td>Connection to the signaling channel attempted with a wrong peer ID</td>
+              <td>
+                peer_id_mismatch
+              </td>
+              <td>
+                Connection to the signaling channel attempted with a wrong peer ID
+              </td>
             </tr>
             <tr>
-              <td>no_role</td>
-              <td>Someone tried to join a room but has no valid role, so access is denied</td>
+              <td>
+                no_role
+              </td>
+              <td>
+                Someone tried to join a room but has no valid role, so access is denied
+              </td>
             </tr>
             <tr>
-              <td>member_off_limit</td>
-              <td>A peer is being denied because member limit is already reached</td>
+              <td>
+                member_off_limit
+              </td>
+              <td>
+                A peer is being denied because member limit is already reached
+              </td>
             </tr>
             <tr>
-              <td>room_join</td>
-              <td>A peer joins a room</td>
+              <td>
+                room_join
+              </td>
+              <td>
+                A peer joins a room
+              </td>
             </tr>
             <tr>
-              <td>room_leave</td>
-              <td>A peer leaves a room</td>
+              <td>
+                room_leave
+              </td>
+              <td>
+                A peer leaves a room
+              </td>
             </tr>
             <tr>
-              <td>api_action_denied</td>
-              <td>An API action has been denied</td>
+              <td>
+                api_action_denied
+              </td>
+              <td>
+                An API action has been denied
+              </td>
             </tr>
             <tr>
-              <td>api_action_allowed</td>
-              <td>An API action was allowed</td>
+              <td>
+                api_action_allowed
+              </td>
+              <td>
+                An API action was allowed
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/templates/default/error.html.ep b/templates/default/error.html.ep
index 99be24e..f957788 100644
--- a/templates/default/error.html.ep
+++ b/templates/default/error.html.ep
@@ -1,51 +1,50 @@
-% title $self->l('OOOPS');
+% title l('OOOPS');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="jumbotron alert-danger">
     <h2>
-      <%= l('ERROR_OCCURRED') %>
+      %= l('ERROR_OCCURRED')
     </h2>
     <p>
-      <%= $msg %>
+      %= $msg
     </p>
     <div class="row">
       <div class="col-sm-6 col-lg-4 col-xl-3">
-        <a class="btn btn-primary btn-lg btn-full" role="button" href="<%= $self->url_for('/') %>">
-          <%= l('BACK_TO_MAIN_MENU') %>
+        <a class="btn btn-primary btn-lg btn-full"
+           href="<%= url_for('/') %>">
+          %= l('BACK_TO_MAIN_MENU')
         </a>
       </div>
       <div class="col-sm-6 col-lg-4 col-xl-3">
-        <% if ($err eq 'ERROR_NAME_CONFLICT'){ %>
-        <a class="btn btn-default btn-lg btn-full" role="button" href="<%= $self->url_for("/$room") %>">
-          <%= l('JOIN_THIS_ROOM') %>
+        % if ($err eq 'ERROR_NAME_CONFLICT'){
+        <a class="btn btn-default btn-lg btn-full"
+           href="<%= url_for("/$room") %>">
+          %= l('JOIN_THIS_ROOM')
         </a>
-        <% } elsif ($err eq 'WRONG_PASSWORD'){ %>
-        <a class="btn btn-default btn-lg btn-full" role="button" href="<%= $self->url_for("/password/$room") %>">
-          <%= l('TRY_AGAIN') %>
-        </a>
-        <% } elsif ($err eq 'ERROR_ROOM_s_LOCKED' && stash 'ownerPass'){ %>
-        <a class="btn btn-default btn-lg btn-full" role="button" href="<%= $self->url_for("/password/$room") %>">
-          <%= l('AUTH_IF_OWNER') %>
-        </a>
-        <% } elsif ($err eq 'ERROR_ROOM_s_DOESNT_EXIST'){ %>
-        <button class="btn btn-default btn-lg btn-full" style="width: 100%" type="submit" form="createRoom">
-          <%= l('CREATE_THIS_ROOM') %>
+        % } elsif ($err eq 'ERROR_ROOM_s_DOESNT_EXIST'){
+        <button class="btn btn-default btn-lg btn-full"
+                type="submit" form="createRoom">
+          %= l('CREATE_THIS_ROOM')
         </button>
-        <% } %>
+        % }
       </div>
     </div>
-    <% if ($err eq 'ERROR_ROOM_s_DOESNT_EXIST'){ %>
+    % if ($err eq 'ERROR_ROOM_s_DOESNT_EXIST'){
     <form id="createRoom">
-      <input type="text" id="roomName" name="roomName" value="<%= $room %>" hidden/>
+      <input type="text"
+             id="roomName"
+             name="roomName"
+             value="<%= $room %>"
+             hidden />
     </form>
-    <% } %>
+    % }
   </div>
 </div>
 %= include 'js_common'
-    <script>
-      $(document).ready(function() {
-        initIndex();
-      });
-    </script>
+<script>
+  $(document).ready(function() {
+    initIndex();
+  });
+</script>
 %= include 'footer'
diff --git a/templates/default/exception.html.ep b/templates/default/exception.html.ep
index 617c76e..22e9e11 100644
--- a/templates/default/exception.html.ep
+++ b/templates/default/exception.html.ep
@@ -1,4 +1,4 @@
-% stash msg => $self->l('SERVER_ERROR');
-% stash err => 'server_error';
+% stash msg  => l('SERVER_ERROR');
+% stash err  => 'server_error';
 % stash room => '';
-%=include 'error'
+%= include 'error'
diff --git a/templates/default/feedback.html.ep b/templates/default/feedback.html.ep
index dd0e601..7cc7383 100644
--- a/templates/default/feedback.html.ep
+++ b/templates/default/feedback.html.ep
@@ -1,31 +1,45 @@
-% title $self->l('FEEDBACK');
+% title l('FEEDBACK');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="well publicForm">
-    <form role="form" action="<%= $self->url_for('/feedback') %>" method="post">
+    <form action="<%= url_for('/feedback') %>">
       <legend class=text-center">
-        <%= l('GIVE_US_YOUR_FEEDBACK') %>
+        %= l('GIVE_US_YOUR_FEEDBACK')
       </legend>
       <center>
-        <%= l('YOUR_FEEDBACK_HELPS_US') %>
+        %= l('YOUR_FEEDBACK_HELPS_US')
       </center>
       <br>
       <div class="form-group">
-        <label for="email"><%= l('YOUR_MAIL_OPTIONAL') %></label>
-        <input type="email" class="form-control" id="email" name="email" placeholder="<%= l('EMAIL_PLACEHOLDER') %>">
+        <label for="email">
+          %= l('YOUR_MAIL_OPTIONAL')
+        </label>
+        <input type="email"
+               class="form-control"
+               id="email"
+               name="email"
+               placeholder="<%= l('EMAIL_PLACEHOLDER') %>">
       </div>
       <div class="form-group">
         <label for="comment">
-          <%= l('COMMENT') %>
+          %= l('COMMENT')
         </label>
-        <textarea id="comment" name="comment" class="form-control" rows="10" placeholder="<%= l('VROOM_IS_AWESOME') %>" required></textarea>
+        <textarea id="comment"
+                  name="comment"
+                  class="form-control"
+                  rows="10"
+                  placeholder="<%= l('VROOM_IS_AWESOME') %>"
+                  required>
+        </textarea>
       </div>
-      <button type="submit" class="btn btn-primary">
-        <%= l('SUBMIT') %>
+      <button type="submit"
+              class="btn btn-primary">
+        %= l('SUBMIT')
       </button>
-      <a href="<%= $self->url_for('/') %>" class="btn btn-default">
-        <%= l('CANCEL') %>
+      <a href="<%= url_for('/') %>"
+         class="btn btn-default">
+        %= l('CANCEL')
       </a>
     </form>
   </div>
diff --git a/templates/default/feedback.mail.ep b/templates/default/feedback.mail.ep
index cae8ac3..594dfbb 100644
--- a/templates/default/feedback.mail.ep
+++ b/templates/default/feedback.mail.ep
@@ -8,7 +8,6 @@
   <p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">
     &mdash;
     <br>
-    <%= l('EMAIL_SIGN') %>
+    %= l('EMAIL_SIGN')
   </p>
 </html>
-
diff --git a/templates/default/feedback_thanks.html.ep b/templates/default/feedback_thanks.html.ep
index 9d00f8d..858b90f 100644
--- a/templates/default/feedback_thanks.html.ep
+++ b/templates/default/feedback_thanks.html.ep
@@ -1,16 +1,22 @@
-% title $self->l('FEEDBACK');
+% title l('FEEDBACK');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <br/>
   <div class="jumbotron">
-    <h2><%= l('THANK_YOU') %></h2>
-    <p><%= l('THANKS_FOR_YOUR_FEEDBACK') %></p>
+    <h2>
+      %= l('THANK_YOU')
+    </h2>
+    <p>
+      %= l('THANKS_FOR_YOUR_FEEDBACK')
+    </p>
     <div class='btn-group'>
-      <a class="btn btn-primary btn-lg" role="button" href="<%= $self->url_for('/') %>"><%= l('BACK_TO_MAIN_MENU') %></a>
+      <a class="btn btn-primary btn-lg"
+         href="<%= url_for('/') %>">
+       %= l('BACK_TO_MAIN_MENU')
+      </a>
     </div>
   </div>
 </div>
 %= include 'js_common'
 %= include 'footer'
-
diff --git a/templates/default/footer.html.ep b/templates/default/footer.html.ep
index 2e52783..164270c 100644
--- a/templates/default/footer.html.ep
+++ b/templates/default/footer.html.ep
@@ -2,10 +2,15 @@
   <div id="footerContainer">
     <div class="container-fluid footer">
       <div class="col-xs-6">
-        <p class="text-muted pull-left"><%== l('VROOM_IS_FREE_SOFTWARE') %></p>
+        <p class="text-muted pull-left">
+          %== l('VROOM_IS_FREE_SOFTWARE')
+        </p>
       </div>
       <div class="col-xs-6">
-        <p class="text-muted pull-right brand"><%= l('POWERED_BY') %> <%== $config->{'interface.powered_by'} %></p>
+        <p class="text-muted pull-right brand">
+          %= l('POWERED_BY')
+          %== $config->{'interface.powered_by'}
+        </p>
       </div>
     </div>
   </div>
diff --git a/templates/default/goodbye.html.ep b/templates/default/goodbye.html.ep
index 7a2a3a2..749d84a 100644
--- a/templates/default/goodbye.html.ep
+++ b/templates/default/goodbye.html.ep
@@ -1,24 +1,26 @@
-% title $self->l('GOODBYE');
+% title l('GOODBYE');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <br/>
   <div class="jumbotron">
     <h2>
-      <%= l('THANKS_SEE_YOU_SOON') %>
+      %= l('THANKS_SEE_YOU_SOON')
     </h2>
     <p>
-      <%= l('THANKS_FOR_USING') %>
+      %= l('THANKS_FOR_USING')
     </p>
     <div class='row'>
       <div class="col-sm-6 col-lg-4 col-xl-3">
-        <a class="btn btn-primary btn-lg btn-full" role="button" href="<%= $self->url_for('/') %>">
-          <%= l('BACK_TO_MAIN_MENU') %>
+        <a class="btn btn-primary btn-lg btn-full"
+           href="<%= url_for('/') %>">
+          %= l('BACK_TO_MAIN_MENU')
         </a>
       </div>
       <div class="col-sm-6 col-lg-4 col-xl-3">
-        <a class="btn btn-default btn-lg btn-full" role="button" href="<%= $self->url_for('/feedback') %>">
-          <%= l('GIVE_US_YOUR_FEEDBACK') %>
+        <a class="btn btn-default btn-lg btn-full"
+           href="<%= url_for('/feedback') %>">
+          %= l('GIVE_US_YOUR_FEEDBACK')
         </a>
       </div>
     </div>
diff --git a/templates/default/header.html.ep b/templates/default/header.html.ep
index f0dbe6a..e0799ca 100644
--- a/templates/default/header.html.ep
+++ b/templates/default/header.html.ep
@@ -1,15 +1,27 @@
 <!DOCTYPE html>
-<html lang="<%= $self->languages %>">
+<html lang="<%= languages %>">
 <head>
-  <title><%= $title %></title>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <meta name="description" content=" <%= l('VROOM_DESC') %>" />
+  <title>
+    %= $title
+  </title>
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1" />
+  <meta name="description"
+        content="<%= l('VROOM_DESC') %>" />
   <%
-    my @css = qw(bootstrap.css bootstrap-switch.css toc-scroll.css bootstrap-datepicker3.css vroom.css);
-    @css = map { $self->url_for('/') . 'css/' . $_ } @css;
+    my @css = qw(
+      bootstrap.css
+      bootstrap-switch.css
+      toc-scroll.css
+      bootstrap-datepicker3.css
+      vroom.css
+    );
+    @css = map { url_for('/css/' . $_) } @css;
   %>
-  <%=css @css %>
-  <link rel="icon" type="image/png" href="<%= $self->url_for('/img/favicon.png') %>" />
+  %= css @css
+  <link rel="icon"
+        type="image/png"
+        href="<%= url_for('/img/favicon.png') %>" />
 </head>
 <body>
   <div id="wrap">
diff --git a/templates/default/index.html.ep b/templates/default/index.html.ep
index 1f333fa..424e37c 100644
--- a/templates/default/index.html.ep
+++ b/templates/default/index.html.ep
@@ -1,4 +1,4 @@
-% title $self->l('WELCOME');
+% title l('WELCOME');
 %= include 'header'
 %= include 'public_toolbar'
 
@@ -6,47 +6,70 @@
 %= include 'noscript'
   <div class="well publicForm">
     <h1 class="text-center">
-      <%= l('CREATE_ROOM') %>
+      %= l('CREATE_ROOM')
     </h1>
-    <form id="createRoom" class="form-horizontal">
+    <form id="createRoom"
+          class="form-horizontal">
       <fieldset>
         <div class="input-group input-group-lg">
           <span class="input-group-addon hidden-xs">
             <strong class="text-muted">
-              <%
-                my $url = $self->url_for('/')->to_abs;
-                $url =~ s/^https?:\/\///;
-                $url .= ($url =~ m/\/$/)? '':'/';
-              %>
-              <%= $url %>
+              %= $self->req->url->to_abs->host_port . $self->req->url->path
             </strong>
           </span>
           <div class="control-group">
-            <input id="roomName" name="roomName" type="text" placeholder="<%= l('ROOM_NAME') %>" class="form-control input-lg help" data-toggle="tooltip" data-placement="bottom" title="<%= l('RANDOM_IF_EMPTY') %>" autofocus>
+            <input id="roomName"
+                   name="roomName"
+                   type="text"
+                   placeholder="<%= l('ROOM_NAME') %>"
+                   class="form-control input-lg help" data-toggle="tooltip"
+                   data-placement="bottom"
+                   title="<%= l('RANDOM_IF_EMPTY') %>"
+                   autofocus>
           </div>
           <span class="input-group-btn">
-            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
+            <button type="submit"
+                    class="btn btn-default">
+              <span class="glyphicon glyphicon-log-in">
+              </span>
+            </button>
           </span>
         </div>
       </fieldset>
     </form>
   </div>
-  <div class="modal fade" role="dialog" id="conflictModal" aria-labelledby="conflictModal" aria-hidden="true">
+  <div class="modal fade"
+       id="conflictModal"
+       aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title"><%= l('THIS_ROOM_ALREADY_EXISTS') %></h4>
+          <button class="close"
+                  data-dismiss="modal">
+            &times;
+          </button>
+          <h4 class="modal-title">
+            %= l('THIS_ROOM_ALREADY_EXISTS')
+          </h4>
         </div>
         <div class="modal-body">
-          <div class="panel" id="confirmJoinForm">
-            <label><%= l('CONFIRM_OR_CHOOSE_ANOTHER_NAME') %></label>
+          <div class="panel"
+               id="confirmJoinForm">
+            <label>
+              %= l('CONFIRM_OR_CHOOSE_ANOTHER_NAME')
+            </label>
             <div class="btn-group btn-group-justified">
               <div class="btn-group">
-                <button class="btn btn-primary" id="confirmJoinButton"><%= l('JOIN_THIS_ROOM') %></button>
+                <button class="btn btn-primary"
+                        id="confirmJoinButton">
+                  %= l('JOIN_THIS_ROOM')
+                </button>
               </div>
               <div class="btn-group">
-                <button class="btn btn-default" id="chooseAnotherNameButton"><%= l('CHOOSE_ANOTHER_NAME') %></button>
+                <button class="btn btn-default"
+                        id="chooseAnotherNameButton">
+                  %= l('CHOOSE_ANOTHER_NAME')
+                </button>
               </div>
             </div>
           </div>
@@ -56,127 +79,152 @@
   </div>
   <br/><br/>
   <div class="row">
-    <div id="carouselIndexContainer" class="col-md-8 col-md-offset-2 col-xl-6 col-xl-offset-3 thumbnail">
-      <div id="carouselIndex" class="carousel slide" data-ride="carousel">
+    <div id="carouselIndexContainer"
+         class="col-md-8 col-md-offset-2 col-xl-6 col-xl-offset-3 thumbnail">
+      <div id="carouselIndex"
+           class="carousel slide"
+           data-ride="carousel">
         <ol class="carousel-indicators carouselIndexIndicator">
-          <li data-target="#carouselIndex" data-slide-to="0" class="active"></li>
-          <li data-target="#carouselIndex" data-slide-to="1"></li>
-          <li data-target="#carouselIndex" data-slide-to="2"></li>
-          <li data-target="#carouselIndex" data-slide-to="3"></li>
-          <li data-target="#carouselIndex" data-slide-to="4"></li>
-          <li data-target="#carouselIndex" data-slide-to="5"></li>
-          <li data-target="#carouselIndex" data-slide-to="6"></li>
-          <% if ($self->get_opt_features->{etherpad}){ %>
-          <li data-target="#carouselIndex" data-slide-to="7"></li>
-          <% } %>
+          <li data-target="#carouselIndex"
+              data-slide-to="0" class="active">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="1">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="2">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="3">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="4">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="5">
+          </li>
+          <li data-target="#carouselIndex"
+              data-slide-to="6">
+          </li>
+          % if (get_opt_features->{etherpad}){
+          <li data-target="#carouselIndex"
+              data-slide-to="7">
+          </li>
+          % }
         </ol>
-        <div id="carouselIndexContent" class="carousel-inner">
+        <div id="carouselIndexContent"
+             class="carousel-inner">
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/lock.png', alt => $self->l('SECURE'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/lock.png'), alt => l('SECURE'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('P2P_COMMUNICATION') %>
+              %= l('P2P_COMMUNICATION')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('SECURE') %>
+                %= l('SECURE')
               </h2>
             </div>
           </div>
           <div class="item active carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/universal.png', alt => $self->l('WORKS_EVERYWHERE'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/universal.png'), alt => l('WORKS_EVERYWHERE'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('MODERN_BROWSERS') %>
+              %= l('MODERN_BROWSERS')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('WORKS_EVERYWHERE') %>
+                %= l('WORKS_EVERYWHERE')
               </h2>
             </div>
           </div>
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/multi.png', alt => $self->l('MULTI_USER'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/multi.png'), alt => l('MULTI_USER'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('THE_LIMIT_IS_YOUR_PIPE') %>
+              %= l('THE_LIMIT_IS_YOUR_PIPE')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('MULTI_USER') %>
+                %= l('MULTI_USER')
               </h2>
             </div>
           </div>
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/signin.png', alt => $self->l('NO_SIGNIN'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/signin.png'), alt => l('NO_SIGNIN'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('YOU_DONT_HAVE_TO_REGISTER') %>
+              %= l('YOU_DONT_HAVE_TO_REGISTER')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('NO_SIGNIN') %>
+                %= l('NO_SIGNIN')
               </h2>
             </div>
           </div>
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/clock.png', alt => $self->l('QUICK'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/clock.png'), alt => l('QUICK'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('STOP_WASTING_TIME') %>
+              %= l('STOP_WASTING_TIME')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('QUICK') %>
+                %= l('QUICK')
               </h2>
             </div>
           </div>
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/screen.png', alt => $self->l('SCREEN_SHARING'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/screen.png'), alt => l('SCREEN_SHARING'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('SHARE_DESKTOP_OR_WINDOW') %>
+              %= l('SHARE_DESKTOP_OR_WINDOW')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('SCREEN_SHARING') %>
+                %= l('SCREEN_SHARING')
               </h2>
             </div>
           </div>
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/chat.png', alt => $self->l('TEXT_CHAT'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/chat.png'), alt => l('TEXT_CHAT'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('SECURED_TEXT_CHAT') %>
+              %= l('SECURED_TEXT_CHAT')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('TEXT_CHAT') %>
+                %= l('TEXT_CHAT')
               </h2>
             </div>
           </div>
-          <% if ($self->get_opt_features->{etherpad}) { %>
+          % if (get_opt_features->{etherpad}) {
           <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
-            %= image '/img/note.png', alt => $self->l('COLLABORATIVE_NOTETAKING'), class => "img-responsive carouselLogo"
+            %= image url_for('/img/note.png'), alt => l('COLLABORATIVE_NOTETAKING'), class => "img-responsive carouselLogo"
             <p>
-              <%= l('TAKE_NOTE_IN_REALTIME') %>
+              %= l('TAKE_NOTE_IN_REALTIME')
             </p>
             <div class="carousel-caption hidden-xs carouselIndexCaption">
               <h2>
-                <%= l('COLLABORATIVE_NOTETAKING') %>
+                %= l('COLLABORATIVE_NOTETAKING')
               </h2>
             </div>
           </div>
-          <% } %>
+          % }
         </div>
-        <a class="left carousel-control" href="#carouselIndex" data-slide="prev">
-          <span class="glyphicon glyphicon-chevron-left"></span>
+        <a class="left carousel-control"
+           href="#carouselIndex"
+           data-slide="prev">
+          <span class="glyphicon glyphicon-chevron-left">
+          </span>
         </a>
-        <a class="right carousel-control" href="#carouselIndex" data-slide="next">
-          <span class="glyphicon glyphicon-chevron-right"></span>
+        <a class="right carousel-control"
+           href="#carouselIndex"
+           data-slide="next">
+          <span class="glyphicon glyphicon-chevron-right">
+          </span>
         </a>
       </div>
     </div>
   </div>
 </div>
 %= include 'js_common'
-    <script>
-      $(document).ready(function() {
-        initIndex();
-      });
-    </script>
-
+<script>
+  $(document).ready(function() {
+    initIndex();
+  });
+</script>
 %= include 'footer'
diff --git a/templates/default/invitation.html.ep b/templates/default/invitation.html.ep
index 004d144..8dee94e 100644
--- a/templates/default/invitation.html.ep
+++ b/templates/default/invitation.html.ep
@@ -1,47 +1,57 @@
-% title $self->l('INVITATION');
+% title l('INVITATION');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="well publicForm">
-    <form role="form" method="post">
+    <form>
       <legend class="text-center">
-        <%= l('INVITATION_RESPONSE') %>
+        %= l('INVITATION_RESPONSE')
       </legend>
       <p class="text-center">
-        <%= l('CANNOT_JOIN_NOW') %>
+        %= l('CANNOT_JOIN_NOW')
       </p>
       <div class="form-group">
         <label for="response">
-          <%= l('WILL_YOU_JOIN') %>
+          %= l('WILL_YOU_JOIN')
         </label>
-        <select name="response" id="response" class="form-control">
+        <select name="response"
+                id="response"
+                class="form-control">
           <option value="later">
-            <%= l('WILL_TRY_TO_JOIN_LATER') %>
+            %= l('WILL_TRY_TO_JOIN_LATER')
           </option>
-          <option value="decline" selected>
-            <%= l('WONT_BE_ABLE_TO_JOIN') %>
+          <option value="decline"
+                  selected>
+            %= l('WONT_BE_ABLE_TO_JOIN')
           </option>
         </select>
       </div>
       <div class="form-group">
         <label for="message">
-          <%= l('MESSAGE') %>
+          %= l('MESSAGE')
         </label>
-        <textarea name="message" id="message" class="form-control" rows="5" placeholder="<%= l('DONT_WAIT_FOR_ME') %>"></textarea>
+        <textarea name="message"
+                  id="message"
+                  class="form-control"
+                  rows="5"
+                  placeholder="<%= l('DONT_WAIT_FOR_ME') %>">
+        </textarea>
       </div>
       <div class="form-group">
         <label>
-          <%= l('YOU_CAN_STILL_CHANGE_YOUR_MIND') %>
+          %= l('YOU_CAN_STILL_CHANGE_YOUR_MIND')
         </label>
         <p>
-          <%= l('CLICK_SEND_OR_JOIN_NOW') %>
+          %= l('CLICK_SEND_OR_JOIN_NOW')
         </p>
       </div>
-        <a class="btn btn-default btn-lg" role="button" href="<%= $self->url_for("/$room") %><% if ($token ne ''){ %>?token=<%= $token %><% } %>">
-          <%= l('JOIN_THIS_ROOM') %>
+        <a class="btn btn-default btn-lg"
+           href="<%= Mojo::URL->new(url_for('/' . $room))->query(token => $token) %>">
+          %= l('JOIN_THIS_ROOM')
         </a>
-        <button type="submit" class="btn btn-primary btn-lg">
-          <%= l('SUBMIT') %>
+        <button type="submit"
+                class="btn btn-primary btn-lg">
+          %= l('SUBMIT')
         </button>
     </form>
   </div>
diff --git a/templates/default/invitation_thanks.html.ep b/templates/default/invitation_thanks.html.ep
index 4508a18..3fb1661 100644
--- a/templates/default/invitation_thanks.html.ep
+++ b/templates/default/invitation_thanks.html.ep
@@ -1,13 +1,20 @@
-% title $self->l('INVITATION');
+% title l('INVITATION');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <br/>
   <div class="jumbotron">
-    <h2><%= l('MESSAGE_SENT') %></h2>
-    <p><%= l('ORGANIZER_WILL_GET_YOUR_MESSAGE') %></p>
+    <h2>
+      %= l('MESSAGE_SENT')
+    </h2>
+    <p>
+      %= l('ORGANIZER_WILL_GET_YOUR_MESSAGE')
+    </p>
     <div class='btn-group'>
-      <a class="btn btn-primary btn-lg" role="button" href="<%= $self->url_for('/') %>"><%= l('BACK_TO_MAIN_MENU') %></a>
+      <a class="btn btn-primary btn-lg"
+         href="<%= url_for('/') %>">
+        %= l('BACK_TO_MAIN_MENU')
+      </a>
     </div>
   </div>
 </div>
diff --git a/templates/default/invite.mail.ep b/templates/default/invite.mail.ep
index 9ae5699..e3d4992 100644
--- a/templates/default/invite.mail.ep
+++ b/templates/default/invite.mail.ep
@@ -1,54 +1,55 @@
 <p>
-  <%= l('YOU_ARE_INVITED_TO_A_MEETING') %>
+  %= l('YOU_ARE_INVITED_TO_A_MEETING')
   <ul>
     <li>
-      <%= l('A_MODERN_BROWSER') %>
+      %= l('A_MODERN_BROWSER')
     </li>
     <li>
-      <%= l('A_WEBCAM') %>
+      %= l('A_WEBCAM')
     </li>
     <li>
-      <%= l('A_MIC') %>
+      %= l('A_MIC')
     </li>
   </ul>
 </p>
 <p>
-  <%= l('WHEN_YOU_ARE_READY') %>
+  %= l('WHEN_YOU_ARE_READY')
   <center>
     <h1>
       <%
-         my $link   = Mojo::URL->new($self->url_for($room)->to_abs)->scheme('https');
+         my $link   = Mojo::URL->new(url_for($room)->to_abs)->scheme('https');
          my $target = $link->clone;
          $target    = ($joinPass eq 'yes') ? $target->query(token => $token) : $target;
       %>
       <a href="<%= $target %>">
-        <%= $link %>
+        %= $link
       </a>
     </h1>
   </center>
 </p>
-<% if ($message && $message ne ''){ %>
+% if ($message && $message ne ''){
 <p>
   <%= l('MESSAGE_FROM_ORGANIZER') %>:
 </p>
 <p>
-  <%= $message %>
+  %= $message
 </p>
-<% } %>
+% }
 <p>
-  <%= l('IF_YOU_CANNOT_JOIN') %>
+  %= l('IF_YOU_CANNOT_JOIN')
     <h3>
-      <a style="color:red" href="<%= Mojo::URL->new($self->url_for('/invitation/' . $token)->to_abs)->scheme('https') %>">
-        <%= l('YOU_CAN_NOTIFY_THE_ORGANIZER') %>
+      <a style="color:red"
+         href="<%= Mojo::URL->new(url_for('/invitation/' . $token)->to_abs)->scheme('https') %>">
+        %= l('YOU_CAN_NOTIFY_THE_ORGANIZER')
       </a>
     </h3>
 </p>
 <br>
 <p>
-  <%= l('HAVE_A_NICE_MEETING') %>
+  %= l('HAVE_A_NICE_MEETING')
 </p>
 <p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">
   &mdash;
   <br>
-  <%= l('EMAIL_SIGN') %>
+  %= l('EMAIL_SIGN')
 </p>
diff --git a/templates/default/invite_modal.html.ep b/templates/default/invite_modal.html.ep
index ef041f4..a3d5a4b 100644
--- a/templates/default/invite_modal.html.ep
+++ b/templates/default/invite_modal.html.ep
@@ -1,25 +1,35 @@
-    <div class="modal fade" role="dialog" id="inviteModal" aria-labelledby="inviteModal" aria-hidden="true">
+    <div class="modal fade"
+         id="inviteModal"
+         aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('SEND_INVITE') %>
+              %= l('SEND_INVITE')
             </h4>
           </div>
           <div class="modal-body">
-            <form id="inviteEmail" class="form-horizontal" role="form">
+            <form id="inviteEmail"
+                  class="form-horizontal">
               <div class="form-group">
-                <label for="recipient" class="col-sm-4 control-label">
-                  <%= l('RECIPIENT') %>
+                <label for="recipient"
+                       class="col-sm-4 control-label">
+                  %= l('RECIPIENT')
                 </label>
-                <div class="col-sm-8 email-list" id="email-list-invite">
+                <div class="col-sm-8 email-list"
+                     id="email-list-invite">
                   <div class="email-entry input-group col-sm-8">
-                    <input class="form-control" autocomplete="off" name="invitation-recipients[]" type="text" placeholder="<%= l('EMAIL_PLACEHOLDER') %>" />
+                    <input class="form-control"
+                           autocomplete="off"
+                           name="invitation-recipients[]"
+                           type="text"
+                           placeholder="<%= l('EMAIL_PLACEHOLDER') %>">
                     <span class="input-group-btn">
-                      <button class="btn btn-primary btn-add-email" type="button">
+                      <button class="btn btn-primary btn-add-email">
                         <span class="glyphicon glyphicon-plus">
                         </span>
                       </button>
@@ -28,20 +38,28 @@
                 </div>
               </div>
               <div class="form-group">
-                <label for="message" class="col-sm-4 control-label">
-                  <%= l('MESSAGE') %>
+                <label for="message"
+                       class="col-sm-4 control-label">
+                  %= l('MESSAGE')
                 </label>
                 <div class="col-sm-8">
-                  <textarea id="message" name="message" class="form-control" placeholder="<%= l('MESSAGE') %>"></textarea>
+                  <textarea id="message"
+                            name="message"
+                            class="form-control"
+                            placeholder="<%= l('MESSAGE') %>">
+                  </textarea>
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-4 col-sm-8">
-                  <button type="submit" id="inviteEmailButton" class="btn btn-primary">
-                    <%= l('SUBMIT') %>
+                  <button type="submit"
+                          id="inviteEmailButton"
+                          class="btn btn-primary">
+                    %= l('SUBMIT')
                   </button>
-                  <button class="btn btn-default" data-dismiss="modal">
-                    <%= l('CANCEL') %>
+                  <button class="btn btn-default"
+                          data-dismiss="modal">
+                    %= l('CANCEL')
                   </button>
                 </div>
               </div>
@@ -50,4 +68,3 @@
         </div>
       </div>
     </div>
-
diff --git a/templates/default/join.html.ep b/templates/default/join.html.ep
index bafbfc4..d2fdcd8 100644
--- a/templates/default/join.html.ep
+++ b/templates/default/join.html.ep
@@ -1,9 +1,12 @@
 % title sprintf l('ROOM_s'), $room;
 %= include 'header'
   <div class="container-fluid">
-    <nav id="toolbar" class="navbar navbar-default" role="toolbar">
+    <nav id="toolbar"
+         class="navbar navbar-default">
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#roomToolBar">
+        <button class="navbar-toggle"
+                data-toggle="collapse"
+                data-target="#roomToolBar">
           <span class="sr-only">
           </span>
           <span class="icon-bar">
@@ -24,19 +27,32 @@
           </button>
         </div>
         <div class="btn-group visible-xs-block header-btn-group col-xs-push-1">
-          <button class="btn btn-lg btn-default help btn-logout navbar-btn" data-toggle="tooltip" data-placement="bottom" title="<%= l('LOGOUT') %>">
+          <button class="btn btn-lg btn-default help btn-logout navbar-btn"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('LOGOUT') %>">
             <span class="glyphicon glyphicon-log-out">
             </span>
           </button>
         </div>
       </div>
-      <input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/>
-      <div id="roomToolBar" class="collapse navbar-collapse">
+      <div id="roomToolBar"
+           class="collapse navbar-collapse">
         <div class="navbar-form navbar-btn-group navbar-left input-group">
           <div class="input-group">
-            <input type="text" id="displayName" class="form-control input-lg help" placeholder="<%= l('YOUR_NAME') %>" data-toggle="tooltip" data-placement="bottom" title="<%= l('NAME_SENT_TO_OTHERS') %>"/>
+            <input type="text"
+                   id="displayName"
+                   class="form-control input-lg help"
+                   placeholder="<%= l('YOUR_NAME') %>"
+                   data-toggle="tooltip"
+                   data-placement="bottom"
+                   title="<%= l('NAME_SENT_TO_OTHERS') %>">
             <span class="input-group-btn">
-              <button id="changeColorButton" class="btn btn-lg btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%= l('CHANGE_COLOR') %>">
+              <button id="changeColorButton"
+                      class="btn btn-lg btn-default help"
+                      data-toggle="tooltip"
+                      data-placement="bottom"
+                      title="<%= l('CHANGE_COLOR') %>">
                 <span class="glyphicon glyphicon-tag">
                 </span>
               </button>
@@ -44,66 +60,105 @@
           </div>
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs">
-          <button id="chatDropdown" class="btn btn-lg btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%= l('CLICK_TO_CHAT') %>">
+          <button id="chatDropdown"
+                  class="btn btn-lg btn-default collapsed help"
+                  data-toggle="collapse" data-target="#chatMenu"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('CLICK_TO_CHAT') %>">
             <span class="glyphicon glyphicon-comment">
             </span>
             <span class="badge" id="unreadMsg">
               0
             </span>
           </button>
-          <% if ($self->get_opt_features->{etherpad}){ %>
-          <button class="btn btn-lg btn-default help btn-etherpad" data-toggle="tooltip" data-placement="bottom" title="<%= l('OPEN_ETHERPAD') %>">
+          % if (get_opt_features->{etherpad}){
+          <button class="btn btn-lg btn-default help btn-etherpad"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('OPEN_ETHERPAD') %>">
             <span class="glyphicon glyphicon-pencil">
             </span>
           </button>
-        <% } %>
+        % }
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs">
-          <button class="btn btn-lg btn-default btn-mute-mic help" data-toggle="tooltip" data-placement="bottom" title="<%= l('MUTE_MIC') %>">
+          <button class="btn btn-lg btn-default btn-mute-mic help"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('MUTE_MIC') %>">
             <span class="glyphicon glyphicon-volume-off">
             </span>
           </button>
-          <button class="btn btn-lg btn-default btn-suspend-cam help" data-toggle="tooltip" data-placement="bottom" title="<%= l('SUSPEND_CAM') %>">
+          <button class="btn btn-lg btn-default btn-suspend-cam help"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('SUSPEND_CAM') %>">
             <span class="glyphicon glyphicon-facetime-video">
             </span>
           </button>
-          <button class="btn btn-lg btn-default help btn-share-screen" data-toggle="tooltip" data-placement="bottom" title="<%= l('SHARE_YOUR_SCREEN') %>">
+          <button class="btn btn-lg btn-default help btn-share-screen"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('SHARE_YOUR_SCREEN') %>">
             <span class="glyphicon glyphicon-blackboard">
             </span>
           </button>
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs aloneEl">
-          <button class="btn btn-lg btn-default btn-moh help" data-toggle="tooltip" data-placement="bottom" title="<%= l('WAIT_WITH_MUSIC') %>">
+          <button class="btn btn-lg btn-default btn-moh help"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('WAIT_WITH_MUSIC') %>">
             <span class="glyphicon glyphicon-music">
             </span>
           </button>
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left">
           <div class="btn-group ownerEl">
-            <button class="btn btn-lg btn-default help" type="button" data-toggle="modal" data-target="#inviteModal" data-toggle="tooltip" data-placement="bottom" title="<%= l('INVITE_PEOPLE') %>">
+            <button class="btn btn-lg btn-default help"
+                    data-toggle="modal"
+                    data-target="#inviteModal"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    title="<%= l('INVITE_PEOPLE') %>">
               <span class="glyphicon glyphicon-user">
               </span>
             </button>
           </div>
           <div class="btn-group ownerEl">
-            <button class="btn btn-lg btn-default help" type="button" data-toggle="modal" data-target="#configureModal" data-toggle="tooltip" data-placement="bottom" title="<%= l('CONFIGURE') %>">
+            <button class="btn btn-lg btn-default help"
+                    data-toggle="modal"
+                    data-target="#configureModal"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    title="<%= l('CONFIGURE') %>">
               <span class="glyphicon glyphicon-cog">
               </span>
             </button>
           </div>
         </div>
         <div class="btn-group navbar-form navbar-btn-group navbar-left">
-          <button class="btn btn-lg btn-default dropdown-toggle help unauthEl" data-toggle="modal" data-target="#ownerAuthModal" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%= l('AUTHENTICATE') %>">
+          <button class="btn btn-lg btn-default dropdown-toggle help unauthEl"
+                  data-toggle="modal"
+                  data-target="#ownerAuthModal"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="<%= l('AUTHENTICATE') %>">
             <span class="glyphicon glyphicon-log-in">
             </span>
           </button>
         </div>
-        <div class="navbar-form navbar-btn-group navbar-right hidden-xs" data-toggle="buttons" >
+        <div class="navbar-form navbar-btn-group navbar-right hidden-xs"
+             data-toggle="buttons" >
           <div class="btn-group">
             <div id="timeCounter" class="btn btn-lg btn-default disabled">
               00:00
             </div>
-            <button class="btn btn-lg btn-default help btn-logout" data-toggle="tooltip" data-placement="bottom" title="<%= l('LOGOUT') %>">
+            <button class="btn btn-lg btn-default help btn-logout"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    title="<%= l('LOGOUT') %>">
               <span class="glyphicon glyphicon-log-out">
               </span>
             </button>
@@ -111,50 +166,61 @@
         </div>
       </div>
     </nav>
-    <div class="modal fade" role="dialog" id="quitModal" aria-labelledby="quitModal" aria-hidden="true">
+    <div class="modal fade"
+         id="quitModal"
+         aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('LEAVE_THIS_ROOM') %>
+              %= l('LEAVE_THIS_ROOM')
             </h4>
           </div>
           <div class="modal-body">
             <p>
-              <%= l('ARE_YOU_SURE_YOU_WANT_TO_LEAVE') %>
+              %= l('ARE_YOU_SURE_YOU_WANT_TO_LEAVE')
             </p>
           </div>
           <div class="modal-footer">
-            <button id="confirmQuitButton" class="btn btn-primary">
-              <%= l('QUIT') %>
+            <button id="confirmQuitButton"
+                    class="btn btn-primary">
+              %= l('QUIT')
             </button>
-            <button class="btn btn-default" data-dismiss="modal" data-target="#quitModal">
-              <%= l('CANCEL') %>
+            <button class="btn btn-default"
+                    data-dismiss="modal"
+                    data-target="#quitModal">
+              %= l('CANCEL')
             </button>
           </div>
         </div>
       </div>
     </div>
-    <div class="modal fade" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
+    <div class="modal fade"
+         id="chromeExtMessage"
+         aria-hidden="true">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal">
               &times;
             </button>
-            <h4 class="modal-title" id="chromeExtMessageTitle">
-              <%= l('EXTENSION_REQUIRED') %>
+            <h4 class="modal-title">
+              %= l('EXTENSION_REQUIRED')
             </h4>
           </div>
           <div class="modal-body">
             <p>
-              <%= l('VROOM_CHROME_EXTENSION') %>
+              %= l('VROOM_CHROME_EXTENSION')
             </p>
             <p>
-              <a class="btn btn-default btn-lg" href="https://chrome.google.com/webstore/detail/<%= $config->{'interface.chrome_extension_id'} %>" target="_blank">
+              <a class="btn btn-default btn-lg"
+                 href="https://chrome.google.com/webstore/detail/<%= $config->{'interface.chrome_extension_id'} %>"
+                 target="_blank">
                 <span class="glyphicon glyphicon-download-alt">
                 </span>
               </a>
@@ -163,158 +229,198 @@
         </div>
       </div>
     </div>
-    <div class="modal fade" role="dialog" id="firefoxShareScreenModal" aria-labelledby="firefoxShareScreenModal" aria-hidden="true">
+    <div class="modal fade"
+         id="firefoxShareScreenModal"
+         aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal"
+                    aria-hidden="true">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('ALLOW_SCREEN_SHARING') %>
+              %= l('ALLOW_SCREEN_SHARING')
             </h4>
           </div>
           <div class="modal-body">
             <p>
-              <%= l('ALLOW_SCREEN_SHARING_ON_FF') %>
-              <%== sprintf $self->l('SCREEN_SHARING_ABOUT_CONFIG_s'), $self->req->url->to_abs->host %>
+              %= l('ALLOW_SCREEN_SHARING_ON_FF')
+              %== sprintf l('SCREEN_SHARING_ABOUT_CONFIG_s'), $self->req->url->to_abs->host
             </p>
           </div>
         </div>
       </div>
     </div>
-    <div class="modal fade" role="dialog" id="disconnected" aria-labelledby="disconnected" aria-hidden="true">
+    <div class="modal fade"
+         id="disconnected"
+         aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            <button class="close"
+                    data-dismiss="modal">
               &times;
             </button>
             <h4 class="modal-title">
-              <%= l('CONNECTION_LOST') %>
+              %= l('CONNECTION_LOST')
             </h4>
           </div>
           <div class="modal-body">
-            %= image '/img/flash.png', alt => $self->l('CONNECTION_LOST'), class => "img-responsive center-block"
+            %= image url_for('/img/flash.png'), alt => l('CONNECTION_LOST'), class => "img-responsive center-block"
             <br>
             <p class="text-center">
-              <%= l('CHECK_INTERNET_ACCESS') %>
+              %= l('CHECK_INTERNET_ACCESS')
             </p>
           </div>
         </div>
       </div>
     </div>
-    <div class="modal fade" role="dialog" id="connecting" aria-labelledby="connecting" aria-hidden="false" data-keyboard="false" data-backdrop="static">
+    <div class="modal fade"
+         id="connecting"
+         aria-hidden="false"
+         data-keyboard="false"
+         data-backdrop="static">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">
-              <%= l('CONNECTING') %>
+              %= l('CONNECTING')
             </h4>
           </div>
           <div class="modal-body">
-            <div id="connecting-msg" class="connecting-msg">
-              %= image '/img/connecting.gif', alt => $self->l('CONNECTING'), class => "img-responsive center-block"
+            <div id="connecting-msg"
+                 class="connecting-msg">
+              %= image url_for('/img/connecting.gif'), alt => l('CONNECTING'), class => "img-responsive center-block"
               <br>
               <p class="text-center">
-                <%= l('CONNECTING_PLEASE_WAIT') %>
+                %= l('CONNECTING_PLEASE_WAIT')
               </p>
               <p class="text-center connecting-err-reason">
               </p>
             </div>
-            <div id="room-is-locked" class="connecting-msg" style="display: none">
-              %= image '/img/lock.png', alt => $self->l('LOCKED'), class => "img-responsive center-block"
+            <div id="room-is-locked"
+                 class="connecting-msg"
+                 style="display: none">
+              %= image url_for('/img/lock.png'), alt => l('LOCKED'), class => "img-responsive center-block"
               <p class="text-center connecting-err-reason">
               </p>
             </div>
-            <div id="no-media-msg" class="connecting-msg" style="display: none">
-              <% if (defined(stash('video')) && stash('video') eq 'false'){ %>
+            <div id="no-media-msg"
+                 class="connecting-msg"
+                 style="display: none">
+              % if (defined(stash('video')) && stash('video') eq 'false'){
               <p class="text-center">
-                <%= l('NO_MEDIA_AVAILABLE') %>
+                %= l('NO_MEDIA_AVAILABLE')
               </p>
               <div class="row">
                 <div class="col-xs-2 col-xs-offset-4">
-                  %= image '/img/webcam.png', alt => "Webcam", class => "img-responsive, center-block"
+                  %= image url_for('/img/webcam.png'), alt => "Webcam", class => "img-responsive, center-block"
                 </div>
                 <div class="col-xs-2">
-                 %= image '/img/mic.png', alt => "Microphone", class => "img-responsive, center-block"
+                 %= image url_for('/img/mic.png'), alt => "Microphone", class => "img-responsive, center-block"
                 </div>
               </div>
               <br>
               <p class="text-center">
-                <%= l('YOU_NEED8MIC_OR_WEBCAM') %>
+                %= l('YOU_NEED8MIC_OR_WEBCAM')
               </p> 
-              <% } else { %>
+              % } else {
               <p class="text-center">
-                <%= l('CANT_ACCESS_WEBCAM') %>
+                %= l('CANT_ACCESS_WEBCAM')
               </p>
-              %= image '/img/webcam.png', alt => "Webcam", class => "img-responsive center-block"
+              %= image url_for('/img/webcam.png'), alt => "Webcam", class => "img-responsive center-block"
               <br>
               <p class="text-center">
-                <%= l('CLICK_IF_NO_WEBCAM') %>
+                %= l('CLICK_IF_NO_WEBCAM')
               </p>
               <p class="text-center">
-                <a class="btn btn-default btn-lg" href="<%= $self->url_for("/$room") %>?video=false">
+                <a class="btn btn-default btn-lg"
+                   href="<%= $self->req->url->query(video => 'false') %>">
                   <span class="glyphicon glyphicon-headphones">
                   </span>
                 </a>
               </p>
-              <% } %>
+              % }
             </div>
-            <div id="auth-before-join" class="connecting-msg" style="display: none">
-              <form role="form" class="form-horizontal" id="authBeforeJoinForm">
+            <div id="auth-before-join"
+                 class="connecting-msg"
+                 style="display: none">
+              <form class="form-horizontal"
+                    id="authBeforeJoinForm">
                 <div class="form-group">
-                  <label for="authBeforJoinPass" class="col-sm-4 control-label">
-                    <%= l('PASSWORD') %>
+                  <label for="authBeforJoinPass"
+                         class="col-sm-4 control-label">
+                    %= l('PASSWORD')
                   </label>
                   <div class="col-sm-4">
-                    <input type="password" class="form-control" id="authBeforeJoinPass" placeholder="<%= l('PASSWORD') %>">
+                    <input type="password"
+                           class="form-control"
+                           id="authBeforeJoinPass"
+                           placeholder="<%= l('PASSWORD') %>">
                   </div>
                 </div>
                 <div class="form-group">
                   <div class="col-sm-offset-4 col-sm-8">
-                    <button id="authBeforeJoinButton" class="btn btn-primary disabled" type="submit">
-                      <%= l('SUBMIT') %>
+                    <button id="authBeforeJoinButton"
+                            class="btn btn-primary disabled"
+                            type="submit">
+                      %= l('SUBMIT')
                     </button>
-                    <a class="btn btn-default" href="<%= $self->url_for('/') %>">
-                      <%= l('CANCEL') %>
+                    <a class="btn btn-default"
+                       href="<%= url_for('/') %>">
+                      %= l('CANCEL')
                     </a>
                   </div>
                 </div>
               </form>
             </div>
-            <div id="display-name-pre" class="connecting-msg" style="display: none">
-              <form role="form" class="form-horizontal" id="displayNamePreForm">
+            <div id="display-name-pre"
+                 class="connecting-msg"
+                 style="display: none">
+              <form class="form-horizontal"
+                    id="displayNamePreForm">
                 <p class="text-center">
-                  <%= l('SET_A_DISPLAY_NAME') %>
+                  %= l('SET_A_DISPLAY_NAME')
                 </p>
                 <div class="form-group">
-                  <label for="displayNamePre" class="col-sm-4 control-label">
-                    <%= l('DISPLAY_NAME') %>
+                  <label for="displayNamePre"
+                         class="col-sm-4 control-label">
+                    %= l('DISPLAY_NAME')
                   </label>
                   <div class="col-sm-4">
-                    <input type="text" class="form-control" autocomplete="off" id="displayNamePre" placeholder="<%= l('YOUR_NAME') %>">
+                    <input type="text"
+                           class="form-control"
+                           autocomplete="off"
+                           id="displayNamePre"
+                           placeholder="<%= l('YOUR_NAME') %>">
                   </div>
                 </div>
                 <div class="form-group">
                   <div class="col-sm-offset-4 col-sm-8">
-                    <button id="displayNamePreButton" class="btn btn-primary disabled" type="submit">
-                      <%= l('SUBMIT') %>
+                    <button id="displayNamePreButton"
+                            class="btn btn-primary disabled"
+                            type="submit">
+                      %= l('SUBMIT')
                     </button>
-                    <a class="btn btn-default" href="<%= $self->url_for('/') %>">
-                      <%= l('CANCEL') %>
+                    <a class="btn btn-default"
+                       href="<%= url_for('/') %>">
+                      %= l('CANCEL')
                     </a>
                   </div>
                 </div>
               </form>
             </div>
-            <div id="no-webrtc-msg" class="connecting-msg" style="display: none">
+            <div id="no-webrtc-msg"
+                 class="connecting-msg"
+                 style="display: none">
               <p>
-                <%= l('NO_WEBRTC_SUPPORT') %>
+                %= l('NO_WEBRTC_SUPPORT')
               </p>
-              <% if ($ua !~ m/iphone|ipad|ipod/i){ %>
+              % if ($ua !~ m/iphone|ipad|ipod/i){
               <p>
-                <%= l('DOWNLOAD_ONE_OF_THESE_BROWSERS') %>
+                %= l('DOWNLOAD_ONE_OF_THESE_BROWSERS')
               </p>
               <div class="row">
                 <%
@@ -328,44 +434,63 @@
                   }
                 %>
                 <div class="col-xs-4">
-                  <a href="<%= $ffurl %>" target="_blank">
-                    %= image '/img/firefox.png', alt => "Mozilla Firefox", class => "img-responsive center-block"
+                  <a href="<%= $ffurl %>"
+                     target="_blank">
+                    %= image url_for('/img/firefox.png'), alt => "Mozilla Firefox", class => "img-responsive center-block"
                   </a>
                 </div>
                 <div class="col-xs-4">
-                  <a href="<%= $churl %>" target="_blank">
-                    %= image '/img/chrome.png', alt => "Google Chrome", class => "img-responsive center-block"
+                  <a href="<%= $churl %>"
+                     target="_blank">
+                    %= image url_for('/img/chrome.png'), alt => "Google Chrome", class => "img-responsive center-block"
                   </a>
                 </div>
                 <div class="col-xs-4">
-                  <a href="<%= $opurl %>" target="_blank">
-                    %= image '/img/opera.png', alt => "Opera", class => "img-responsive center-block"
+                  <a href="<%= $opurl %>"
+                     target="_blank">
+                    %= image url_for('/img/opera.png'), alt => "Opera", class => "img-responsive center-block"
                   </a>
                 </div>
               </div>
-              <% } %>
+              % }
             </div>
           </div>
         </div>
       </div>
     </div>
-%=include 'invite_modal'
-%=include 'configure_modal'
-%=include 'auth_modal'
-%=include 'noscript'
+%= include 'invite_modal'
+%= include 'configure_modal'
+%= include 'auth_modal'
+%= include 'noscript'
     <div class="frame">
-      <div id="chatMenu" class="nav-collapse collapse hidden-xs">
-        <div id="chatHistory" class="form-control">
+      <div id="chatMenu"
+           class="nav-collapse collapse hidden-xs">
+        <div id="chatHistory"
+             class="form-control">
         </div>
-        <form role="form" id="chatForm">
+        <form id="chatForm">
           <div class="input-group">
-            <textarea class="form-control" id="chatBox" form_id="chatForm" placeholder="<%= l('SET_YOUR_NAME_TO_CHAT') %>" rows=1 disabled></textarea>
+            <textarea class="form-control"
+                      id="chatBox"
+                      form_id="chatForm"
+                      placeholder="<%= l('SET_YOUR_NAME_TO_CHAT') %>"
+                      rows=1 disabled>
+            </textarea>
             <span class="input-group-btn">
-              <button type="submit" id="sendChat" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%= l('SEND_MESSAGE') %>">
+              <button type="submit"
+                      id="sendChat"
+                      class="btn btn-default help"
+                      data-toggle="tooltip"
+                      data-placement="bottom"
+                      title="<%= l('SEND_MESSAGE') %>">
                 <span class="glyphicon glyphicon-share-alt">
                 </span>
               </button>
-              <button type="button" id="saveChat" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%= l('SAVE_HISTORY') %>">
+              <button id="saveChat"
+                      class="btn btn-default help"
+                      data-toggle="tooltip"
+                      data-placement="bottom"
+                      title="<%= l('SAVE_HISTORY') %>">
                 <span class="glyphicon glyphicon-floppy-save">
                 </span>
               </button>
@@ -373,27 +498,42 @@
           </div>
         </form>
       </div>
-      <audio id="mohPlayer" src="<%= $self->url_for('/snd/moh/' . $moh) %>" loop></audio>
-      <div id="view" class="view row-fluid">
-        <div id="webRTCVideo" class="col-xs-12 col-sm-4">
-          <div class="col-xs-3 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
-            <video id="webRTCVideoLocal" class="webRTCVideo latencyUnknown" muted oncontextmenu="return false;">
+      <audio id="mohPlayer"
+             src="<%= url_for('/snd/moh/' . $moh) %>"
+             loop>
+      </audio>
+      <div id="view"
+           class="view row-fluid">
+        <div id="webRTCVideo"
+             class="col-xs-12 col-sm-4">
+          <div class="col-xs-3 col-sm-12 col-lg-6 previewContainer"
+               id="videoLocalContainer">
+            <video id="webRTCVideoLocal"
+                   class="webRTCVideo latencyUnknown"
+                   muted
+                   oncontextmenu="return false;">
             </video>
-            <div id="localVolume" class="volumeBar">
+            <div id="localVolume"
+                 class="volumeBar">
             </div>
-            <div id="name_local" class="displayName">
+            <div id="name_local"
+                 class="displayName">
             </div>
           </div>
         </div>
-        <div id="mainView" class="col-xs-12 col-sm-8">
-          <% if ($self->get_opt_features->{etherpad}){ %>
-          <div id="etherpadContainer" class="hidden-xs"></div>
-          <% } %>
+        <div id="mainView"
+             class="col-xs-12 col-sm-8">
+          % if (get_opt_features->{etherpad}){
+          <div id="etherpadContainer"
+               class="hidden-xs">
+          </div>
+          % }
           <div id="mainVideo">
           </div>
-          <div id="aloneMsg" class="aloneEl">
+          <div id="aloneMsg"
+               class="aloneEl">
             <h2 class="text-center">
-              <%= l('ALONE_IN_ROOM') %>
+              %= l('ALONE_IN_ROOM')
             </h2>
           </div>
         </div>
@@ -404,10 +544,8 @@
       var roomName = '<%= $room %>';
       $( document ).ready(function() {
           etherpad = {
-            enabled: <%= $self->get_opt_features->{etherpad} ? 'true' : 'false' %>,
-            <%
-              my $ethuri = Mojo::URL->new($config->{'etherpad.uri'});
-            %>
+            enabled: <%= get_opt_features->{etherpad} ? 'true' : 'false' %>,
+            % my $ethuri = Mojo::URL->new($config->{'etherpad.uri'});
             host: "<%= $ethuri->scheme . '://' . $ethuri->authority %>",
             path: "<%= $ethuri->path . '/p/' %>",
             group: "<%= $etherpadGroup %>"
diff --git a/templates/default/js_common.html.ep b/templates/default/js_common.html.ep
index 4879147..42b4a62 100644
--- a/templates/default/js_common.html.ep
+++ b/templates/default/js_common.html.ep
@@ -1,25 +1,39 @@
     <script type="text/javascript">
-      <% my $url = $self->url_for('/');
-         $url .= ($url =~ m/\/$/) ? '' : '/'; %>
-      var rootUrl = '<%= $url %>';
-      var currentLang = '<%= $self->languages %>';
-      var api_key = '<%= ($self->session('key')) ? $self->session('key') : '' %>';
-      var page = '<%= stash('page') ? stash('page') : "" %>';
+      var rootUrl = '<%= url_for('/') %>';
+      var currentLang = '<%= languages %>';
+      var api_key = '<%= (session('key')) ? session('key') : '' %>';
+      var page = '<%= stash('page') ? stash('page') : '' %>';
       var roomName;
     </script>
-    <script type="text/javascript" src= "<%= $self->url_for('/locales/' . $self->languages . '.js') %>"></script>
+    <script type="text/javascript"
+            src="<%= url_for('/locales/' . languages . '.js') %>">
+    </script>
     <%
-      my @js = qw(jquery-1.11.3.js bootstrap.js notify-combined.js bootstrap-switch.js jquery.bootpag.js toc.js bootstrap-datepicker.js);
+      my @js = qw(
+        jquery-1.11.3.js
+        bootstrap.js
+        notify-combined.js
+        bootstrap-switch.js
+        jquery.bootpag.js
+        toc.js
+        bootstrap-datepicker.js
+      );
       # Load supported languages for datpicker, if they exists
-      foreach my $l ($self->get_supported_lang){
-        if (-e 'public/js/datepicker-locales/bootstrap-datepicker.' . $l . '.js'){
-          push @js, 'datepicker-locales/bootstrap-datepicker.' . $l . '.js';
-        }
+      foreach my $l (get_supported_lang){
+        push @js, 'datepicker-locales/bootstrap-datepicker.' . $l . '.js'
+          if (-e 'public/js/datepicker-locales/bootstrap-datepicker.' . $l . '.js');
       }
       push @js, 'vroom.js';
       if (stash('page') && stash('page') eq 'room'){
-        push @js, qw(simplewebrtc.bundle.js jquery.browser.js sprintf.js FileSaver.js jquery.tinytimer.js etherpad.js);
+        push @js, qw(
+          simplewebrtc.bundle.js
+          jquery.browser.js
+          sprintf.js
+          FileSaver.js
+          jquery.tinytimer.js
+          etherpad.js
+        );
       }
-      @js = map { $self->url_for('/') . 'js/' . $_ } @js;
+      @js = map { url_for('/js/' . $_) } @js;
     %>
-    <%=js @js %>
+    %= js @js
diff --git a/templates/default/kicked.html.ep b/templates/default/kicked.html.ep
index a5757f4..90e8e78 100644
--- a/templates/default/kicked.html.ep
+++ b/templates/default/kicked.html.ep
@@ -1,12 +1,19 @@
-% title $self->l('KICKED');
+% title l('KICKED');
 %= include 'header'
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="jumbotron alert-danger">
-    <h2><%= l('YOU_HAVE_BEEN_KICKED') %></h2>
-    <p><%= l('AN_ADMIN_HAS_KICKED_YOU') %></p>
+    <h2>
+      %= l('YOU_HAVE_BEEN_KICKED')
+    </h2>
+    <p>
+      %= l('AN_ADMIN_HAS_KICKED_YOU')
+    </p>
     <div class="btn-group">
-      <a class="btn btn-primary btn-lg" role="button" href="<%= $self->url_for('/') %>"><%= l('BACK_TO_MAIN_MENU') %></a>
+      <a class="btn btn-primary btn-lg"
+         href="<%= url_for('/') %>">
+        %= l('BACK_TO_MAIN_MENU')
+      </a>
     </div>
   </div>
 </div>
diff --git a/templates/default/noscript.html.ep b/templates/default/noscript.html.ep
index 4c79fba..4bde1c1 100644
--- a/templates/default/noscript.html.ep
+++ b/templates/default/noscript.html.ep
@@ -2,7 +2,7 @@
     <div class="row">
       <div class="col-md-6 col-md-offset-3 alert alert-danger">
         <p class="text-center">
-          <%= l('JS_REQUIRED') %>
+          %= l('JS_REQUIRED')
         </p>
       </div>
     </div>
diff --git a/templates/default/not_found.html.ep b/templates/default/not_found.html.ep
index e5722d3..f835739 100644
--- a/templates/default/not_found.html.ep
+++ b/templates/default/not_found.html.ep
@@ -1,4 +1,4 @@
-% stash msg => $self->l('PAGE_NOT_FOUND');
-% stash err => 'not_found';
+% stash msg  => l('PAGE_NOT_FOUND');
+% stash err  => 'not_found';
 % stash room => '';
-%=include 'error'
+%= include 'error'
diff --git a/templates/default/notification.mail.ep b/templates/default/notification.mail.ep
index 55e268d..a4a5a39 100644
--- a/templates/default/notification.mail.ep
+++ b/templates/default/notification.mail.ep
@@ -1,31 +1,28 @@
-<%
-  my $url = Mojo::URL->new($self->url_for('/')->to_abs)->scheme('https');
-  $url .= ($url =~ m/\/$/) ? '' : '/';
-%>
+% my $url = Mojo::URL->new(url_for('/' . $room)->to_abs)->scheme('https');
 <p>
-  <%= l('SOMEONE_JOINED_A_ROOM') %>
+  %= l('SOMEONE_JOINED_A_ROOM')
 </p>
-<% if ($name && $name ne ''){ %>
+% if ($name && $name ne ''){
 <p>
   <%= l('PARTICIPANT_NAME') %>: <%= $name %>
 </p>
-<% } %>
+% }
 <p>
-  <%= l('WHEN_YOU_ARE_READY') %>
+  %= l('WHEN_YOU_ARE_READY')
   <center>
     <h1>
-      <a href="<%= $url . $room %>">
-        <%= $url . $room %>
+      <a href="<%= $url %>">
+        %= $url
       </a>
     </h1>
   </center>
 </p>
 <br>
 <p>
-  <%= l('HAVE_A_NICE_MEETING') %>
+  %= l('HAVE_A_NICE_MEETING')
 </p>
 <p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">
   &mdash;
   <br>
-  <%= l('EMAIL_SIGN') %>
+  %= l('EMAIL_SIGN')
 </p>
diff --git a/templates/default/public_toolbar.html.ep b/templates/default/public_toolbar.html.ep
index 375d716..34a0fc0 100644
--- a/templates/default/public_toolbar.html.ep
+++ b/templates/default/public_toolbar.html.ep
@@ -1,40 +1,59 @@
-  <nav class="navbar navbar-default" role="navigation" id="headerNav">
+  <nav class="navbar navbar-default"
+       id="headerNav">
     <div class="container-fluid">
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#toolbar">
-          <span class="sr-only"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+        <button class="navbar-toggle"
+                data-toggle="collapse"
+                data-target="#toolbar">
+          <span class="sr-only">
+          </span>
+          <span class="icon-bar">
+          </span>
+          <span class="icon-bar">
+          </span>
+          <span class="icon-bar">
+          </span>
         </button>
-        %= image '/img/logo_vroom_alpha.png', id => "navBarLogo", class => "hidden-xs"
+        %= image url_for('/img/logo_vroom_alpha.png'), id => "navBarLogo", class => "hidden-xs"
       </div>
-      <div class="collapse navbar-collapse" id="toolbar">
+      <div class="collapse navbar-collapse"
+           id="toolbar">
         <ul class="nav navbar-nav navbar-right">
           <li id='lnk_index'>
-            <a href="<%= $self->url_for('/') %>"><%= l('HOME') %></a>
+            <a href="<%= url_for('/') %>">
+              %= l('HOME')
+            </a>
           </li>
           <li id='lnk_about'>
-            <a href="<%= $self->url_for('/about') %>"><%= l('ABOUT') %></a>
+            <a href="<%= url_for('/about') %>">
+              %= l('ABOUT')
+            </a>
           </li>
           <li id='lnk_feedback'>
-            <a href="<%= $self->url_for('/feedback') %>"><%= l('FEEDBACK') %></a>
+            <a href="<%= url_for('/feedback') %>">
+              %= l('FEEDBACK')
+            </a>
           </li>
-          <% if ($config->{'interface.demo'}){ %>
+          % if ($config->{'interface.demo'}){
           <li id='lnk_documentation'>
-            <a href="<%= $self->url_for('/documentation') %>"><%= l('DOCUMENTATION') %></a>
+            <a href="<%= url_for('/documentation') %>">
+              %= l('DOCUMENTATION')
+            </a>
           </li>
-          <% } %>
+          % }
           <li id='lnk_admin'>
-            <a href="<%= $self->url_for('/admin') %>"><%= l('ADMINISTRATION') %></a>
+            <a href="<%= url_for('/admin') %>">
+              %= l('ADMINISTRATION')
+            </a>
           </li>
           <li class="hidden-xs">
-            <select class="form-control navbar-btn" id="switch_lang">
-              <% foreach my $lang ($self->get_supported_lang){ %>
-              <option value="<%= $lang %>" <%= ($self->languages eq $lang) ? 'selected="selected"' : '' %>>
-                <%= $lang %>
+            <select class="form-control navbar-btn"
+                    id="switch_lang">
+              % foreach my $lang (get_supported_lang){
+              <option value="<%= $lang %>" <%= (languages eq $lang) ? 'selected="selected"' : '' %>>
+                %= $lang
               </option>
-              <% } %>
+              % }
             </select>
           </li>
         </ul>