<template>
  <f7-page name="newupdate">
    <f7-navbar title="Update Your App"></f7-navbar>
    <f7-block-title align="center">
      <h1>App Update Available</h1>
    </f7-block-title>
    <f7-block>
      <f7-row v-if="app_version == 'Android'">
        <f7-col width="100" medium="50">
          <div class="page-content" align="center">
            <h3>Update App from Google Play</h3>
            <p>Please click below link to update Penpal America App</p>
            <f7-link
              href="https://play.google.com/store/apps/details?id=com.penpalamerica.penpal"
              external
            >
              <img
                :src="
                  $device.desktop
                    ? '/images/googleimage.png'
                    : 'file:./images/googleimage.png'
                "
                width="50%"
                height="50%"
              />
            </f7-link>
          </div>
        </f7-col>
      </f7-row>
      <f7-row>
        <f7-col width="100" medium="50">
          <div class="page-content" v-if="app_version == 'iOS'">
            <h3>Update App from App Store</h3>
            <f7-link
              href="https://play.google.com/store/apps/details?id=com.chatme24.chatme24"
              external
            >
              <img
                :src="
                  $device.desktop
                    ? '/images/appleimage.png'
                    : 'file:/images/appleimage.png'
                "
                width="50%"
              />
            </f7-link>
          </div>
        </f7-col>
      </f7-row>
      <f7-row>
        <div class="wrapper">
          <f7-link href="/firstpage/">Go Back To Home</f7-link>
        </div>
      </f7-row>
    </f7-block>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      image1: require("@/assets/images/googleimage.png"),
      image2: require("@/assets/images/appleimage.png"),
    };
  },
  computed: {
    app_version() {
      return this.$store.getters.app_version;
    },
  },
  created() {
    // console.log("hello");
    // this.$store.dispatch("getAppVersion");
  },
};
</script>
<style scoped>
.wrapper {
  text-align: center;
  margin-left: 100px;
}
</style>