{% extends 'portal_aspirante/notificacion/base.html.twig' %}

{% block notificacion_titulo %}
    <i class="material-icons medium left identidad-color-text">notifications</i>
    <h4 style="margin-top: 12px;">Notificaciones.</h4>
{% endblock %}

{% block notificacion_tarjeta_header %}
    <div class="left-icons">
        <span class="header-checkbox">
            {# <label>
                <input type="checkbox" onclick="toggle(this)">
                <span></span>
            </label> #}
            <span class="action-icons">
                <a href="{{ path('portal_aspirante_notificaciones') }}" title="actualizar"><i class="material-icons">refresh</i></a>
                
                {# <i class="material-icons">info_outline</i> #}
                {# <i class="material-icons delete-mails">delete</i> #}
            </span>
        </span>
    </div>
    <div class="list-content"></div>
    <div class="email-action">
        {# <span class="email-options">
            <i class="material-icons grey-text">more_vert</i>
        </span> #}
    </div>
{% endblock %}

{% block notificacion_tarjeta_body %}
    {% for notificacion_usuario in notificacion_usuarios %}
        {% if loop.first %}
            <div class=" animate fadeUp delay-1">
        {% endif %}

            <div class="email-line {{ notificacion_usuario.fechaHoraLeido ? 'read' : 'no-read' }} ">
                <div class="row">
                    {# <div class="col m1 s1"> #}
                        {# <label>
                            <input type="checkbox" name="mail">
                            <span></span>
                        </label> #}
                    {# </div> #}
                    <div class="col m6 s6">
                        <a class="list-content" href="{{ path('portal_aspirante_notificaciones_show', {'idView': notificacion_usuario.idView}) }}">
                            <div class="list-title-area">
                                <div class="user-media">
                                    <h6>{{ notificacion_usuario.notificacion.asunto }}</h6>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col m1 s2">  
                        {% if notificacion_usuario.notificacion.adjuntos|length > 0 %}
                            <i class="material-icons" style="margin:.575rem 0 .46rem 0">attach_file</i>
                        {% endif %}
                    </div>
                    <div class="col m2 s4">  
                        {% if notificacion_usuario.fechaHoraLeido %}
                            <span  class="badge grey lighten-5 grey-text text-accent-4">Leído</span>
                        {% else %}
                            <span  class="badge green lighten-5 green-text text-accent-4">Sin Leer</span> 
                        {% endif %}
                    </div>
                    <div class="right-aling col m2 s2">
                        <div class="list-date">
                            {{ notificacion_usuario.fechaHoraAlta ? notificacion_usuario.fechaHoraAlta|format_datetime('full', 'none', locale='es_AR') : '' }}
                            </br> {{ notificacion_usuario.fechaHoraAlta ? notificacion_usuario.fechaHoraAlta|date('H:i') ~ 'hs' : '' }}
                        </div>
                    </div>
                    {# <div class="col m2 action"> #}
                        {# <a href="#" title="eliminar">
                            <i class="material-icons delete-mails">delete</i>
                        </a> #}
                    {# </div> #}
                </div>
            </div>

        {% if loop.last %}
            </div>
        {% endif %}
    {% else %}
        <div class="no-data-found collection-item">
            <h6 class="center-align font-weight-500">No hay Notificaciones</h6>
        </div>
    {% endfor %}
{% endblock %}