{% extends "layout.html" %}

{% block app_content %}

<h1>About ACM</h1>

<h4>tl;dr</h4>
<p>We are a group of computer science enthusiasts that hosts computer science
related events like programming competitions and workshops, and more casual
events as well! If you’re interested in joining, stop by our meetings! We're
very friendly. You can find a list of our upcoming events and meetings <a href="{{
                                                                       url_for('main.events')
                                                                       }}">here</a>.</p>

<h4>Exec Board</h4>
<p><em>To contact our exec board, shoot us an email at acm [at] wpi.edu!</em></p>
<div class="row">
   <div class="col"> 
       <div class="card" id="president">
           <img class="card-img-top" id="President-img"src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="President"> 
           <div class="card-body">
                <h5 class="card-title">President</h5> 
                <p class="card-text" id="President-name">Unavailable</p>
           </div>
       </div>
   </div> 
   <div class="col"> 
       <div class="card" id="vice-president">
           <img class="card-img-top" id="Vice President-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Vice President"> 
           <div class="card-body">
                <h5 class="card-title">Vice President</h5> 
                <p class="card-text" id="Vice President-name">Unavailable</p>
           </div>
       </div>
   </div> 
   <div class="col"> 
       <div class="card" id="treasurer">
           <img class="card-img-top" id="Treasurer-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Treasurer"> 
           <div class="card-body">
                <h5 class="card-title">Treasurer</h5> 
                <p class="card-text" id="Treasurer-name">Unavailable</p>
           </div>
       </div>
   </div> 
</div>
<div class="row">
   <div class="col"> 
       <div class="card" id="secretary">
           <img class="card-img-top" id="Secretary-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Secretary"> 
           <div class="card-body">
                <h5 class="card-title">Secretary</h5> 
                <p class="card-text" id="Secretary-name">Unavailable</p>
           </div>
       </div>
   </div> 
   <div class="col"> 
       <div class="card" id="pr-chair">
           <img class="card-img-top" id="PR Chair-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="PR Chair"> 
           <div class="card-body">
                <h5 class="card-title">PR Chair</h5> 
                <p class="card-text" id="PR Chair-name">Unavailable</p>
           </div>
       </div>
   </div> 
   <div class="col"> 
       <div class="card" id="events-coordinator">
           <img class="card-img-top" id="Events Coordinator-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Events Coordinator"> 
           <div class="card-body">
                <h5 class="card-title">Events Coordinator</h5> 
                <p class="card-text" id="Events Coordinator-name">Unavailable</p>
           </div>
       </div>
   </div>  
</div>

<div class="row">
   <div class="col"> 
       <div class="card" id="hackathon-manager-1">
           <img class="card-img-top" id="Hackathon Manager 1-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Hackathon Manager"> 
           <div class="card-body">
                <h5 class="card-title">Hackathon Manager</h5> 
                <p class="card-text" id="Hackathon Manager 1-name">Unavailable</p>
           </div>
       </div>
   </div>  
   <div class="col"> 
       <div class="card" id="hackathon-manager-2">
           <img class="card-img-top" id="Hackathon Manager 2-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="Hackathon Manager"> 
           <div class="card-body">
                <h5 class="card-title">Hackathon Manager</h5> 
                <p class="card-text" id="Hackathon Manager 2-name">Unavailable</p>
           </div>
       </div>
   </div>  
   <div class="col"> 
       <div class="card" id="system-administrator">
           <img class="card-img-top" id="System Administrator-img" src="{{ url_for('static',
                                          filename='img/officers/placeholder.png')
                                          }}" alt="System Administrator"> 
           <div class="card-body">
                <h5 class="card-title">System Administrator</h5> 
                <p class="card-text" id="System Administrator-name">Unavailable</p>
           </div>
       </div>
   </div>  
    
</div>

<h4 class="mt-3">History</h4>
<p>The Association for Computing Machinery (ACM) established student chapters to
provide an opportunity for students to play a more active role in the
Association and its professional activities. By encouraging organization of
student chapters on college and university campuses, the Association is able to
introduce students to the benefits of professional organization. These benefits
include regular meetings that encourage and enhance learning through exchange of
ideas among students as well as between established professionals and students.
Members of a student chapter may also take advantage of the activities and
services provided by ACM, including the lectureship program, student programming
and tutorial contests, and the publications program. Student chapters provide an
obvious setting for the development and demonstration of leadership
capabilities. Finally, students find the various activities of ACM and its
student chapters both professionally and socially exciting as well as
rewarding.</p>

<p>Initially, the ACM organizational structure was based solely on individual
membership. In 1954, as a result of growth and the wishes of its members,
chapters were officially formed. These chapters provided a means for people in a
geographical area with a common interest in computing to exchange ideas and
sponsor professional activities. Since the recognition of the Dallas-Fort Worth
Chapter in 1954 as the first ACM chapter, the number of professional chapters
has grown steadily to over 113 today, and they have become an integral part of
the ACM organization. Student chapters were authorized by the ACM in 1961; the
first was chartered at the University of Southwestern Louisiana.</p>

<p>Student chapters provide important services to ACM student members and offer
a means whereby the ACM can provide scientific information on the industry to
other members of the college or university community as well as to the general
public. Moreover, professional chapters and student chapters are focal points
for feedback from members to the ACM leadership. Finally, ACM Chapters are a
training ground for the Association’s future leaders. Over one-third of the
current members of the ACM Council began their volunteer work with ACM as
officers in the chapter system.</p>

<h4>Other CS Clubs</h4>
<p>You may also be interested in joining:</p>
<ul>
    <li><a href="https://mywpi.wpi.edu/wics/home/" target="_blank">Women in Computer
        Science (WiCS)</a> -- a student group that aims to foster a community
    for students who support the advancement of women in computer science and
    related fields at WPI</li>
    <li><a href="http://mywpi.wpi.edu/WiCyS/club_signup" target="_blank">Women in Cybersecurity</a>
    -- WPI's Women in Cybersecurity club is a supportive hub for women in the field, offering practical workshops, networking opportunities, and mentorship programs where everyone is welcome no matter identity or skill level. With a focus on skill-building and professional development, the club strives to foster diversity and inclusion within the cybersecurity department at WPI</li>
    <li><a href="https://web.cs.wpi.edu/~csc/" target="_blank">Cybersecurity
            Club</a> -- The Cyber Security Club at the Worcester Polytechnic Institute aims to educate those interested in cyber security and to facilitate an informative environment where students from all educational levels and backgrounds can master safe practices. The club hosts cyber labs and competitions locally and nationally where members can practice what they have learned. Members are not required to attend these competitions, but they are encouraged to continue learning</li>
    <li><a href="http://users.wpi.edu/~upe/" target="_blank">Upsilon Pi
            Epsilon</a> -- The CS honor society</li>
</ul>
    
<script charset="utf-8">
   pres = document.querySelector("#president")
   vp = document.querySelector("#vice-president")
   sec = document.querySelector("#secretary")
   tres = document.querySelector("#treasurer")
   hm1 = document.querySelector("#hackathon-manager-1")
   hm2 = document.querySelector("#hackathon-manager-2")
   pr = document.querySelector("#pr-chair")
   sys = document.querySelector("#system-administrator")
   ec = document.querySelector("#events-coordinator")
    
    officers = new Request("/api/officers/current")
    fetch(officers).then(async (res) => {
        data = await res.json()
        {% if config["DEBUG"] %}
        console.log(data)
        {% endif %}

        for (var i = 0; i < data.length; i++) {
            let title = data[i]["position"]
            document.getElementById(title + "-name").innerHTML = data[i]["name"]
            document.getElementById(title + "-img").src = data[i]["img"]
        }
    });
</script>
{% endblock %}
