{% extends 'base.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.min.css')}}" />
    <link href="{{ asset('css/main.css')}}" rel="stylesheet">
    <link href="{{ asset('css/table.css')}}" rel="stylesheet">

    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
    <!-- Google Fonts call. Font Used Open Sans & Raleway -->
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,300" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
{% endblock %}
    {% block javascripts %}
        <script type="text/javascript" src="{{ asset('js/jquery.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bootstrap/js/bootstrap.min.js')}}"></script>

        <script type="text/javascript" src="{{ asset('js/lineandbars.js')}}"></script>

        <script type="text/javascript" src="{{ asset('js/dash-charts.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/gauge.js')}}"></script>

        <!-- NOTY JAVASCRIPT -->
        <script type="text/javascript" src="{{ asset('js/noty/jquery.noty.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/noty/layouts/top.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/noty/layouts/topLeft.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/noty/layouts/topRight.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/noty/layouts/topCenter.js')}}"></script>

        <!-- You can add more layouts if you want -->
        <script type="text/javascript" src="{{ asset('js/noty/themes/default.js')}}"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
        <script src="{{ asset('js/jquery.flexslider.js')}}" type="text/javascript"></script>

        <script type="text/javascript" src="{{ asset('js/admin.js')}}"></script>
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#btn-blog-next").click(function () {
                    $('#blogCarousel').carousel('next')
                });
                $("#btn-blog-prev").click(function () {
                    $('#blogCarousel').carousel('prev')
                });

                $("#btn-client-next").click(function () {
                    $('#clientCarousel').carousel('next')
                });
                $("#btn-client-prev").click(function () {
                    $('#clientCarousel').carousel('prev')
                });

            });

            $(window).load(function () {

                $('.flexslider').flexslider({
                    animation: "slide",
                    slideshow: true,
                    start: function (slider) {
                        $('body').removeClass('loading');
                    }
                });
            });

        </script>
        <![endif]-->
    {% endblock %}
{% block container %}

    <div class="container">
        <h4><strong>Tareas de {{ tareas[0].ProcesosId.nombre }}</strong></h4>
        {% for tarea in tareas %}
        {% if ( loop.first) or (loop.index is divisible by(4)) %}
        <div class="row">
        {% endif %}

            <div class="col-sm-3 col-lg-3">
                <div id="hosting-table">
                    <div class="table_style4">
                        <div class="column">
                            <ul>
                                <li><strong>{{tarea.alias}}</strong></li>
                                <li class="header_row">
                                    <h1>{{tarea.nombre}}</h1>
                                </li>
                                <li>{{tarea.descripcion}}</li>
                                <li class="footer_row"><a href="{{ path('realizar_tarea',{ 'id': tarea.id }) }}" class="hosting-button">Realizar</a></li>
                            </ul>
                        </div><!--/ column-->
                    </div><!--/ Table Style-->
                </div><!--/ Hosting Table-->
            </div><!-- /span3 -->


    {% if (loop.last) or (loop.index is divisible by(4) ) %}
    </div>
    {% endif %}
        {% endfor %}
    </div><!-- /container -->
{% endblock container %}