<?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_text_normal }}</span>
    </button>
    <button type="button" class="btn btn-info btn-sm waves-effect waves-light d-flex align-items-center gap-1" disabled>
        <i class="material-icons material-symbols-outlined">line_curve</i>
        <span class="d-none d-lg-block">{{ langs.setting.add_text_arc }}</span>
    </button>
    <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light d-flex align-items-center" v-if="loadedStore" @click="showTextStore()" :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>
    <label for="upload-text-file" class="btn btn-light btn-sm waves-effect waves-light d-flex align-items-center gap-1 border">
        <i class="material-icons material-symbols-outlined">upload</i>
        <span class="d-none d-lg-block">{{ langs.setting.upload }}</span>
        <input id="upload-text-file" type="file" class="form-control d-none" accept=".json" multiple class="d-none" @change="uploadText($event)">
    </label>
</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_text_templates }}</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 == 'text' || listTexts.length == settings.text.length" @click="saveUpdateText">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'text'"></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="btn-group align-items-center flex-wrap gap-2 w-100" v-if="listTexts.length">
            <button type="button" class="btn bg-light border p-0 d-flex align-items-center justify-content-center rounded-2 position-relative" :class="text.arc != undefined ? 'pdapp-h100' : 'pdapp-h40'" v-for="(text, lid) in listTexts" :key="lid">
                <img :src="pluginUrl+'assets/images/texts/'+ text.thumb" :alt="text.text" class="p-1 px-2 mw-100 mh-100"/>
                <i class="material-icons material-symbols-outlined pdapp-remove-btn" v-if="editMode" @click="listTexts.splice(lid, 1)">close</i>
            </button>
        </div>
        <h5 class="header-title text-center text-danger" v-else>{{ langs.setting.templates_not_found }}</h5>
    </div>
</div>