%rebase layout title='Register New Slack log Box Backup configuration', parent_url=app.get_url('index')

<h2>Create New Slack Box backup</h2>
<script>
function submitForm(){
        document.getElementById('authform').submit();
    };
</script>

<!-- python block (bottle + wtforms) will not be appear in html-->
%def render_field(field, desc=None, **kwargs): # simple validation
<paper-input name="{{field.id}}" id="{{field.id}}" label="{{field.label.text}}" value=""></paper-input>
   %if field.errors:
      %if desc:
         {{!desc}}
      %end
      <ul class=errors>
      %for error in field.errors:
         <li>{{ error }}</li>
      %end
      </ul>
   %end
%end

%def render_rexfield(field, desc=None, **kwargs): # regex validation
   %patternraw = field.validators[0].regex.pattern # wtform regex pattern
   %pattern = patternraw[1:-1] # remove ^ and $ to polymer regex pattern
   %message = field.validators[0].message
   %if field.data is not None:
   %   fdata = field.data
   %else:
   %   fdata = ""
   %end
    <paper-input name="{{field.id}}" id="{{field.id}}" label="{{field.label.text}}" 
     auto-validate pattern="{{pattern}}" error-message="{{message}}"
     value="{{fdata}}"></paper-input>
   %if field.errors:
      %if desc:
         {{!desc}}
      %end
      <ul class=errors>
      %for error in field.errors:
         <li>{{ error }}</li>
      %end
      </ul>
   %end
%end
<!-- / python block End -->
<form id="authform" method="POST">
   <dl>
      <!-- python block: will be substituted to polymer elements-->
      %render_field(form.team, desc='4-25 characters required')
      %render_rexfield(form.slacktoken, desc='Start with xoxp-')
      %render_rexfield(form.boxfolder, desc='Integer numbers id of the folder')
     <!-- / python block End -->
</dl>
<div align="center">
<paper-button onclick="submitForm()" style="background: black; color: white;" raised>Get Authentication on Box!</paper-button>
</div></form>