<% #main %>
<h1><% response.title %></h1>
<div class='uk-margin-top'>
   <% layout.link skins <% gettext Skins %> %>
   <% layout.link images <% gettext Images %> prefix=' | ' %>
   <% layout.link import <% gettext Import %> prefix=' | ' %>
   <% layout.link export <% gettext Export %> prefix=' | ' %>
</div>
<form class='uk-margin-top uk-form uk-form-stacked' id='prefs' method='post' action='<% response.action %>'>
   <div class='uk-form-row'>
      <div class='uk-form-label'>
         <% gettext 'Show Controls' %>
      </div>
      <div class='uk-form-controls'>
         <input id='sandbox' name='sandbox' type='checkbox' <% if <% layout.sandbox %> is true then checked %>>
         <label for='sandbox'><% gettext enabled %></label>
      </div>
   </div>
   <div class='uk-grid'>
      <legend class='uk-margin-top' style='margin-bottom: -15px;'>
         <% gettext 'Variables' %>
      </legend>
      <% layout.values %>
      <div class='uk-margin-top'>
         <div class='uk-form-label'>&#160;</div>
         <a href='' class='uk-icon-button uk-icon-plus uk-text-middle' id='addVariable'></a>
      </div>
   </div>
   <div class='uk-margin-top'>
      <button class='uk-button uk-button-primary' type='submit' id='submit' name='save' value='1'>
         <% gettext Save %>
      </button>
      <% layout.link reset <% gettext Reset %> class='uk-button' %>
      <a href='' class='uk-button uk-button-link cancel'><% gettext Cancel %></a>
   </div>
</form>
<script type='text/javascript'>
$(function() {
   $('#addVariable').on('click', function (event) {
      event.preventDefault();
      var name = prompt('<% gettext "Please enter the name of the new variable:" %>');
      if (name) {
         var key = 'value_' + name;
         var variableRow = $('.av-variable-row').eq(0).clone();
         variableRow.find('.uk-form-label').html(name);
         variableRow.find('.uk-form-controls input').attr({name: key, 'id': key, value: ''});
         $('.av-variable-row:last').after(variableRow);
         $(variableRow).find('input').focus();
      }
   });
});
</script>

<% #value %>
<div class='uk-width-1-2 uk-margin-top av-variable-row'>
   <div class='uk-form-label'>
      <% param.key %>
   </div>
   <div class='uk-form-controls'>
      <input class='uk-width-1-1' type='text' name='value_<% param.key %>' value='<% param.value %>'>
   </div>
</div>

<% #import %>
<h1><% response.title %></h1>
<form class='uk-form' method="post" action="<% response.action %>" enctype="multipart/form-data">
   <% layout.upload upload %>
   <div class='uk-margin-top'>
      <button class='uk-button uk-button-primary' type="submit" id="submit" name="submit" value="1">
         <% gettext Import %>
      </button>
      <a href="" class="uk-button uk-button-link cancel"><% gettext Cancel %></a>
   </div>
</form>

