{% extends 'base.html.twig' %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $(document).ready(function(){
            $('.datepicker').datepicker({
                autoClose: true,
                showClearBtn: true,
                format: 'dd/mm/yyyy',
                container: 'body',
                onDraw: function () {
                    // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
                    $('.datepicker-container').find('.datepicker-select').addClass('browser-default');
                    $(".datepicker-container .select-dropdown.dropdown-trigger").remove()
                }
            });
        });
    
    </script>
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a class="active">Material de Trabajo</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left identidad-color-text">business_center</i>
    <h4 style="margin-top: 12px;">Material de Trabajo</h4>
{% endblock %}

{% block body %}

    <div class="card">
        <div class="card-content">
            <div class="row">
                {{ form_start(form) }}
                    <div class="input-field col s12 m6 l6">
                        {{ form_widget(form.textoBusqueda) }}
                        {{ form_label(form.textoBusqueda) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaPublicacionDesde) }}
                        {{ form_widget(form.fechaPublicacionDesde) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaPublicacionHasta) }}
                        {{ form_widget(form.fechaPublicacionHasta) }}
                    </div>
                    <div class="input-field col m2 s12 l2">
                        <button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" >Buscar<i class="material-icons right">search</i></button>
                    </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>

    {# <br>
    <br>
    <br> #}

    <table class="table">
        <thead>
            <tr>
                <th>Asunto</th>
                <th>Fecha - Hora</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
        {% for notificacion in notificacions %}
            <tr {% if notificacion.estadoNotificacion == "Prioritario" or notificacion.estadoNotificacion == "Prioritario_Privado" %} class="identidad-color lighten-5"{% endif %}>
                <td>{{ notificacion.asunto }}</td>
                <td>
                    {{ notificacion.fechaPublicacion ? notificacion.fechaPublicacion|date('d/m/Y') : '' }} - 
                    {{ notificacion.horaPublicacion ? notificacion.horaPublicacion|date('H:i') : '' }}
                </td>
                <td>
                    <a href="{{ path('s_n_notificacion_show_view', {'idView': notificacion.idView}) }}" 
                        class="btn-floating btn-flat identidad-color darken-2" title="Ver notificación">
                        <i class="material-icons">visibility</i>
                    </a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="3">
                    No hay ningún material de trabajo que coincida con su búsqueda. 
                    Intente con una distinta configuración de los filtros de búsqueda.
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock %}