<ng-container>
  <app-header [current_page]="'community'" height="460px" background_image="/public/img/backgrounds/community.jpg"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Community</h1>
      <h2>Talented people who help Altitude in more than one way.</h2>
    </div>
  </app-header>

  <main>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Current Nitro Boosters</h2>
        @for (member of getTeamMembers('discord') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Nitro booster</p>
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Social Media</h2>
        @for (member of getTeamMembers('socialmedia') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Social media</p>
          </div>
        }
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
        <p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Developers</h2>
        @for (member of getTeamMembers('developer') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Developer</p>
          </div>
        }
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
        <p style="text-align: center;">If you want to be a developer please reach out to .teri on Discord.</p>
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Crate Team</h2>
        @for (member of getTeamMembers('crate') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Crate team</p>
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Event Leaders</h2>
        @for (member of getTeamMembers('eventleader') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Event leaders</p>
          </div>
        }
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
        <p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Event Team</h2>
        @for (member of getTeamMembers('eventteam') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Event team</p>
          </div>
        }
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
        <div style="flex-direction: column;">
          <p style="text-align: center;">We occasionally open applications for the event team.</p>
          <p style="text-align: center;">If you're interested in joining you simply need to keep an eye on the Discord
            announcements.</p>
        </div>
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">YouTubers & Streamers</h2>
        @for (member of getTeamMembers('youtube') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Youtuber</p>
          </div>
        }
        @for (member of getTeamMembers('twitch') | async; track member) {
          <div class="member">
            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
                 height="160" width="160" style="width: 160px;">
            <h2>{{ member.name }}</h2>
            <p>Streamer</p>
          </div>
        }
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
        <div style="flex-direction: column;">
          <p style="text-align: center;"><a style="cursor: pointer;" (click)="toggleSection('yt-stream-req')"
                                            id="reqButton">{{ getTextForSection('yt-stream-req') }}</a></p>
        </div>
      </div>
      <div [hidden]="!isToggled('yt-stream-req')" [class.requirementSection]="isToggled('yt-stream-req')">
        <div style="flex-direction: column; justify-content: center; max-width: 800px;">
          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
          </p>
          <p style="text-align: center;">You need to have at least one recent stream/video on Altitude which we can use
            to gauge if your audience enjoys your content on Altitude.</p>
          <br>
          <p style="text-align: center;">Twitch: You need to be affiliate and get at least 5 viewers on average while
            streaming on Altitude.</p>
          <p style="text-align: center;">YouTube videos: You need at least 500 subs and have at least 200 views per
            video within a week on average for Altitude content.</p>
          <p style="text-align: center;">YouTube streamers: You need at least 500 subs and have at least 5 viewers on
            average while streaming on Altitude.</p>
          <br>
          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Before
            accepting or denying you we will watch your latest video/stream on Altitude (so keep your broadcasts public
            on twitch).</p>
        </div>
      </div>
    </section>
  </main>
</ng-container>
