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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row justify-content-between mb-2">
    <div class="col-auto"></div>
    <div class="col-auto d-flex gap-2">
        <div class="d-block">
            <button type="button" class="btn btn-primary waves-effect waves-light d-none d-lg-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.create_new_folder" @click="editFolder('')">
                <i class="material-icons material-symbols-outlined me-1">create_new_folder</i>
                {{ langs.art.create_folder }}
            </button>
            <button type="button" class="btn btn-primary waves-effect waves-light p-1 d-lg-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.create_new_folder" @click="editFolder('')">
                <i class="material-icons material-symbols-outlined">create_new_folder</i>
            </button>
        </div>
        <div class="d-block" v-if="loadedStore">
            <button type="button" class="btn btn-secondary waves-effect waves-light d-none d-lg-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.import_artwork_store" @click="showArtStore()" :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>
                {{ langs.setting.import }}
            </button>
            <button type="button" class="btn btn-secondary waves-effect waves-light p-1 d-lg-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.import_artwork_store" @click="showArtStore()" :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>
            </button>
        </div>
        <div class="d-block">
            <button type="button" class="btn btn-info waves-effect waves-light d-none d-lg-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.upload_your_art" @click="editArt('')">
                <i class="material-icons material-symbols-outlined me-1">upload_file</i>
                {{ langs.art.upload_art }}
            </button>
            <button type="button" class="btn btn-info waves-effect waves-light p-1 d-lg-none d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.art.upload_your_art" @click="editArt('')">
                <i class="material-icons material-symbols-outlined">upload_file</i>
            </button>
        </div>
    </div>
</div>