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

if (!defined('ABSPATH'))
{
    exit;
}

?>
<div class="row justify-content-between align-items-center mb-3">
    <div class="col-auto">
        <div class="d-block d-lg-none">
            <button type="button" class="btn btn-outline-light rounded-pill waves-effect p-1" v-if="!addons.searchMobile" @click="addons.searchMobile = true">
                <i class="material-icons material-symbols-outlined">search</i>
            </button>
            <div class="search-bar position-relative mb-sm-0" v-if="addons.searchMobile">
                <input type="text" class="form-control" v-model="addons.search" :placeholder="langs.addon.search_addons+ '...'">
                <i class="material-icons material-symbols-outlined pdapp-search-icon" @click="addons.searchMobile = false">search</i>
            </div>
        </div>
        <div class="search-bar position-relative mb-sm-0 d-none d-lg-block">
            <input type="text" class="form-control" v-model="addons.search" :placeholder="langs.addon.search_addons+ '...'">
            <i class="material-icons material-symbols-outlined">search</i>
        </div>
    </div>
    <div class="col-auto d-flex gap-2">
        <div class="d-block">
            <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.addon.store_addon_desc" @click="showAddonStore()">
                <i class="material-icons material-symbols-outlined me-1">storefront</i>
                {{ langs.addon.store_addon }}
            </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.addon.store_addon_desc" @click="showAddonStore()">
                <i class="material-icons material-symbols-outlined me-1">storefront</i>
            </button>
        </div>
        <div class="d-block">
            <button type="button" class="btn btn-primary waves-effect waves-light d-flex align-items-center justify-content-center tooltip-top" :data-tooltip="langs.setting.upload" @click="showAddonStore()">
                <i class="material-icons material-symbols-outlined me-1">upload_file</i> {{ langs.setting.upload }}
            </button>
        </div>
    </div>
</div>