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

<main>
	<div class="backdrop">
		<div class="container">	
			<div class="row gx-lg-4 gy-4">
				<div class="col">
					<h1 class="home-header">Mines ACM</h1>
					<div class="subhead-primary">
						Mines ACM is the largest Computer Science club at <a href="https://www.mines.edu">Mines</a> and
						strives
						to provide meaningful career opportunities and CS experiences to <a href="https://cs.mines.edu">CS@Mines</a> students.
						<br><br>
						We host weekly tech talks from recognized industry professionals, project meetings
						with diverse and interesting projects, skill workshops, and more.
						<br><br>
						To join Mines ACM, simply show up to our meetings every <b>Tuesday at 6:00pm</b>.
						Join our <a href="/about">Discord</a> for weekly meeting details and to stay in touch with our community.
						<br><br>
						<% if (meetings.length > 0) { %>
							<strong>Next meeting</strong>: 
							<%= meetings[0].title %>, <span class="datetime"><%= meetings[0].date %>,<%= meetings[0].duration %></span> in <%= meetings[0].location %>
							<% if(meetings[0].rsvped) { %>
								<span class="meeting-rsvped">(RSVP'ed)</span>
							<% } else { %>
								<% if (typeof user === 'object' && user) { %>
									<form class="d-inline" method="POST" action="/rsvp">
										<input type="hidden" name="meeting_id" value="<%= meetings[0].id %>">
										<button class="btn btn-outline-primary rsvp">I'm in!</button>
									</form>
								<% } else { %>
									<button class="btn btn-outline-primary rsvp" data-bs-toggle="modal" data-bs-target="#rsvp-<%= meetings[0].id %>-modal">I'm in!</button>
								<% } %>
							<% } %>
						<% } else { %>
							<strong>No upcoming meetings right now, check back soon!</strong>
						<% } %>
					</div>
				</div>
				<div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
					<% if (image) { %>
						<img src="uploads/<%= image.id %>" alt="<%= image.caption %>" class="home-image shadow" />
						<p class="home-image-caption"><%= image.caption %></p>
					<% } else { %>
						<img src="/static/images/default_acm.jpeg" alt="ACM officers at the 2021 Celebration of Mines." class="home-image shadow" />
						<p class="home-image-caption">ACM officers at the 2021 Celebration of Mines.</p>
					<% } %>
				</div>
			</div>
		</div>
	</div>

	<div class="backdrop-secondary">
		<div class="container">
			<div class="row gx-lg-4 gy-4">
				<div class="col">
					<h1 class="home-header-2">Upcoming Meetings</h1>
					<div class="home-card">
						<% if(meetings.length > 0) { %>
							<% for(let meeting of meetings) { %>
								<div class="meeting-compact py-3">
									<div class="d-flex align-items-center">
										<p class="home-header-3"><%= meeting.title %></p>
										<% if(meeting.rsvped) { %>
											<p class="home-sideheader">(RSVP'ed)</p>
										<% } 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><strong><span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></strong>
										in <strong><%= meeting.location %></strong></p>
									<p class="meeting-description"><%= meeting.description %></p>
								</div>
							<% } %>
						<% } else { %> 
							<div class="meeting">
								<p>No upcoming meetings! Check back soon for more.</p>
							</div>
						<% } %>
						<p class="pt-3"><a href="/schedule">View our full schedule here</a>.</p>
					</div>
				</div>
				<div class="col-lg-6">
					<h1 class="home-header-2">Our Events</h1>
					<div class="home-card">
						<div class="event">
							<p class="home-header-4">Tech Talks</p>
							<p>Tech talks are hour long talks from industry professionals, often
								CS@Mines alum.
								We've hosted representatives from Google, Chevron, Cloudflare, and more.</p>
						</div>
						<div class="event">
							<p class="home-header-4">Club Meetings</p>
							<p>Club meetings are a great way to meet new people and collaborate with others outside of school on a variety of <a
									href="/projects">projects</a>.</p>
						</div>
						<div class="event">
							<p class="home-header-4">Workshops</p>
							<p>Workshops are a great way to learn industry skills and share ideas. We regularly host our Git Workshop, 
								with seasonal workshops such as web workshops and even Minecraft mod development!</p>
						</div>
						<br>
						<p><strong>..and much more!</strong></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>

<% if (!user) { %>
    <% for (let meeting of meetings) { %>
        <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>
