<?php
/**
 * Glossary and translation memory view.
 *
 * @var array $data Data for the view.
 *
 * @package WPR_Translate
 */

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

// Normalize glossary entries for the template.
$glossary = isset( $data['glossary'] ) && is_array( $data['glossary'] ) ? $data['glossary'] : array();
?>
<div class="wrap wpr-translate-admin">
    <h1><?php esc_html_e( 'Glossary & Translation Memory', 'wpr-translate' ); ?></h1>

    <form method="post" action="options.php" class="wpr-card wpr-glossary-card">
        <?php settings_fields( 'wpr_translate_glossary' ); ?>

        <div class="wpr-glossary-grid">
            <div class="wpr-glossary-row wpr-glossary-header">
                <div class="wpr-glossary-cell wpr-glossary-source"><?php esc_html_e( 'Source Term', 'wpr-translate' ); ?></div>
                <div class="wpr-glossary-cell wpr-glossary-translation"><?php esc_html_e( 'Preferred Translation', 'wpr-translate' ); ?></div>
                <div class="wpr-glossary-cell wpr-glossary-context"><?php esc_html_e( 'Context / Notes', 'wpr-translate' ); ?></div>
            </div>

            <div id="wpr-glossary-rows" class="wpr-glossary-rows">
                <?php if ( empty( $glossary ) ) : ?>
                    <div class="wpr-glossary-row" data-index="0">
                        <div class="wpr-glossary-cell wpr-glossary-source">
                            <label class="screen-reader-text" for="wpr-glossary-source-0"><?php esc_html_e( 'Source term', 'wpr-translate' ); ?></label>
                            <input type="text" id="wpr-glossary-source-0" name="wpr_translate_glossary[0][source]" value="" class="regular-text" />
                        </div>
                        <div class="wpr-glossary-cell wpr-glossary-translation">
                            <label class="screen-reader-text" for="wpr-glossary-translation-0"><?php esc_html_e( 'Preferred translation', 'wpr-translate' ); ?></label>
                            <input type="text" id="wpr-glossary-translation-0" name="wpr_translate_glossary[0][translation]" value="" class="regular-text" />
                        </div>
                        <div class="wpr-glossary-cell wpr-glossary-context">
                            <label class="screen-reader-text" for="wpr-glossary-context-0"><?php esc_html_e( 'Context or notes', 'wpr-translate' ); ?></label>
                            <input type="text" id="wpr-glossary-context-0" name="wpr_translate_glossary[0][context]" value="" class="regular-text" />
                        </div>
                    </div>
                <?php else : ?>
                    <?php foreach ( $glossary as $index => $entry ) :
                        $source      = isset( $entry['source'] ) ? $entry['source'] : '';
                        $translation = isset( $entry['translation'] ) ? $entry['translation'] : '';
                        $context     = isset( $entry['context'] ) ? $entry['context'] : '';
                        ?>
                        <div class="wpr-glossary-row" data-index="<?php echo esc_attr( $index ); ?>">
                            <div class="wpr-glossary-cell wpr-glossary-source">
                                <label class="screen-reader-text" for="wpr-glossary-source-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Source term', 'wpr-translate' ); ?></label>
                                <input type="text" id="wpr-glossary-source-<?php echo esc_attr( $index ); ?>" name="wpr_translate_glossary[<?php echo esc_attr( $index ); ?>][source]" value="<?php echo esc_attr( $source ); ?>" class="regular-text" />
                            </div>
                            <div class="wpr-glossary-cell wpr-glossary-translation">
                                <label class="screen-reader-text" for="wpr-glossary-translation-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Preferred translation', 'wpr-translate' ); ?></label>
                                <input type="text" id="wpr-glossary-translation-<?php echo esc_attr( $index ); ?>" name="wpr_translate_glossary[<?php echo esc_attr( $index ); ?>][translation]" value="<?php echo esc_attr( $translation ); ?>" class="regular-text" />
                            </div>
                            <div class="wpr-glossary-cell wpr-glossary-context">
                                <label class="screen-reader-text" for="wpr-glossary-context-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Context or notes', 'wpr-translate' ); ?></label>
                                <input type="text" id="wpr-glossary-context-<?php echo esc_attr( $index ); ?>" name="wpr_translate_glossary[<?php echo esc_attr( $index ); ?>][context]" value="<?php echo esc_attr( $context ); ?>" class="regular-text" />
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>

        <div class="wpr-glossary-actions">
            <button type="button" class="button" id="wpr-add-glossary"><?php esc_html_e( 'Add Term', 'wpr-translate' ); ?></button>
            <input type="submit" class="button button-primary" value="<?php esc_attr_e( 'Save Glossary', 'wpr-translate' ); ?>" />
        </div>
    </form>

    <script type="text/html" id="tmpl-wpr-glossary-row">
        <div class="wpr-glossary-row" data-index="{{ data.index }}">
            <div class="wpr-glossary-cell wpr-glossary-source">
                <label class="screen-reader-text" for="wpr-glossary-source-{{ data.index }}"><?php esc_html_e( 'Source term', 'wpr-translate' ); ?></label>
                <input type="text" id="wpr-glossary-source-{{ data.index }}" name="wpr_translate_glossary[{{ data.index }}][source]" value="" class="regular-text" />
            </div>
            <div class="wpr-glossary-cell wpr-glossary-translation">
                <label class="screen-reader-text" for="wpr-glossary-translation-{{ data.index }}"><?php esc_html_e( 'Preferred translation', 'wpr-translate' ); ?></label>
                <input type="text" id="wpr-glossary-translation-{{ data.index }}" name="wpr_translate_glossary[{{ data.index }}][translation]" value="" class="regular-text" />
            </div>
            <div class="wpr-glossary-cell wpr-glossary-context">
                <label class="screen-reader-text" for="wpr-glossary-context-{{ data.index }}"><?php esc_html_e( 'Context or notes', 'wpr-translate' ); ?></label>
                <input type="text" id="wpr-glossary-context-{{ data.index }}" name="wpr_translate_glossary[{{ data.index }}][context]" value="" class="regular-text" />
            </div>
        </div>
    </script>

    <script>
    (function($){
        var index = <?php echo esc_js( count( $glossary ) ); ?>;
        $('#wpr-add-glossary').on('click', function(){
            var template = wp.template('wpr-glossary-row');
            $('#wpr-glossary-rows').append(template({ index: index }));
            index++;
        });
    })(jQuery);
    </script>
</div>
