{% extends "base.html" %}

{% block title %} Formulario | {{super}}{%endblock %}
{% block extra_css%}
    <link href="{{MEDIA_URL}}css/datepicker.css" rel="stylesheet">
    <link href="{{MEDIA_URL}}css/timepicker/timepicker.css" rel="stylesheet">

<style type="text/css">
@CHARSET "UTF-8";


.form-wizard { 
    margin:10% 0 10%; padding:5% 0 0% 0%;
    border-top:1px dotted #369;
    border-left:1px dotted #369;
    border-right:1px dotted #369;

}

.stepy-titles { list-style: none;}
.stepy-titles li { color: #DDD; font: bold 18px verdana; padding: 10px; margin:0px; }
.stepy-titles li a {color: #DDD; text-decoration:none; }
.stepy-titles li span { font: 11px verdana; }
.stepy-titles .current-step { color: #369; }
.stepy-titles .current-step a { color: #369; text-decoration:none; }

</style>
{% endblock%}

{%block escoge-asignatura%}
  {{informacion.asignatura.slug}}
{%endblock%}

{% block navbar%}
{%include "app/include/menu.html"%}
{%endblock%}

{% block content %}

<div class="span9">

             <h1>Prepara la tarea a evaluar</h1>
             <fieldset>
				<ul class="stepy-titles">
					<li id="title-0" class="current-step span3" >
                        <a href="">
						<div>Paso 1</div>
						<span>Actividad</span>
                        </a>
					</li>
					<li id="title-1" class="span3">
                        <a href="">
						<div>Paso 2</div>
						<span>Cuestionario de valoracion</span>
                        </a>
					</li>
					<li id="title-2" class="span3">
                        <a href="">
						<div>Paso 3</div>
						<span>Repartir</span>
                        </a>
					</li>
					<li id="title-3" class="span3">
                        <a href="">
						<div>Paso 4</div>
						<span>Publicar</span>
                        </a>
					</li>
				</ul>
			<br/>
			<div class="form-wizard">
			  {% if user.is_authenticated %}
               {% block formwizard%}
               {% endblock%}
			  {% endif%}
			   </div>
			 </fieldset>
            
</div>
{% endblock %}
{% block extra_js %}
<script src="{{MEDIA_URL}}js/bootstrap/bootstrap-datepicker.js"></script>
<script src="{{MEDIA_URL}}js/bootstrap/bootstrap-timepicker.js"></script>

<script type="text/javascript"> 
 	$(document).ready(function () { 
    		$(".datepicker").datepicker({format: 'dd/mm/yyyy'});

            $('.timepicker').timepicker({
                defaultTime: 'current',
                minuteStep: 15,
                disableFocus: true,
                showMeridian: false,
                template: 'dropdown'
            });

        });
</script>

{% endblock %}
