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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'upload'">
    <div class="modal-body">
        <div class="d-flex flex-wrap gap-2 w-100 placeholder-glow" v-if="listUploads.length">
            <button type="button" class="btn btn-light border p-1 d-flex align-items-center justify-content-center rounded-2 pdapp-h30 position-relative" :class="font.title == undefined ? 'placeholder bg-secondary pdapp-w80' : ''" v-for="(font, lid) in listUploads" :key="lid">
                <span v-if="font.title != undefined" :style="'font-family: \''+ font.title +'\''" class="text-capitalize">{{ font.title }}</span>
            </button>
        </div>
        <template v-else>
            <div class="d-flex justify-content-center mb-3">
                <label for="upload_font_file" class="btn btn-primary">{{ langs.setting.select_your_fonts }} (.ttf)</label>
                <input type="file" id="upload_font_file" accept=".ttf" multiple class="d-none" @change="changeFiles">
            </div>
        </template>
    </div>
    <div class="modal-footer py-1" v-if="listUploads.length > 0">
        <button type="button" class="btn btn-light border" @click="modal.show = false">{{ langs.close }}</button>
        <button type="button" class="btn btn-primary" :disabled="renderedThumb == false || loading == 'font'" @click="saveToList('upload')">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'font'"></span>
            {{ langs.setting.save_to_list }}
        </button>
    </div>
</template>