<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Addons
*/

if (!defined('ABSPATH'))
{
    exit;
}

?>
<div class="row">
    <div class="col-12 col-md-6 col-xxl-4" v-for="(addon, aid) in listAddons" :key="aid">
        <div class="card border card-inverse text-white bg-light pdapp-overlay-item">
            <img class="card-img-top img-fluid" :src="'https://files.productdesignerapp.com/addons/'+ addon.addonID +'/thumb.png'" :alt="addon.title">
            <div class="card-img-overlay py-3 px-4">
                <div class="d-flex w-100 gap-2 justify-content-between align-items-center mb-1">
                    <h5 class="card-title text-white position-relative m-0 fw-bold">{{ addon.title }}</h5>
                    <span class="text-white position-relative fw-bold">V{{ addon.version }}</span>
                </div>
                <p class="card-text position-relative">{{ addon.desc }}</p>

                <button type="button" class="btn btn-primary mb-2 d-block waves-effect waves-light position-relative w-100" @click="showAddonStore()">
                    <i class="material-icons material-symbols-outlined me-1">download</i>
                    {{ langs.setting.import }}
                </button>
                <a v-if="addon.demo != ''" target="_blank" :href="'https://demo.productdesignerapp.com/'+ addon.demo" class="btn btn-success mb-2 d-block waves-effect waves-light position-relative w-100">
                    <i class="material-icons material-symbols-outlined me-1">visibility</i>
                    {{ langs.order.view_detail }}
                </a>
                <a v-if="addon.docs != ''" target="_blank" :href="'https://docs.productdesignerapp.com/'+ addon.docs" class="btn btn-secondary mb-2 d-block waves-effect waves-light position-relative w-100">
                    <i class="material-icons material-symbols-outlined me-1">docs</i>
                    {{ langs.help }}
                </a>
            </div>
        </div>
    </div>
</div>