<ng-container>
  <app-header [current_page]="'vote'" height="460px" background_image="/public/img/backgrounds/town2.jpg"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Vote Daily!</h1>
      <h2>Support the server and help us conquer the world by voting on the websites below every day. Thank you for
        supporting the Altitude server!</h2>
    </div>
  </app-header>

  <main>
    <section class="darkmodeSection">
      <section class="columnSection">
        <div class="columnContainer">
          <div class="columnParagraph">
            <h2 style="text-align: center">Daily Vote Crate</h2>
            <p>Vote on at least 5 sites to get a crate key every day! Crates contain a vast treasure of collectibles and
              valuables. You can open vote crates at spawn on the survival server that you received the key on.</p>
            <p><span style="font-family: 'opensans-bold', sans-serif;">Please note:</span> Days reset at midnight UTC
              and votes do not process until you log in!</p>
          </div>
        </div>
        <div class="columnContainer">
          <div class="columnParagraph">
            <h2 style="text-align: center;">Weekly Vote Crate</h2>
            <p>Vote at least 28 times in a week (that's 4 times a day for 6 days!) to get a Weekly Crate Key! Weekly
              Crates have higher value rewards, exclusive collectibles, and items with normally impossible
              enchantments.</p>
            <p><span style="font-family: 'opensans-bold', sans-serif;">Please note:</span> Weeks reset on Saturday at
              midnight UTC and votes do not process until you log in!</p>
          </div>
        </div>
        <div class="voteDisclaimer">
          <h3 style="text-align: center;">Disclaimers & Info</h3>
          <p style="text-align: center;">You can only store 7 daily crate keys, 2 weekly crate key and 2 quest crate
            keys.</p><br>
          <p style="text-align: center;">Voting within 30 minutes of midnight UTC can cause your votes to glitch. Keys
            lost due to voting too close to midnight UTC will not be reimbursed.
            <!--<p style="text-align: center;">Crate drop rates can be found <a href="/crate.php">here</a>.</p>-->
        </div>
      </section>
    </section>
    <section class="voteSection">
      @if (voteStats) {
        <p style="text-align: center">You have voted {{ voteStats.voteStats.total }} times
          and {{ voteStats.voteStats.weekly }} this week. You
          are
          on a {{ voteStats.voteStreak.dailyStreak }} day vote streak!</p>
      }
      <div class="container voteContainer">
        @for (voteSite of Object.keys(voteSites); track voteSite) {
          <div class="vote">
            <h2>{{ voteSite }}</h2>
            <div>
              <a (click)="clickVote(voteSite)" (contextmenu)="clickVote(voteSite); $event.preventDefault()"
                 target="_blank" rel="noopener"
                 [href]="voteSites[voteSite]">
                <div class=button-outer [class.not-available-button-outer]="!canVote(voteSite)"
                     [class.available-button-outer]="canVote(voteSite)">
                  <span class="button-inner">
                    {{ getVoteText(voteSite) }}
                  </span>
                </div>
              </a>
            </div>
            @if (voteStats) {
              <div class="voteStats">
                <p>Last voted: {{ getLastVoted(voteSite) | TimeAgo: true }}</p>
              </div>
            }
          </div>
        }
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container" style="justify-content: center; text-align: center;">
        <div class="paragraph">
          <h2 style="font-size:3em; padding-bottom: 30px;">Reddit</h2>
          <p>We are also listed on <a href="https://www.reddit.com/r/mcservers/">/r/mcservers</a>! We create a new
            listing every 7 days, and comment on several of the [Wanted] ads. You can find and upvote our listing as
            well as comment if you have a Reddit account.</p>
          <a target="_blank" rel="noopener" href="https://www.reddit.com/r/mcservers/">
            <div style="margin-top: 30px;" class="button-outer">
              <span class="button-inner">Visit /r/mcservers</span>
            </div>
          </a>
        </div>
      </div>
    </section>
    <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
      <span></span>
      <p style="display: none;">Scroll Down</p>
    </a>
  </main>
</ng-container>
