let team = [
    {
        section: "Design and Tech",
        members: [
            {
                name: "Jieruei Chang",
                img: "jieruei.jpg",
                bio: `Hi, I'm Jieruei! I’m on the Tech team, in charge
                of making the website and ensuring all the computers behave so hackPHS 2022 goes smoothly. In
                addition, I help lead the Soccer Robotics, Competitive Programming, and Algorithms clubs at
                Princeton High School. I enjoy math, music, and making cool things with computer vision and
                machine learning. I’m excited to see all the cool projects!`
            },
            {
                name: "Connor Stewart",
                img: "connor.jpg",
                bio: `Hi, my name is Connor Stewart and I'm the director for the Design and Technology
                team at this year's hackPHS. My primary interests are in physics and math, and I spend most of my
                time studying those subjects. One of my main hobbies is technology and electronics because I love
                taking concepts and processes from physics and turning them into physical devices I can use. I'm also
                an avid musician, frequently composing and playing jazz music. I hope you enjoy this year's event!`
            },
            {
                name: "Emily Wu",
                img: "emily.jpg",
                bio: `Hi! I’m Emily and I am a senior at PHS. This is my first year doing hackPHS, where I
                helped design for the design/tech team. Outside of hackPHS, you can find me playing piano,
                painting, watching Stranger Things (go-to right now), and leading the yearbook. Looking forward to
                hackPHS this year, and I hope you guys enjoy as well!`
            },
            {
                name: "Ayush Shrivastava",
                img: "ayush.jpg",
                bio: `Hey! I’m Ayush, and I’m a sophomore at PHS. This is my first time helping to
                organize HackPHS (I’m on the tech team) and I’m super excited to see how it’ll turn out! Aside from
                programming, I like chemistry, biology, cooking, and playing with my dog, Oreo. I also like to watch
                movies (especially terrible ones I can poke fun at), listen to music, and travel (although that had to
                stop for a bit). I hope you all enjoy this year’s hackathon!`
            },
            {
                name: "Davita Wrone",
                img: "davita.JPG",
                bio: `Hi I’m Davita and I’m a senior at PHS. This is my first year being an organizer for hack PHS and I’m on the design/tech team. Aside from coding, I love listening to music, reading, and going on adventures with friends. Biology and English are my favorite subjects in school and I’m on the PHS debate team (don’t ask me about it if you don’t want to hear me talk for 20 minutes straight, though :)) I have loved attending the hackathon in previous years so I’m super excited to be on the logistical end this year!`
            }
        ]
    },
    {
        section: "Finance",
        members: [
            {
                name: "Steve Xing",
                img: "steve.jpg",
                bio: `Hey, I’m Steve! I’m the director for the Finance team this year. This is my third year with
                HackPHS, and I handled some tech related stuff last year. Outside of HackPHS, I’m an average R6
                player, tank enthusiast, and guitar wrangler. I also make the most terrible jokes, so hit me up if you
                want to be thoroughly disappointed. I hope you enjoy HackPHS 2022!
                `
            },
            {
                name: "Allen Gu",
                img: "allen.jpg",
                bio: `Hi guys, my name is Allen and I am a senior at PHS. I am thrilled to be part of hackPHS
                and I really want it to be a great event. Besides being a part of hackPHS, I enjoy playing the
                saxophone and building robots for my robotics team. Additionally, I love learning new things and
                teaching others about the topics I love. If you like sweating on noobs in Minecraft, hit me up!
                `
            },
            {
                name: "Nick Hagedorn",
                img: "nick.jpg",
                bio: `Hi! I’m Nick and this will be my first year on the Finance team. I love math and
                debate, and I like to compose orchestral music in my free time. I’m of the staunch opinion that
                people should also list what they dislike in “About Me” pages, so here we go: Among the few things
                I dislike in the world, I’m not fond of writing “About Me” pages. I also dislike word limits, which
                mean I can’t finish my sente—`
            },
            {
                name: "Raima Srivastava",
                img: "raima.jpg",
                bio: `Hi, I’m Raima! I am a sophomore at Princeton High School and I am a part of the
                finance group this year! I love to read, sing, play instruments, and hang out with my friends! I am
                super excited for HackPHS!`
            }
        ]
    },
    {
        section: "Outreach",
        members: [
            {
                name: "Francesca Gamio",
                img: "frankie.jpg",
                bio: `Hi! My name is Frankie and I am the director of hackphs outreach this year. I love
                hackphs because it is so inclusive and fun! Outside of hackphs I am the co-editor of the sports section of
                the tower, a varsity rower, on the cornerhouse board, co-leader of the crew-club this year and a peer group
                leader. I love to listen to music and sing. Some of my favorite hobbies are hiking, running, and
                swimming. Cannot wait for you all to attend the hackathon this year!
                `
            },
            {
                name: "Ishaan Banerjee",
                img: "ishaan.jpg",
                bio: `Hey everyone! I’m Ishaan and I’m a junior at PHS. This is my first year as an
                organizer and I’m excited to be working as a part of the outreach team! Outside of outreach, I’ve
                been a member of the Debate team and Studio Band for the last 2 years, and this year, I’ll be an
                officer of the one and only PHS Poetry Club. In my free time I like to compose music, listen to rap,
                and skate with my friends. Looking forward to meeting you all this year at HackPHS 2022!
                `
            },
            {
                name: "Rachel Guhathakurta",
                img: "rachel.jpg",
                bio: `Hi! My name is Rachel! This will be my second year as an organizer and I’m
                super excited to be a part of outreach. I am in the student council and a part of Latinos Unidos. When
                I’m not programming or doing math, I play soccer (winger here) and practice the flute. As a pen
                barterer, nothing beats a smooth scribble, so if your stationary game is strong come prepared with a
                pen and a price. I can’t wait to see ya’ll!!`
            },

            {
                name: "Nikita Medvedev",
                img: "nikita.jpg",
                bio: `I signed up to be an organizer for hackphs because I thought it could be a fun way
                to allow me to interact and make connections with new people. It also gives me the opportunity to
                learn new skills and involve myself in new areas of expertise. I love to play tennis competitively and
                play soccer with my friends. I also enjoy hanging out in town.
                `
            },
        ],
    },
    {
        section: "Logistics",
        members: [
            {
                name: "Arunima Suri",
                img: "arunima.jpeg",
                bio: `Hey! I’m Arunima (my friends call me Nima), and I am a senior at PHS. This is my second
                year being a director for hackPHS: this year I am director of logistics and last year I was director of
                design and tech. Outside of school, I enjoy baking, volunteering, playing golf, traveling, and
                watching tv. I am also currently super into concerts, so if you have any good music recs, let me
                know:) I am so excited to finally be able to return to a fully in person event, and I can’t wait to see all
                of you this fall at hackPHS!`
            },
            {
                name: "Amanda Sun",
                img: "amanda.jpg",
                bio: `Hi! My name is Amanda and this is my second year on the logistics team. I’m super
                excited to be back in person this year! Outside of hackPHS, I’m on the debate team and the orchestra.
                In my free time, I listen to music and read mysteries.`
            },
            {
                name: "Edmund Xie",
                img: "edmund.jpg",
                bio: `Hi I’m Edmund! I’m a sophomore this year at PHS. This is my first year working as
                part of the logistics team, and I’m very excited for this year’s event. My hobbies include sports,
                music, hanging out with my friends, and, of course, programming. I hope we are able to have a great
                event this year.`
            },
            {
                name: "Shrey Khetan",
                img: "shrey.jpg",
                bio: `Hi! I'm Shrey, and I am a junior at PHS. This is my second year working with the
                Logistics team and I am very excited to help organize the event and meet new people. Outside of
                hackPHS, I am part of the soccer robotics club and love doing different things related to STEM. In
                my free time, I like playing the clarinet and playing games with my friends. I hope you enjoy your
                hackathon this year!`
            },
            {
                name: "Brian Jiang",
                img: "brian.jpg",
                bio: `Hi! My name is Brian, and I'm currently a junior. This is my first year on the logistics team. Aside from hackPHS, I'm a part of the Computer and Robotics Club and an Ideas Center tutor. Outside of school, I love to hang out with friends and play video games. I'm excited to meet you all in November!`
            },
        ]
    },
];

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

let elem = document.getElementById("team-container");
let titleElem = document.getElementById("team-section-name");

let currSection = 0;

function createTeamSection(sectionIndex) {
    let section = team[sectionIndex];
    titleElem.innerHTML = `<h2>${section.section}</h2>`;
    let res = '';
    res += `<div class="img-grid">`;
    shuffleArray(section.members);
    for (let member of section.members) {
        res += `
        <div onclick="document.getElementById('${member.name}').showModal()">
            <img src="proxy.php?url=https%3A%2F%2F2022.hackphs.tech%2Fassets%2Fteam_img%2F%24%7Bmember.img%7D" style="object-fit: cover; aspect-ratio: 1/1">
            <h3>${member.name}</h3>
        </div>
        <dialog id="${member.name}">
            <img src="proxy.php?url=https%3A%2F%2F2022.hackphs.tech%2Fassets%2Fteam_img%2F%24%7Bmember.img%7D">
            <h2>${member.name}</h2>
            ${member.bio}
        </dialog>
        `;
    }
    res += `</div>`;
    elem.innerHTML = res;
    elem.style.opacity = 1;
}

function prev() {
    currSection--;
    currSection = (currSection + team.length) % team.length;
    elem.style.opacity = 0;
    setTimeout(() => {
        createTeamSection(currSection);
    }, 200);
}

function next() {
    currSection++;
    currSection = currSection % team.length;
    elem.style.opacity = 0;
    setTimeout(() => {
        createTeamSection(currSection);
    }, 200);
}

createTeamSection(0);