<ng-container>
  <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">>
    <div class="title" header-content>
      <h1>Staffing Team</h1>
      <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
        create Altitude, to create home. This is where the magic happens.</h2>
    </div>
  </app-header>

  <main>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Management</h2>
        @for (member of getTeamMembers('owner') | 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>Owner</p>
          </div>
        }
        @for (member of getTeamMembers('manager') | 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>Manager</p>
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Admins</h2>
        @for (member of getTeamMembers('admin') | 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>Admin</p>
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Head Moderators</h2>
        @for (member of getTeamMembers('headmod') | 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>Head Mod</p>
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Moderators</h2>
        @for (member of getTeamMembers('moderator') | 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>
          </div>
        }
      </div>
    </section>
    @if ((getTeamMembers('trainee') | async)?.length ?? 0 > 0) {
      <section class="darkmodeSection">
        <div class="container teamContainer">
          <h2 class="sectionTitle">Trainees</h2>
          @for (member of getTeamMembers('trainee') | 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>
            </div>
          }
        </div>
      </section>
    }
  </main>
</ng-container>
