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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row">
    <div class="col-12">
        <div class="card pdapp-card-page">
            <div class="card-body">
                <div class="row justify-content-between mb-3">
                    <div class="col-auto"></div>
                    <div class="col-auto d-flex gap-2">
                        <div class="d-block">
                            <button type="button" class="btn btn-secondary waves-effect waves-light d-none d-lg-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.theme.store_theme_desc" @click="showThemeStore()">
                                <i class="material-icons material-symbols-outlined me-1">storefront</i>
                                {{ langs.theme.store_theme }}
                            </button>
                            <button type="button" class="btn btn-secondary waves-effect waves-light p-1 d-lg-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.theme.store_theme_desc" @click="showThemeStore()">
                                <i class="material-icons material-symbols-outlined me-1">storefront</i>
                            </button>
                        </div>
                        <div class="d-block">
                            <button type="button" class="btn btn-primary waves-effect waves-light d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.theme.upload_file_theme" @click="showThemeStore()">
                                <i class="material-icons material-symbols-outlined me-1">upload_file</i> {{ langs.theme.upload }}
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12 col-lg-6 col-xxl-4" v-for="(theme, tid) in themes" :key="tid">
                        <div class="card border card-inverse text-white bg-light ribbon-box pdapp-overlay-item">
                            <div v-if="theme.active == 1" class="ribbon-two ribbon-two-success">
                                <span>{{ langs.theme.activated }}</span>
                            </div>
                            <img class="card-img-top img-fluid" :src="pluginUrl+'templates/'+ theme.folder +'/thumb.png'" :alt="theme.name">
                            <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">{{ theme.name }}</h5>
                                    <span class="text-white position-relative fw-bold">V{{ theme.version }}</span>
                                </div>
                                <p class="card-text position-relative">{{ theme.description }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 col-xxl-4" v-for="(theme, tid) in listThemeStores" :key="tid">
                        <div class="card border card-inverse text-white bg-light ribbon-box pdapp-overlay-item">
                            <img class="card-img-top img-fluid" :src="'https://files.productdesignerapp.com/themes/'+ theme.themeID +'/thumb.png'" :alt="theme.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">{{ theme.title }}</h5>
                                    <span class="text-white position-relative fw-bold">V{{ theme.version }}</span>
                                </div>
                                <p class="card-text position-relative">{{ theme.desc }}</p>

                                <button type="button" class="btn btn-primary mb-2 d-block waves-effect waves-light position-relative w-100" @click="showThemeStore()">
                                    <i class="material-icons material-symbols-outlined me-1">download</i>
                                    {{ langs.setting.import }}
                                </button>
                                <a v-if="theme.demo != ''" target="_blank" :href="'https://demo.productdesignerapp.com/'+ theme.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="theme.docs != ''" target="_blank" :href="'https://docs.productdesignerapp.com/'+ theme.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>
            </div>
        </div>
    </div>
</div>