{% extends 'USBackendBundle::layout.html.twig' %}
{% block stylesheets %}
    {{parent()}}
    {% stylesheets filter='cssrewrite'
                'bundles/usbackend/js/jquery-simple-combobox/css/jquery.scombobox.css'

                'bundles/usbackend/js/TimeScheduler/css/jquery-ui.css'
                'bundles/usbackend/js/TimeScheduler/css/jquery.ui.theme.css'
                'bundles/usbackend/js/TimeScheduler/css/timelineScheduler.css'
                'bundles/usbackend/js/TimeScheduler/css/timelineScheduler.styling.css'
                'bundles/usbackend/js/TimeScheduler/css/calendar.css'
    %}

    <link rel="stylesheet" href="{{ asset_url }}" media="screen" type="text/css"/>
    {% endstylesheets %}

    <style>
        .timeline-scheduler{
            font-family: 'Segoe UI', 'Droid Sans', Arial, sans-serif;
            font-size: 8px;
            margin-top:40px;
        }
        .time-sch-wrapper .time-sch-section{border:0px; border-right: #ccc 1px solid; width: auto;}
    </style>


{% endblock %}
{% block content_class 'content backend simpletimeline edit' %}
    {% block content_id 'timeline_edit' %}

        {% block content -%}
            {{ form_start(form, {'attr' : {'class' : 'form-horizontal timelineForm'}}) }}

            {{ form_errors(form) }}

            {{ form_start(form,{'attr':{'class':'form-horizontal'} }) }}
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#timeline_info" role="tab" data-toggle="tab">Línea Temporal</a></li>
                <li><a href="#timeline_notifications" role="tab" data-toggle="tab">Notificaciones</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="timeline_info">
                    {#Título#}
                    <div class="row top">
                        <div class="col-md-3">
                            {{ form_label(form.title, 'Título', {'label_attr' : {'class' : 'title'}}) }}
                            {{ form_widget(form.title, {'attr' : {'class' : 'field'} }) }}
                        </div>
                    </div>

                    {#Descripción#}
                    <div class="row top">
                        <div class="col-md-6">
                            {{ form_label(form.description, 'Descripción', {'label_attr' : {'class' : 'title'}}) }}
                            {{ form_widget(form.description, {'attr' : {'class' : 'field'} }) }}
                        </div>
                    </div>

                    <div class="separator"></div>

                    {#Acogido, responsable y mentor#}
                    <div class="row top">
                        <div class="col-md-3">
                            {{ form_label(form.user, 'Responsable', {'label_attr' : {'class' : 'title'}}) }}
                            {% if entity.user == null %}
                                {{ form_widget(form.user, {'attr' : {'class' : 'field'} }) }}
                            {% else %}
                                {{ form_widget(form.user, {'attr' : {'class' : 'field'} }) }}
                            {% endif %}
                        </div>
                    </div>

                    <div class="separator"></div>

                    {#Activo y layout#}
                    <div class="row top">
                        <div class="col-md-3 checkbox">
                            {{ form_widget(form.isLayout) }}
                            {{ form_label(form.isLayout, 'Es una plantilla?') }}
                        </div>
                    </div>


                </div>
                 <div class="tab-pane" id="timeline_notifications">
                    {# {{ form_row(form.timelineActions) }} #}
                    {% set i = 0 %}
                    {% for tla in form.timelineActions%}
                        <div class="row top">
                            {{ form_label(tla.action, null , {'label_attr' : {'class' : 'col-md-2'}}) }}
                            {{ form_widget(tla.action, {'attr' : {'class' : 'hide'} }) }}

                            {# {{ form_label(tla.roles, null , {'label_attr' : {'class' : 'col-md-9'}}) }} #}
                            {{ form_widget(tla.roles, {'attr' : {'class' : 'col-md-9'} }) }}
                            {% set i = i+1 %}
                        </div>
                    {% endfor %}

                </div>

            </div>
           
            <div class="row top bottom-form">
                <div class="col-md-3 cancel">
                    <a href="{{ path('us_backend_simpletimeline_index') }}">
                    <img src="/images/acciones/acciones-eliminar.png" class="icon"/>
                    Cancelar
                </a>
                </div>
                <div class="col-md-3">
                    {{ form_widget(form.submit) }}
                </div>
            </div>

            <div class="hide">{{ form_rest(form) }}</div>

            {{ form_end(form) }}

           
            <a href="{{ path('us_backend_simpletimeline_addnewactivity',{'id':entity.id}) }}" class="modalLoader"  data-content-id="activity_new"><span class="btn-lg glyphicon glyphicon-plus"></span>&nbsp;Añadir Actividad</a>
           
           
            <div class="timeline-scheduler calendar row container mt-30" id="timeline_scheduler">

            </div>
            <div class="realtime-info">

            </div>
           
        {% endblock %}

        {% block bottom_scripts %}
            {{parent()}}
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
            <script src="/bundles/usbackend/js/js-webshim/minified/polyfiller.js"></script>


            {#librerias para que funcione el input date html5 en firefox
            todo: cargar solo para los navegadores que no lo soportan
            #}

            {% javascripts

                    'bundles/usbackend/js/TimeScheduler/js/moment.js'
                    'bundles/usbackend/js/TimeScheduler/js/timelineScheduler.js'
                    'bundles/usbackend/js/TimeScheduler/js/calendar.js'

                    'bundles/usbackend/js/jquery-simple-combobox/js/missed.js'
                    'bundles/usbackend/js/jquery-simple-combobox/js/jquery.scombobox.min.js'
                    'bundles/usbackend/js/jquery-simple-combobox/js/jquery.easing.min.js'


                    'bundles/usbackend/js/js-webshim/minified/modernizr-custom.js'
            %}
            <script src="{{ asset_url }}"></script>

            {% endjavascripts %}

            <script type="text/javascript">
                $(function() {
                    timeline.activities = {{timelineItems|json_encode()|raw}};
                    timeline.sections = {{timelineSections|json_encode()|raw}};
                    timeline.routes.getActivities = '{{path("us_backend_timeline_getactivities")}}';
                    timeline.editRP();
                    //visualizar el TimelineScheduler de las actividades
                    Calendar.Sections = timeline.sections;
                    Calendar.Items = timeline.activities;
                    Calendar.phases = timeline.phases;
                    Calendar.routes.updateDates = "{{path('us_backend_simpletimeline_updatedates')}}";
                    Calendar.routes.deleteActivity = "{{path('us_backend_simpletimeline_deleteactivity')}}";
                    Calendar.type = "simple";
                    Calendar.Init();
                });
            </script>

        {% endblock %}