<section class="classlist">
    <div class="classlist__container">
        <h1 class="classlist__title">Vandaag</h1>
        <ul class="classlist__list">
            <% rooms.forEach((room,i)=>{%>
                <li class="classlist__list-item">
                    <a class="classlist__link" href="/seating?room=<%= room.id %>&name=<%= room.name.replace(/ /g,'_') %>">
                        <div class="classlist__list-container">
                            <span class="classlist__list-item-label classlist__name">
                                <%= room.name %>
                            </span>
                            <span class="classlist__list-item-label classlist__teacher">
                                <%= room.teacher %>
                            </span>
                        </div>
                        <span class="classlist__list-item-label classlist__timestamp">                        
                            <span class="start">
                                <%= room.timestamp.start %>
                            </span>
                            -
                            <span class="end">
                                <%= room.timestamp.end %>
                            </span>
                        </span>
                        <% if(typeof room.present !== "undefined"){ %>
                        <div class="classlist__list-container">
                            <% if(room.present.teacher.present && room.present.students.present){ %>
                            <span class="classlist__present-label">
                                Al aanwezig
                            </span>
                            <% } %>
                            <div class="classlist__present-container">
                                <% if(!room.present.teacher.present && !room.present.students.present){ %>
                                    <div class="">
                                        <span>Nog niemand aanwezig...<br><br></span>
                                    </div>
                                <% } %>
                                <% if(room.present.teacher.present){ %>
                                <div class="">
                                    <span>Docent</span>
                                    <div class="user-bubble teacher">
                                        <img class="user-bubble__image" src="<%= room.present.teacher.image %>" alt="profile picture">
                                    </div>
                                </div>
                                <% } %>
                                <% if(room.present.students.present){ %>
                                <div class="">
                                    <span>Student(en)</span>
                                    <% if(room.present.students.amount >= 5){ %>
                                        <div class="user-bubble__group student">
                                            <div class="user-bubble text">
                                                <span>
                                                    <%= room.present.students.amount %>+
                                                </span>
                                            </div>
                                            <% for(i=0; i < 3; i++){ %>
                                                <div class="user-bubble student">
                                                    <img class="user-bubble__image" src="<%= room.present.students.images[i] %>" alt="profile picture">
                                                </div>
                                            <% } %>
                                        </div>
                                    <% }else{ %>
                                        <div class="user-bubble__group student">
                                            <% for(i=0; i < room.present.students.amount; i++){ %>
                                                <div class="user-bubble student">
                                                    <img class="user-bubble__image" src="<%= room.present.students.images[i] %>" alt="profile picture">
                                                </div>
                                            <% } %>
                                        </div>
                                    <% } %>
                                </div>
                                <% } %>
                            </div>
                        </div>
                        <div class="button button--full-width button--abs button--abs-bottom button--abs-left">
                            <span>
                                Deelnemen 
                                <% include ../svg/enterClass.ejs %>
                            </span>
                        </div>
                        <% } %>
                    </a>
                </li>
            <% }) %>
        </ul>
    </div>
    <div class="classlist__container">
        <h1 class="classlist__title">Morgen</h1>
        <ul class="classlist__list">
            <% roomsNext.forEach((room,i)=>{%>
                <li class="classlist__list-item">
                    <a class="classlist__link" href="/seating?room=<%= room.id %>&name=<%= room.name.replace(/ /g,'_') %>">
                        <div class="classlist__list-container">
                            <span class="classlist__list-item-label classlist__name">
                                <%= room.name %>
                            </span>
                            <span class="classlist__list-item-label classlist__teacher">
                                <%= room.teacher %>
                            </span>
                        </div>
                        <span class="classlist__list-item-label classlist__timestamp">                        
                            <span class="start">
                                <%= room.timestamp.start %>
                            </span>
                            -
                            <span class="end">
                                <%= room.timestamp.end %>
                            </span>
                        </span>
                        <% if(typeof room.present !== "undefined"){ %>
                        <div class="classlist__list-container">
                            <span class="classlist__present-label">Al aanwezig</span>
                            <div class="classlist__present-container">
                                <div class="">
                                    <span>Docent</span>
                                    <div>
                                        
                                    </div>
                                </div>
                                <div>
                                    <span>Student(en)</span>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <% } %>
                    </a>
                </li>
            <% }) %>
        </ul>
    </div>
</section>