{% if sesion.actividades |length > 0 %}
    <aside id="right-sidebar-nav">
        <div id="slide-out-right" class="slide-out-right-sidenav sidenav rightside-navigation right-aligned" >
            <div class="row">
                <div class="slide-out-right-title">
                    <div class="col s12 border-bottom-1 pb-0 pt-1">
                        <div class="row">
                            <div class="col s2 pr-0 center">
                                <a href="#" class="sidenav-close"><i class="material-icons vertical-text-middle">clear</i></a>
                            </div>
                            <div class="col s10 pl-0">
                                <ul class="tabs">
                                <li class="tab col s4 p-0">
                                    <a href="#activity" class="active">
                                    <span>Actividades</span>
                                    </a>
                                </li>
                                <li class="indicator" ></li></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide-out-right-body row pl-3 ps ps--active-y">
        
                    <div id="activity" class="col s12 active" style="display: block;">
                        <div class="activity">
                        <p class="mt-5 mb-0 ml-5 font-weight-900">Actividades del Día {{ sesion.fechaSesion|format_date(pattern='eeee dd/MM/yyy', locale='es_AR') |capitalize }}</p>

                        <ul class="widget-timeline mb-0">
                            {% set actividadSesionRenderizada = false %}
                            {% for actividad in sesion.actividades|sort((a, b) => a.horaActividad <=> b.horaActividad) %}
                                {% if not actividadSesionRenderizada and sesion.horaSesion < actividad.horaActividad %}
                                    <li class="timeline-items timeline-icon-red active">
                                        <div class="timeline-time"></div>
                                        <h6 class="timeline-title">{{sesion.horaSesion|date('H.i')}}</h6>
                                        <p class="timeline-text">SESIÓN DEL CONSEJO</p>
                                        <p class="timeline-text"> {{ sesion.sedeDescripcion }}</p>
                                        {% if sesion.sedeDireccion %}
                                            <div class="timeline-content" >
                                                <i class="material-icons">location_on</i> 
                                                <a style="height: auto; line-height: 19px;" href="{{ sesion.sedeGIS ? sesion.sedeGIS : '#' }}" target="_blank">
                                                {{ sesion.sedeDireccion }}
                                                </a>
                                            </div>
                                        {% endif %}
                                    </li>
                                    {% set actividadSesionRenderizada = true %}
                                {% endif %}
                                <li class="timeline-items timeline-icon-green active">
                                    <div class="timeline-time"></div>
                                    <h6 class="timeline-title">
                                        {{ actividad.horaActividad | date('H.i') }}
                                        {% if is_granted(constant('App\\Security\\Voter\\SesionVoter::ACCESS_EDIT'), sesion) %}
                                            <button onclick="clickEliminarActividad(event)" 
                                                class="btn-floating btn-flat btn-small identidad-color darken-2 ml-2" title="Eliminar Actividad"
                                                data-url="{{ path('orden_actividad_delete', {'id': actividad.id}) }}">
                                                <i class="material-icons">delete</i>
                                            </button>
                                        {% endif %}
                                    </h6>
                                    <p class="timeline-text">{{ actividad.actividad }}</p>
                                    <p class="timeline-text">{{ actividad.sedeDescripcion }}</p>
                                    <div class="timeline-content" >
                                        <i class="material-icons">location_on</i> 
                                        <a style="height: auto; line-height: 19px;" href="{{ actividad.sedeGIS ? actividad.sedeGIS : '#' }}" target="_blank">
                                            {{ actividad.sedeDireccion }}
                                        </a>
                                        
                                    </div>
                                    {# <div class="timeline-content orange-text">Important</div> #}
                                </li>
                            {% endfor %}
                            {% if not actividadSesionRenderizada %}
                                <li class="timeline-items timeline-icon-red active">
                                    <div class="timeline-time"></div>
                                    <h6 class="timeline-title">{{sesion.horaSesion|date('H.i')}}</h6>
                                    <p class="timeline-text">SESIÓN DEL CONSEJO</p>
                                    <p class="timeline-text"> {{ sesion.sedeDescripcion }}</p>
                                    {% if sesion.sedeDireccion %}
                                        <div class="timeline-content" >
                                            <i class="material-icons">location_on</i> 
                                            <a style="height: auto; line-height: 19px;" href="{{ sesion.sedeGIS ? sesion.sedeGIS : '#' }}" target="_blank">
                                            {{ sesion.sedeDireccion }}
                                            </a>
                                        </div>
                                    {% endif %}
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                    <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                </div>
                <div class="ps__rail-y" style="top: 0px; height: 929px; right: 0px;">
                    <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 634px;"></div>
                </div>
            </div>
        </div>
    {# </div> #}
    </aside>
{% endif %}