<template>
  <div class="gallery--page page--container">
    <div class="s1">
      <div class="container">
        <div class="row images">
          <div class="col-12 col-sm-6 col-md-4 mb-4" v-for="(image,index) in gallery" :key="image._id">
            <a :href="image.image">
              <img :src="image.thumb" :alt="image.caption" :title="image.caption"/>
            </a>
          </div>
        </div>
        <!--				<div class="indicators">-->
        <!--					<div class="active">1</div>-->
        <!--					<div>2</div>-->
        <!--					<div>3</div>-->
        <!--				</div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gallery: null
    }
  },
  mounted() {
    new SimpleLightbox('.images a')
  },
  async asyncData({$axios, error}) {
    try {
      const gallery = await $axios.get('/api/public/gallery')
      return {
        gallery: gallery.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
        })
      } else {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
        });
      }
    }
  }
}
</script>
