<!DOCTYPE html>
<html>

<head>
    <% include ./Layout/Head.ejs %>
</head>

<body>
    <div id="root" class="g4caf50">

        <% include ./Layout/Navbar.ejs %>
        <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

        <div class="slider">
            <ul class="slides">
                <%for(var i=0;i<Conferences.length;i++){%>
                <li>
                    <%if(i%2){%>
                    <img style="filter: blur(3px);
                        -webkit-filter: blur(3px);" src="/img/0.jpg">
                    <%}else{%>
                    <img style="filter: blur(3px);
                        -webkit-filter: blur(3px);" src="/img/1.jpg">
                    <%}%>
                    <div class="caption center-align">
                        <p class="flow-text">
                            <h1 class="hide-on-med-and-down">
                                <b>
                                    <%=Conferences[i]._name%>
                                </b>
                            </h1>
                            <h4 class="hide-on-large-only">
                                <b>
                                    <%=Conferences[i]._name%>
                                </b>
                            </h4>
                        </p>
                        <a href="../conference/<%=Conferences[i]._id%>" class="waves-effect waves-light btn pulse">Details</a>
                    </div>
                </li>
                <%}%>
            </ul>
        </div>
        <!-- /////////////////////////////////////////////////////// -->

        <h4 class="themePrimary white-text center">Published Papers</h4>
        <div class="container">
            <ul class="collapsible popout">
                <%for(var i=0;i<Papers.length;i++){%>
                <li class="btnClose white">
                    <div class="row">
                        <div class="collapsible-header valign-wrapper">
                            <p class="flow-text col s5">
                                <%=Papers[i]._title%>
                            </p>
                            <p class="flow-text col s1"> | </p>
                            <p class="flow-text col s5">
                                <%=Papers[i]._author%>
                            </p>
                            <i class="material-icons">keyboard_arrow_down</i>
                        </div>
                    </div>
                    <div class="btnClose collapsible-body">
                        <blockquote>
                            <p class="flow-text"><b>Introduction:</b>
                                <%=Papers[i]._intro%>
                            </p>
                        </blockquote>

                        <form method="GET" action="/paper">
                            <div class="center">
                                <input type="hidden" name="PAPER" value="<%=Papers[i]._id%>">
                                <button type="submit" name="AS" value="view" class="z-depth-0 waves-effect waves-light btn-small marginAll">View</button>
                                <a onclick="btnClose()" class="z-depth-0 waves-effect waves-light btn-small marginAll">Close</a>
                            </div>
                        </form>
                    </div>
                </li>
                <%}%>
            </ul>
        </div>

        <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
        <% include ./Layout/Footer.ejs %>
    </div>
    <!-- //////////////////////////////////////////////////////////////////////////////////// -->
    <% include ./Layout/ScriptTag.ejs %>

</body>

</html>