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

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

<template v-if="translate == ''">
    <span class="sub-header">Click on language you want to translate</span>
    <div class="row mt-1">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2 mb-2" v-for="(lang, lid) in listLangs" :key="lid">
            <button type="button" class="btn btn-lg w-100" :class="lid == langCode ? 'btn-primary' : 'btn-light'" @click="openLang(lid)">{{ lang }}</button>
        </div>
    </div>
</template>
<template v-else>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2 mb-2">
            <select class="form-select form-select-sm" v-model="translateFile">
                <option v-for="(key, tid) in Object.keys(translateLang)" :key="tid" :value="key">{{ key }}</option>
            </select>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2 mb-2" v-if="translate != '' && listLangs[translate] != undefined">
            <button type="button" class="btn btn-lg w-100 btn-light btn-sm">{{ listLangs[translate] }}</button>
        </div>
    </div>

    <hr class="m-0 p-0">

    <div class="row mt-2" v-if="Object.keys(transLang).length">
        <template v-for="(lang, tid) in transLang">
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-2" :key="tid" v-if="typeof lang == 'string'">
                <input type="text" class="form-control form-control-sm" v-model="transLang[tid]" :class="lang == '' ? 'border-danger' : '', lang != '' && oldLangs[translateFile][tid] != lang ? 'border-warning' : ''" :placeholder="oldLangs[translateFile][tid]">
            </div>
            <template v-else>
                <div class="col-12 mb-1 text-capitalize" :key="tid"><strong>{{ tid }}</strong></div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-2" v-for="(lg, lid) in lang" :key="lid">
                    <input type="text" class="form-control form-control-sm" v-model="transLang[tid][lid]" :class="lg == '' ? 'border-danger' : '', lg != '' && oldLangs[translateFile][tid][lid] != lg ? 'border-warning' : ''" :placeholder="oldLangs[translateFile][tid][lid]">
                </div>
            </template>
        </template>
    </div>

    <hr class="m-0 p-0">

    <div class="w-100 d-flex justify-content-end py-2">
        <div class="d-flex gap-2">
            <button class="btn btn-light border" @click="translate = ''">{{ langs.close }}</button>
            <button class="btn btn-primary" @click="saveTranslate">{{ langs.setting.save_translate }}</button>
        </div>
    </div>
</template>