<% #listItem %>
<tr>
   <td><% skin.name prefix=<% skin.prototype suffix=. %> %></td>
   <td><% skin.creator %></td>
   <td><% skin.created text %></td>
   <td class='uk-text-muted uk-text-right'><% if <% skin.custom %> is true then "<i class='uk-icon-user'></i>" %></td>
   <td class='uk-text-right' style='white-space: nowrap;'>
      <a href='' class='av-clipboard-copy' data-text='<% gettext 'Please use the copy command.' %>' data-value="<% skin.macro %>"><i class='uk-icon-clipboard'></i></a>
      <% skin.link compare "<i class='uk-icon-files-o'></i>"%>
      <% skin.link reset "<i class='uk-icon-undo'></i>" %>
      <% skin.link edit "<i class='uk-icon-pencil'></i>" %>
   </td>
</tr>

<% #edit %>
<form class='uk-form' method="post" action="<% response.action %>">
   <div class='uk-margin-top uk-margin-left'>
      <h1 class='uk-margin-large-right' style='float: left;'><% response.title %></h1>
      <span style='line-height: 42px;'>
         <% if <% skin.name %> is '' then
            <% skin.select prototype suffix=<% skin.input name class='uk-width-1-4' %> %>
         else
            <%// skin.summary prefix='<p class="small">' suffix='</p>' %>
         %>
         <button type="submit" name="save" value="2" class='uk-button uk-button-primary uk-margin-left'>
            <% gettext "Save" %>
         </button>
         <button type="submit" name="save" value="1" class='uk-button'>
            <% gettext "Save and Edit" %>
         </button>
         <a href="" class='cancel uk-button uk-button-link'><% gettext Cancel %></a>
      </span>
   </div>
   <div style='clear: both;'>
      <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
      <% skin.textarea source %>
   </div>
</form>
<script type='text/javascript'>
$(function() {
   var mode;
   if (location.href.indexOf('stylesheet') > -1) {
      mode = 'text/css';
   } else if (location.href.indexOf('javascript') > -1) {
      mode = 'text/javascript';
   } else {
      mode = 'application/x-helma-skin';
   }
   var editor = CodeMirror.fromTextArea($('#source').get(0), {
      autofocus: true,
      enterMode: 'keep',
      indentUnit: 3,
      indentWithTabs: false,
      lineNumbers: true,
      matchBrackets: true,
      mode: mode,
      tabMode: 'shift',
      viewportMargin: Infinity
   });
});
</script>

<% #compare %>
<form>
   <div class='uk-margin-top uk-margin-left'>
      <h1 class='uk-margin-large-right' style='float: left;'><% response.title %></h1>
      <span style='line-height: 42px;'>
         <% skin.link edit <% gettext Edit %> class='uk-button uk-button-primary' style='color: #fff;' %>
         <% skin.link reset <% gettext Reset %> class='uk-button' %>
         <a href='' class='cancel uk-button uk-button-link'><% gettext Cancel %></a>
      </span>
   </div>
   <div style='clear: both;'>
      <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
      <table class="diff">
         <% response.diff %>
      </table>
   </div>
</form>

<% #difference %>
<tr>
   <td class='line-number'><% param.leftLineNumber %></td>
   <td class='<% param.leftStatus %>'>
      <div class='line' style='white-space: pre-wrap;'><% param.left %></div>
   </td>
   <td class='line-number'><% param.rightLineNumber %></td>
   <td class='line <% param.rightStatus %>'>
      <div class='line' style='white-space: pre-wrap;'><% param.right %></div>
   </td>
</tr>
