<% #main %>
<h1><% response.title %></h1>
<div class='uk-article-meta'><% layout.skin $HopObject#meta %></div>
<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>
<% site.skin $Site#noscript %>
<form class='uk-margin-top uk-form uk-form-stacked' id='prefs' method='post'>
   <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-form-row uk-margin-top'>
      <fieldset class='av-values'>
         <legend>
            <% gettext Settings %>
         </legend>
         <div class='uk-grid'>
            <% layout.values %>
         </div>
         <div id='av-add-value' class='uk-margin-bottom uk-hidden'>
            <div class='uk-form-label'>&#160;</div>
            <a href='javascript:' class='uk-icon-button uk-icon-plus uk-text-middle'></a>
         </div>
      </fieldset>
   </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'><% gettext Cancel %></a>
   </div>
</form>
<script type='text/javascript'>
   $('.av-values').on('mouseover', '.av-value-row', function () {
      $(this).find('.av-value-controls').removeClass('uk-hidden');
   }).on('mouseout', '.av-value-row', function () {
      $(this).find('.av-value-controls').addClass('uk-hidden');
   }).on('click', '.av-value-remove', function () {
      $(this).parents('.av-value-row').remove();
   });

   $('#av-add-value').removeClass('uk-hidden')
      .find('a')
      .on('click', function (event) {
      event.preventDefault();
      var name = prompt('<% gettext "Please enter the name of the new setting:" %>');
      if (name) {
         var key = 'av-value ' + name;
         var valueRow = $('.av-value-row').eq(0).clone()
            .removeClass('uk-hidden')
         valueRow.find('.av-value-title').html(name);
         valueRow.find('.uk-form-controls input').attr({
            id: key.replace(new RegExp(' ', 'g'), '-'),
            name: key,
            value: '',
            type: getType(key)
         });
         $('.av-value-row:last').after(valueRow);
         $(valueRow).find('.av-clipboard-copy').remove();
         $(valueRow).find('input').focus();
      }
   });

   function getType(name) {
      var parts = name.split(' ');
      var typePart = parts.pop();
      var types = {
         color: 'color'
      };
      return types[typePart] || 'text';
   }
</script>

<% #value %>
<div class='uk-width-1-2 uk-margin-bottom av-value-row <% param.class %>'>
   <div class='uk-form-label'>
      <span class='av-value-title'><% param.title %></span>
      <span class='av-value-controls uk-hidden'>
         <a href='javascript:' class='av-value-remove'><i class='uk-icon-trash-o'></i></a>
         <a href='javascript:' class='av-clipboard-copy' data-text='<% gettext 'Press CTRL & C to copy to clipboard.' %>' data-value="<% param.macro %>"><i class='uk-icon-clipboard'></i></a>
      </span>
   </div>
   <div class='uk-form-controls'>
      <input class='uk-width-1-1' type='<% param.type %>' name='<% param.name %>' value='<% param.value %>'>
   </div>
</div>

<% #import %>
<h1><% response.title %></h1>
<form class='uk-form' method="post" 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"><% gettext Cancel %></a>
   </div>
</form>

