{% extends "base.html" %}
{% load staticfiles %}
{% block pageTitle %}
<section id="page-title">
   <div class="container clearfix">
      <h1>Course</h1>
      <span>lorem ipsum</span>
      <ol class="breadcrumb">
         <li><a href="http://www.combio.pl">Home</a></li>
         <li class="active">Hands On</li>
      </ol>
   </div>
</section>
{% endblock %}
{% block content %}
<section id="content">
   <div class="content-wrap">
      <div class="container clearfix">
         <div class="tabs side-tabs clearfix" id="tab-4">
            <ul class="tab-nav clearfix">
               <li><a href="#tabs-13"><i class="icon-home2"></i> Overview</a></li>
               <li><a href="#tabs-14">Program</a></li>
               <li><a href="#tabs-15">Registration</a></li>
               <li class="hidden-phone"><a href="#tabs-16"></a></li>
            </ul>
            <div class="tab-container">
               <div class="tab-content clearfix" id="tabs-13">
                  Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
               </div>
               <div class="tab-content clearfix" id="tabs-14">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>Column heading</th>
                           <th>Column heading</th>
                           <th>Column heading</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr class="active">
                           <td>1</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr>
                           <td>2</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr class="success">
                           <td>3</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr>
                           <td>4</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr class="info">
                           <td>5</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr>
                           <td>6</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr class="warning">
                           <td>7</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr>
                           <td>8</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                        <tr class="danger">
                           <td>9</td>
                           <td>Column content</td>
                           <td>Column content</td>
                           <td>Column content</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <div class="tab-content clearfix" id="tabs-15">
                  <div class="postcontent nobottommargin">
                     <div class="fancy-title title-dotted-border">
                        <h3>Registration</h3>
                     </div>
                     <div id="contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
                     <form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/sendemail.php" method="post" novalidate="novalidate">
                        <div class="form-process"></div>
                        <div class="col_one_third">
                           <label for="template-contactform-name">First Name <small>*</small></label>
                           <input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" aria-required="true">
                        </div>
                        <div class="col_one_third">
                           <label for="template-contactform-email">Last name <small>*</small></label>
                           <input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" aria-required="true">
                        </div>
                        <div class="col_one_third col_last">
                           <label for="template-contactform-phone">Email</label>
                           <input type="text" id="template-contactform-email" name="template-contactform-email" value="" class="sm-form-control">
                        </div>
                        <div class="clear"></div>
                        <div class="col_full">
                           <label for="template-contactform-subject">Organization <small>*</small></label>
                           <input type="text" id="template-contactform-subject" name="template-contactform-subject" value="" class="required sm-form-control" aria-required="true">
                        </div>
                        <div class="clear"></div>
                        <div class="col_full">
                           <label for="template-contactform-message">Optional message <small></small></label>
                           <textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30" aria-required="true"></textarea>
                        </div>
                        <div class="col_full hidden">
                           <input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control">
                        </div>
                        <div class="col_full">
                           <button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
                        </div>
                     </form>
                     <script type="text/javascript">
                        $("#template-contactform").validate({
                        	submitHandler: function(form) {
                        		$('.form-process').fadeIn();
                        		$(form).ajaxSubmit({
                        			target: '#contact-form-result',
                        			success: function() {
                        				$('.form-process').fadeOut();
                        				$(form).find('.sm-form-control').val('');
                        				$('#contact-form-result').attr('data-notify-msg', $('#contact-form-result').html()).html('');
                        				SEMICOLON.widget.notifications($('#contact-form-result'));
                        			}
                        		});
                        	}
                        });
                        
                     </script>
                  </div>
               </div>
               <div class="tab-content clearfix" id="tabs-16">
                  Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
{% endblock %}