<?php
    global $syrus, $syrusDeepL;
    
    $deepl_api_key = $syrus->get_option('generali','deepl_api_key');
    $has_api_key = !empty($deepl_api_key);
    
    if($has_api_key && isset($syrusDeepL)) {
        $source_languages = $syrusDeepL->getSupportedLanguages('source');
        $target_languages = $syrusDeepL->getSupportedLanguages('target');
    }
?>

<div id="deepl-translator-box">
    <?php if(!$has_api_key) { ?>
        <p class="descrizione-meta-box" style="font-weight: 300;">
            <?php _e("You haven't set any DeepL API key. Go to settings and add one to enable translation.",'syrus') ?>
        </p>
    <?php } else { ?>
        <p class="descrizione-meta-box" style="font-weight: 300;">
            <?php _e("Use DeepL to translate your content. Select source and target languages, then click translate.",'syrus') ?>
        </p>
        
        <div style="margin-bottom: 10px;">
            <label for="deepl-source-lang" style="display: block; margin-bottom: 5px;">
                <?php _e('Source Language','syrus') ?>:
            </label>
            <select id="deepl-source-lang" style="width: 100%;">
                <?php foreach($source_languages as $code => $name) { ?>
                    <option value="<?php echo esc_attr($code); ?>" <?php echo $code === 'AUTO' ? 'selected' : ''; ?>>
                        <?php echo esc_html($name); ?>
                    </option>
                <?php } ?>
            </select>
        </div>
        
        <div style="margin-bottom: 10px;">
            <label for="deepl-target-lang" style="display: block; margin-bottom: 5px;">
                <?php _e('Target Language','syrus') ?>:
            </label>
            <select id="deepl-target-lang" style="width: 100%;">
                <?php foreach($target_languages as $code => $name) { ?>
                    <option value="<?php echo esc_attr($code); ?>" <?php echo $code === 'EN-US' ? 'selected' : ''; ?>>
                        <?php echo esc_html($name); ?>
                    </option>
                <?php } ?>
            </select>
        </div>
        
        <div style="margin-bottom: 10px;">
            <label style="display: block;">
                <input type="checkbox" id="deepl-translate-selected" value="1">
                <?php _e('Translate only selected text','syrus') ?>
            </label>
        </div>
        
        <div style="margin-bottom: 10px;">
            <label style="display: block;">
                <input type="checkbox" id="deepl-preserve-formatting" value="1" checked>
                <?php _e('Preserve formatting','syrus') ?>
            </label>
        </div>
        
        <button type="button" class="button button-primary button-large" style="width:100%" id="btn-deepl-translate" onclick="SyrusDeepL.translateContent()">
            <span class="dashicons dashicons-translation" style="vertical-align: middle;"></span>
            <?php _e("Translate Content",'syrus') ?>
        </button>
        
        <div id="deepl-translation-status" style="margin-top: 10px; display: none;">
            <span class="spinner is-active" style="float: none; vertical-align: middle;"></span>
            <span><?php _e('Translating...','syrus') ?></span>
        </div>
        
        <div id="deepl-translation-error" style="margin-top: 10px; color: #dc3232; display: none;"></div>
    <?php } ?>
</div>