<template>
  <md-tab id="aboutView" md-label="О нас">
    <div class="md-layout md-alignment-bottom-center">
      <CharacterImage :size="10" :hide_if_small="true" :img_src="require(`@/assets/images/characters/engi_n.png`)" :audio_src="require(`@/assets/sounds/nigger.mp3`)"/>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-15 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">О нас</h3>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
      <div class="md-layout-item md-size-40 md-small-size-100 md-alignment-bottom-center rounded-only">
        <h4 style="text-align: center; margin-top: 5%; margin-bottom: 0%">Кто мы?</h4>
        <p class="about-p" style="text-align: center; margin-top: 0%">и что мы делаем в вашем списке серверов?</p>
        <hr width="80%">
        <div class="md-layout md-alignment-top-center">
          <div class="md-layout-item md-size-45 md-small-size-45 md-medium-hide md-large-size-45" style="padding: 0% 2.5%">
            <img class="about-img" :src="require('@/assets/images/about/image3.png')">
            <img class="about-img" :src="require('@/assets/images/about/image4.png')">
            <img class="about-img" :src="require('@/assets/images/about/gameplay_1.jpg')">
          </div>
          <div class="md-layout-item md-size-45 md-medium-size-90" style="padding: 0% 2.5%">
            <p class="about-p">Факты 13 — это дружный сервачок русского народа, где вы можете хорошо отдохнуть со своими друзьями или тупыми рандомами после школы или завода.</p>
            <hr width="50%" align="right">
            <p class="about-p">У нас обширный список серверов, на котором стоят уникальные карты, сделанные картоделом <a class="about-a" href="https://steamcommunity.com/profiles/76561198141792724">Русский Путин</a></p>
            <hr width="50%" align="right">
            <p class="about-p">Прекрасные плагины недающие заскучать и написанные таким же прекрасным кодером <a class="about-a" href="https://steamcommunity.com/profiles/76561198087598690">ОТДЫХАЕМ</a></p>
            <hr width="50%" align="right">
            <p class="about-p">Посмотреть наши смешные до усрачки посты можно в Дискорде или в группе ВК, а так-же посетить мертвую группу стим</p>
            <div align="right">
              <DiscordSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/discord'" style="margin: 0% 1%;"/>
              <VkSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/vk'" style="margin: 0% 1%"/>
              <SteamSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/steam'" style="margin: 0% 1%"/>
            </div>
            <hr width="50%" align="right">
            <p class="about-p">Зачем ждать? Заходи сейчас! Если админ не разлил пиво на сервера</p>
            <hr width="50%" align="right">
            <p style="text-align: right">
            <a class="about-a" href="https://git.pblr-nyk.pro/gsd/Facti13.Frontend.VueMaterial">Сборка Frontend от {{this.$API.builddate !== null ? new Date(this.$API.builddate).toLocaleString() : 'Dev Build'}}</a>
              <br>
            <a class="about-a" href="https://git.pblr-nyk.pro/gsd/Facti13.Web.Backend.Java.V2">Сборка Backend от {{this.$API.stats["builddate"] !== null ? new Date(parseInt(this.$API.stats["builddate"])*1000).toLocaleString() : 'Dev Build'}}</a>
            </p>
          </div>
        </div>
        <hr width="80%">
        <p style="text-align: center">Остались вопросы? Пиши: <a class="aaa" href = "mailto:tf2@pblr-nyk.pro?subject = А как какать&body = Я хохол помогите">tf2@pblr-nyk.pro</a></p>
      </div>
    </div>
  </md-tab>
</template>

<script>
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import DiscordSvg from "@/components/Others/CustomSvg/DiscordSvg.vue";
import VkSvg from "@/components/Others/CustomSvg/VkSvg.vue";
import CharacterImage from "@/components/Others/Images/CharacterImage.vue";

export default {
  name: 'AboutView',
  components: {CharacterImage, VkSvg, DiscordSvg, SteamSvg}
}
</script>

<style>
.about-p {
  text-align: right;
  font-family: tf2secondary;
}

.about-img {
  border-radius: calc(2rem - 1px);
  padding: 5% 0%;
}

.about-a {
  font-family: tf2build;
  color: #fd8846;
  font-size: 0.8em;
  cursor: pointer;
}
</style>