<template>
  <div class="page page-subscriptions">
    <Toolbar @showreferral="showReferralModal = true"/>
    <zc-dialog v-if="showReferralModal" v-bind="loginDialog" @onClose="showReferralModal=false">
      <Referral
        referralType="zap"
        :zapRequestId="parseInt(zapRequestId)"
      />
    </zc-dialog>
    <section class="body">
      <div class="container">
        <template v-if="fetchingSubscriptions">
          <div class="loader"/>
          Fetching Active Subscriptions
        </template>
        <template v-else>
          <a @click="setSubscription(subscription)" class="subscription" v-for="subscription in User.subscriptions">
            <div class="car-image" :style="{backgroundImage: `url(${subscription.car_img_url})`}">
            </div>
            <p>{{subscription.status == 'started' ? 'View' : 'Proceed with'}} Subscription for {{subscription.cargroup_name}}</p>
            <div v-if="processingSubscription == subscription.id" class="loader"></div>
            <div v-else class="proceed-chevron mdi mdi-chevron-right"></div>
          </a>
        </template>
      </div>
    </section>
    <Footer />
  </div>
</template>

<script>
import './subscriptions.scss';

import SubscriptionsPage from './subscriptions';
export default SubscriptionsPage;
</script>
<style type="text/css">
    .footer-content {
        display: none;
    }
</style>