<template>
  <div class="main-content content text-center">
    <div class="head pt-5 pb-5">
      <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
      <h3 class="mb-lg-5">Open source CSGO data platform</h3>
    </div>
    <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
      <div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
           @click="GoToPlayer(player.steamid64)">
        <div class="p-2">
          <div class="col-md-4 m-auto">
            <img :alt="player.name" :src="player.avatar">
          </div>
          <div class="col-md-8 m-auto">
            <p>{{ player.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <hr v-if="recentVisited !== null" class="m-auto text-muted">
    <div class="body container m-auto row mt-5 mb-5 justify-content-center">
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-code-branch"></i>

        <h4 class="fw-light">Open Source</h4>
        <p class="fw-light">All project code is open source and available for contributors to improve and
          modify.</p>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-chart-pie"></i>
        <h4 class="fw-light">In-Depth Data</h4>
        <p class="fw-light">Parsing replay files provides highly detailed match data.</p>
      </div>
      <div class="col-sm-12 col-md-4 col-lg-3">
        <i class="fas fa-money-bill-wave-alt"></i>
        <h4 class="fw-light">Free of Charge</h4>
        <p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
      </div>
    </div>
  </div>
</template>

<script>
import {GoToPlayer} from "../utils";

export default {
  name: 'Home',
  setup() {
    document.title = 'Home | csgoWTF'

    let recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
    if (recentVisited !== null) {
      recentVisited.reverse()
      if (window.innerWidth < 768) {
        recentVisited = recentVisited.filter(i => recentVisited.indexOf(i) < 6)
      }
    }

    return {recentVisited, GoToPlayer}
  }
}
</script>


<style lang="scss" scoped>
.fas {
  font-size: 5rem;
  padding-bottom: 1.5rem;
}
.main-content {
  .head {
    background-image: url("../images/map_screenshots/default.jpg");
    background-image: url("../images/map_screenshots/default.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    h1 {
      font-size: 5rem;

      &:before {
        content: 'CSGO';
        position: absolute;
        text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
      }
    }

    .text-up {
      font-size: 40%;
      vertical-align: top;
      text-shadow: 10px -5px 1rem rgba(0, 0, 0, 0.5);
    }

    h3 {
      font-size: 2.5rem;
      font-weight: lighter;
    }
  }

  .recent-search {
    max-width: 1100px;
    margin: 0 auto;

    .player-card {
      width: 180px;
      height: 75px;
      background: var(--bs-blue);
      border-radius: 15% 5%;

      &:hover {
        background: var(--bs-primary);
        cursor: pointer;
      }

      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }

      p {
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .recent-search {
      .player-card {
        height: 60px;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }

  .body, hr {
    p {
      font-size: .9rem;
    }

    svg {
      height: 80px;
      width: 80px;
      fill: currentColor;
    }
  }
}
</style>