<% layout('layouts/base')%>

<main class="backdrop">
    <div class="container">        
        <div class="row gy-3">
            <div class="col pb-1">
                <h1 class="text-secondary">Upcoming Meetings</h1>
                <p class="subhead-secondary">
                    Sync our calendar with yours!
                    <a target="_blank" href="https://support.google.com/calendar/answer/37100#add_via_link">(Instructions)</a>
                    <br><code>https://acm.mines.edu/schedule/ical.ics</code>
                </p>
            </div>
            
            <% for(let meeting of upcoming) { %>
                <div class="large-card shadow">
                    <div class="d-flex">
                        <h3 class="large-card-title">
                            <%= meeting.title %>
                        </h3>
                        <% if (meeting.rsvped) { %>
                            <h3 class="large-card-sidetitle">(RSVP'ed)</h3>
                        <% } else { %>
                            <% if (typeof user === 'object' && user) { %>
                                <form method="POST" action="/rsvp">
                                    <input type="hidden" name="meeting_id" value="<%= meeting.id %>">
                                    <button class="btn btn-outline-primary rsvp">RSVP</button>
                                </form>
                            <% } else { %>
                                <button class="btn btn-outline-primary rsvp" data-bs-toggle="modal" data-bs-target="#rsvp-<%= meeting.id %>-modal">RSVP</button>
                            <% } %>
                        <% } %>
                    </div>
                    <p class="large-card-subtitle"><%= meeting.description %></p>
                    <br>
                    <p><strong>Date</strong>: <span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></p>
                    <p><strong>Location</strong>: <%= meeting.location %></p>
                </div>
            <% } %> 
        </div> 
        <div class="row pt-4">
            <h1 class="text-secondary pb-2">Previous Meetings</h1>
            <div class="scroll previous-meetings-card shadow">
                <% for(let meeting of previous) { %>   
                    <div class="meeting-compact p-4">
                        <p><strong><%= meeting.title %></strong></p>
                        <p><strong>Description</strong>: <%= meeting.description %></p>
                        <p><strong>Date</strong>: <span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></p>
                        <p><strong>Location</strong>: <%= meeting.location %></p>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
</main>

<% if (!user) { %>
    <% for (let meeting of upcoming) { %>
        <div class="modal fade" id="rsvp-<%= meeting.id %>-modal" tabindex="-1" aria-labelledby="rsvp-<%= meeting.id %>-modal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="rsvp-<%= meeting.id %>-modal-label">RSVP for <%= meeting.title %></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="/rsvp" method="POST">             
                        <div class="modal-body">
                            <input type="hidden" name="meeting_id" value="<%= meeting.id %>">

                            <p><strong>Description</strong>: <%= meeting.description %></p>
                            <p><strong>Date</strong>: <span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></p>
                            <p class="mb-3"><strong>Location</strong>: <%= meeting.location %></p>

                            <div class="mb-3">
                                <label class="form-label" for="rsvp-<%= meeting.id %>-name">Name</label>
                                <input id="rsvp-<%= meeting.id %>-name" class="form-control" name="name" type="text" required placeholder="First Last" />
                            </div>

    						<label class="form-label" for="rsvp-<%= meeting.id %>-user-id">Email</label>
							<div class="input-group mb-3">
								<input id="rsvp-<%= meeting.id %>-user-id" name="user_id" type="text" class="form-control" placeholder="Mines username" aria-label="Mines username" aria-describedby="email-addon" required>
								<span class="input-group-text" id="email-addon">@mines.edu</span>
							</div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success">RSVP</button>
                        </div>   
                    </form>  
                </div>
            </div>   
        </div>
    <% } %>
<% } %>

<script src="/scripts/date.js"></script>
