<template>
    <div class="smart-credit-pkg">
        <div class="link-area">
            <a href='#' @click="goToLogin">
                Already a member? Log In
            </a>

        </div>
        <div  style="margin-top: 40%;" class="report-card p-3 report-card--best report-card__aside mt-5 report-card--info">
            <div class="report-card__header pb-3">
                <h5>
                    <strong>
                        <img :src="`${img_url}`" alt="SmartCredit" class="provider-logo">
                        {{package.labels[package_id]}}
                    </strong>
                </h5>
            </div>
            <div class="report-card__price p-2" >

                <h4 v-if="is_free !== '1'"> ${{package.prices[package_id]}}/mo  </h4>
                <h3 v-if="is_free === '1'" style="color: red"> Free Limited Time  </h3>
                <span> Cancel Anytime </span>

            </div>
            <div class="report-card__points py-2 pt-3">
                <ul class="points">
                    <li>
                        <i class="fas fa-check-circle"></i>
                        <strong> Unlimited {{company_Name}} Challenges/Letter Attacks </strong>
                    </li>
                </ul>
            </div>
            <div class="report-card__points py-2">
                <ul class="points" >
                    <li  v-for="subitem in reportProviders.IdentityIQPoints"><i class="fas fa-check-circle"></i> {{subitem}}</li>
                </ul>
            </div>

            <div class="report-card__text py-2">
                <p>
                    Includes Full 6 Wave attacks,
                    that will allow you to effectively and efficiently
                    challenge all inaccurate negative items
                    with a click of a button in 45 seconds or less.
                </p>
            </div>

            <div class="report-card__action">

            </div>
        </div>
<!--        <div v-if="is_free === '1'" style="margin-top: 100px">-->
<!--            <img :src="`${freesignup_img_url}`" alt="SmartCredit" class="provider-logo" style="width: 350px;height: 600px">-->
<!--        </div>-->
    </div>
</template>

<script>
import pkg from "../../helper/package";
import reportProviders from "../../helper/report_provider";
import {unsetStep} from "../../helper";

export default {
    props:{
        package_id:{
            required:true
        },
    },
    data(){
        return {
            is_free: IS_FREE,
            package:pkg,
            app_base_url: APP_URL,
            reportProviders : reportProviders,
            img_url : APP_URL+'/images/'+APP_NAME+'_logo.png',
            company_Name:COMPANY_NAME,
            freesignup_img_url:APP_URL+'/images/'+'freesignup.png'
        }
    },
    methods: {
        async goToLogin() {
            unsetStep();
            localStorage.clear();
            window.location.href = `${this.app_base_url}/login`;
        }
    }
}
</script>
<style>

@import url("./../../../css/smartcredit.css");

</style>
