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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'list'">
    <div class="modal-body">
        <div class="input-group input-group-sm input-group-merge mb-1">
            <span class="input-group-text bg-white ps-2 pe-1">
                <i class="material-icons material-symbols-outlined">search</i>
            </span>
            <input type="text" class="form-control border-start-0 ps-1 pe-1" :class="fontCate.search != '' ? 'border-end-0' : ''" v-model="fontCate.search">
            <button type="button" class="input-group-text bg-white  text-danger ps-1 pe-2" v-if="fontCate.search != ''" @click="fontCate.search = ''">
                <i class="material-icons material-symbols-outlined">close</i>
            </button>
        </div>

        <div class="d-flex gap-2 align-items-center justify-content-between mb-1">
            <div class="pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden pb-1">
                <button type="button" class="btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap border text-capitalize" v-for="(cate, cid) in fontCate.list" :class="cate == fontCate.find ? 'btn-primary' : 'btn-light'" @click="fontCate.find = cate" :key="cid">{{ cate.replace('-', '') }}</button>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="select_all_fonts" v-model="selectAll">
                <label class="form-check-label d-none d-lg-block" for="select_all_fonts">{{ langs.setting.select_all_fonts }}</label>
            </div>
        </div>
        
        <div class="d-flex flex-wrap gap-2 w-100">
            <label class="btn btn-light border p-0 d-flex align-items-center rounded-2 pdapp-h30" v-for="(font, fid) in listFontLib" :key="fid" :for="'select_font_'+ fid">
                <div class="form-check btn-label-left ms-1">
                    <input type="checkbox" class="form-check-input" :id="'select_font_'+ fid" v-model="selectAlls" :value="font.title">
                </div>
                <img :src="pluginUrl+'assets/images/fonts/'+ font.title.replaceAll(' ', '')+ '.png'" :alt="font.title" class="p-1 mw-100 mh-100"/>
            </label>
        </div>
    </div>
    <div class="modal-footer py-1">
        <button type="button" class="btn btn-light border" @click="modal.show = false">{{ langs.close }}</button>
        <button type="button" class="btn btn-primary" :disabled="loading == 'font'" @click="saveToList('list')">
            <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>