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

<main class="backdrop">
    <div class="container">
        <div class="row gx-4 gy-4">
            <div class="col">
                <h1 class="text-secondary">Join our Discord</h1>
                <p>The Discord is a live chat where members of Mines ACM communicate with each other. Join to keep up to date with our events!</p>
                <ol>
                    <li><b>Create a Discord account</b>: Use our <a href="https://discord.gg/wUZezTgVzd">invite link</a> and create an account or sign in with an existing one.</li>
                    <li><b>Verify your email</b>: Make sure your email is verified so you can log in again!</li>
                    <li><b>Download the Discord app</b> on your mobile device or computer.</li>
                </ol>
                <button class="btn btn-outline-primary"><a href="https://discord.gg/wUZezTgVzd">Join Discord</a></button>
            </div>
            <div class="col-lg-6">
                <div class="row justify-content-center">                    
                    <iframe class="col" src="https://discord.com/widget?id=953659355562127371&theme=dark" width="350" height="350" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <h1 class="text-secondary">Our Team</h1>
        <p>Mines ACM is run by an amazing team of students with support from CS@Mines! Elections are run every year around March to decide roles.</p>
        
        <div class="row row-cols-auto mx-0 px-0 mt-1 gx-2 gy-2 justify-content-md-start justify-content-center">    
            <% for(let person of people) { %>
                <div class="col">
                    <div class="card">                    
                        <div class="team-picture-container">                    
                            <% if(person.avatar_id) { %>
                                <img class="team-picture" src="uploads/<%= person.avatar_id %>"/>
                            <% } else { %>
                                <img class="team-picture" src="/static/images/default_user.png"/>
                            <% } %>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title"><%= person.name %></h2>
                            <p class="card-subtitle"><%= person.title %></p>
                            <p class="card-text"><%= person.id + "(at) mines (dot) edu" %></p>
                        </div>
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</main>
