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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="float-end mb-2 d-flex gap-2 align-items-center">
    <button type="button" class="btn btn-primary btn-sm waves-effect waves-light d-flex align-items-center" disabled>
        <i class="material-icons material-symbols-outlined">add</i>
        <span class="d-none d-lg-block">{{ langs.setting.add_from_library }}</span>
    </button>
    <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light d-flex align-items-center" v-if="loadedStore" @click="showFontStore()" :disabled="loadingStore">
        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" v-if="loadingStore"></span>
        <i class="material-icons material-symbols-outlined" v-else>cloud_download</i>
        <span class="d-none d-lg-block">{{ langs.setting.import }}</span>
    </button>
    <button type="button" class="btn btn-info btn-sm waves-effect waves-light d-flex align-items-center" @click="addNewFont('upload')">
        <i class="material-icons material-symbols-outlined">upload</i>
        <span class="d-none d-lg-block">{{ langs.setting.upload_font }}</span>
    </button>
</div>


<div class="card w-100">
    <div class="card-body">
        <div class="d-flex gap-2 justify-content-between align-items-center mb-2">
            <h4 class="header-title m-0">{{ langs.setting.list_fonts }}</h4>
            <button type="button" class="btn btn-sm btn-info waves-light d-flex align-items-center gap-1" @click="editMode = true" v-if="!editMode">
                <i class="material-icons material-symbols-outlined fs-4">edit</i>
                <span class="d-none d-lg-block">{{ langs.edit }}</span>
            </button>
            <div class="btn-group gap-2 d-flex align-items-center mb-1" v-else>
                <button type="button" class="btn btn-sm btn-light rounded-2 border waves-light d-flex align-items-center gap-1" @click="editMode = false">
                    <i class="material-icons material-symbols-outlined">close</i>
                    <span class="d-none d-lg-block">{{ langs.close }}</span>
                </button>
                <button v-if="settings.font != undefined" type="button" class="btn btn-sm btn-primary rounded-2 waves-light d-flex align-items-center gap-1" :disabled="loading == 'font' || listFonts.length == settings.font.length" @click="saveUpdateFont">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'font'"></span>
                    <i class="material-icons material-symbols-outlined fs-4" v-else>save</i>
                    <span class="d-none d-lg-block">{{ langs.save }}</span>
                </button>
            </div>
        </div>

        <div class="d-flex flex-wrap gap-2 w-100" v-if="listFonts.length">
            <button type="button" class="btn bg-light border p-0 d-flex align-items-center rounded-2 pdapp-h30 position-relative" v-for="(font, lid) in listFonts" :key="lid">
                <img :src="pluginUrl+'assets/images/fonts/'+ font.title.replaceAll(' ', '')+ '.png'" :alt="font.title" class="p-1 mw-100 mh-100"/>
                <i class="material-icons material-symbols-outlined pdapp-remove-btn" v-if="editMode" @click="listFonts.splice(lid, 1)">close</i>
            </button>
        </div>
        <h5 class="header-title text-center text-danger" v-else>{{ langs.setting.fonts_not_found }}</h5>
    </div>
</div>