<template>
  <div class="learning--page page">
    <!-- <hero title="آموزش" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div v-for="(item, index) in learning.docs" :key="item._id" class="col-12">
            <div class="post fadeInAnim" :class="index % 2 ? 'reverse' : null">
              <div class="row">
                <div class="col-12 col-lg-6 align-self-center order-lg-0 order-1">
                  <div class="txtBox">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.short_description }}</p>
                    <nuxt-link :to="{ name: 'learning-post+', params: { post: item.title } }" class="btn btn-primary"
                      >مشاهده</nuxt-link
                    >
                  </div>
                </div>
                <div class="col-12 col-lg-6 align-self-center order-lg-1 order-0">
                  <nuxt-link :to="{ name: 'learning-post+', params: { post: item.title } }" class="imgBox">
                    <img :src="item.thumb" :alt="item.title" />
                    <i v-if="item.video" class="far fa-play-circle"></i>
                    <div class="imgMask"></div>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>

          <div v-if="!learning.docs.length" class="col-12 no-post">
            <h2>هیچ پستی در این صفحه وجود نداد.</h2>
          </div>
        </div>
      </div>
    </section>
    <section v-if="paginate" class="s2">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <el-pagination
              v-if="paginate"
              layout="prev, pager, next"
              :current-page="Number($route.query.page)"
              :page-count="Number(learning.totalPages)"
              @current-change="pageNumber"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </section> -->
    <section class="col-12 apps">
      <div class="btns">
        <!-- <a href="https://installer.asan-service.com" target="_blank">
          <img src="/assets/img/footer/pwaApp.png" alt="icon" />
        </a> -->
        <!-- <a href="https://installer.asan-service.com" target="_blank">
          <img class="firstImage" src="/assets/img/footer/AAA.png" alt="icon" />
        </a> -->
        <a href="https://cafebazaar.ir/app/com.verity.app" target="_blank">
          <img src="/assets/img/footer/dwnld.jpg" alt="icon" />
        </a>

        <!-- <button>
          <a :href="config.andoridAppURL" target="_blank">
            <img :width="100" src="/assets/img/footer/androidApp.png" alt="icon" />
          </a>
        </button> -->
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'AppIndex',
  data() {
    return {
      newsletter: '',
      help: null,
      brands: []
    }
  },
  computed: {
    config() {
      return this.$config
    }
  },
  mounted() {
    this.$axios.get(`/api/public/brand`).then(res => {
      this.brands = res.data
    })
    // fetch help page info
    this.$axios.get('/api/public/help?front=true').then(res => (this.help = res.data))

    // split text
    const copyright = new this.$ATextSplitter({ rtl: false, letterSpace: 3, wordSpace: 7 })
    copyright.injectToElement('copyright')

    // animate text
    this.$gsap
      .timeline({ repeat: -1 })
      .from($('#copyright .tsLetters'), { opacity: 0.2, duration: 0.7, stagger: 0.08 })
      .to($('#copyright .tsLetters'), { opacity: 0.2, duration: 0.7, stagger: 0.08 }, 0.4)
  },
  methods: {
    registerNewsletter() {
      this.newsletter = ''
      return this.$message({
        type: 'warning',
        message: 'مشکلی در ثبت اطلاعات پیش آمده'
      })
    }
  }
}
</script>

<style scoped>
.apps {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  max-width: 100vw;
}
.apps img {
  width: 300px;
}
.firstImage {
margin-top: 200px;
}
.logoz {
  z-index: 10;
  background-color: #065495;
  padding-right: 0px !important;
  padding-left: 0px !important;
}
.site--footer {
  display: none !important;
}
.btns{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
