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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="modal-body" v-if="modal.type == 'replacePhoto'">
    <template v-if="menuOptions.details[menuOptions.childID].clickUpload">
        <div class="pdapp-upload-box w-100">
            <label for="pdapp-upload-a-photo-replace" class="btn btn-primary waves-effect m-0 w-100" :class="uploading ? 'disabled' : ''">
                <span v-if="uploading">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    {{ langs.options.uploading }}
                </span>
                <span v-else>
                    <i class="material-icons material-symbols-outlined me-1">cloud_upload</i>
                    {{ langs.options.upload_a_photo }}
                </span>
            </label>
        </div>

        <div class="pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0" v-if="settings.layout.photo.allowLibrary && settings.general.photo.key != ''">
            <span class="sub-header m-0 text-uppercase">{{ langs.options.or }}</span>
        </div>
    </template>

    <div class="input-group input-group-merge mb-1" v-if="settings.layout.photo.allowLibrary && settings.general.photo.key != ''">
        <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="listMenus.photo.search != '' ? 'border-end-0' : ''" v-model="listMenus.photo.search" :placeholder="langs.options.search_free_photos_on +' '+settings.general.photo.library" @change="findPhotos()">
        <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="listMenus.photo.search != ''" @click="listMenus.photo.search = '', findPhotos()">
            <i class="material-icons material-symbols-outlined">close</i>
        </button>
    </div>
    
    <div class="pdapp-photo-libraries position-relative overflow-x-hidden w-100" v-if="settings.layout.photo.allowLibrary && settings.general.photo.key != ''">
        <div class="pdapp-photo-list d-flex flex-wrap gap-1 justify-content-between w-100 m-0 p-0 pe-1" v-if="0 < menuOptions.values.length">
            <div class="pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1" v-for="(photo, pid) in menuOptions.values" :key="pid" @click="addPhotoReplace(photo)">
                <div class="pdapp-thumbnail bg-light rounded-2 d-flex position-relative w-100" :title="photo.name">
                    <img :src="photo.thumb" :alt="photo.name" class="pdapp-img-thumbnail mw-100 w-100 rounded-2 pe-0 me-0">
                </div>
                <a class="pdapp-author position-absolute overflow-hidden" :href="photo.user.url" target="_blank">{{ photo.user.name }}</a>
            </div>

            <div class="col-12 my-1"><button type="button" class="btn btn-sm btn-light m-auto" @click="getPhotos()">{{ langs.load_more }}</button></div>
        </div>
        <div class="w-100 text-danger text-center" v-else>{{ langs.options.photo_not_found }}</div>
        <div class="pdapp-loading-photos w-100 position-absolute" v-if="listMenus.photo.loading == 1">
            <div class="pdapp-loading-mask">
                <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
            </div>
        </div>
    </div>
</div>