<?php
/**
 * Languages manager view.
 *
 * @var array $data Data for the view.
 *
 * @package WPR_Translate
 */

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

// Normalize view data for the template.
$languages             = isset( $data['languages'] ) && is_array( $data['languages'] ) ? $data['languages'] : array();
$catalog_options       = isset( $data['catalog_options'] ) && is_array( $data['catalog_options'] ) ? $data['catalog_options'] : array();
$flag_labels           = isset( $data['flag_labels'] ) && is_array( $data['flag_labels'] ) ? $data['flag_labels'] : array( '' => __( 'No flag', 'wpr-translate' ) );
$next_index            = isset( $data['next_index'] ) ? (int) $data['next_index'] : count( $languages );
$default_date_format   = isset( $data['default_date_format'] ) ? $data['default_date_format'] : get_option( 'date_format' );
$default_time_format   = isset( $data['default_time_format'] ) ? $data['default_time_format'] : get_option( 'time_format' );
$has_available_catalog = ! empty( $data['has_available_catalog'] );
$catalog_names         = array();

if ( function_exists( 'wpr_translate_language_catalog_by_code' ) ) {
    $catalog_names = wpr_translate_language_catalog_by_code();
}
?>
<div class="wrap wpr-translate-admin">
    <h1><?php esc_html_e( 'Languages Manager', 'wpr-translate' ); ?></h1>

    <form method="post" action="options.php" class="wpr-languages-form" id="wpr-languages-form">
        <?php settings_fields( 'wpr_translate_languages' ); ?>

        <div id="wpr-languages-table" class="wpr-languages-grid" data-next-index="<?php echo esc_attr( $next_index ); ?>" data-default-date-format="<?php echo esc_attr( $default_date_format ); ?>" data-default-time-format="<?php echo esc_attr( $default_time_format ); ?>">
            <div class="wpr-languages-row wpr-languages-header">
                <div class="wpr-languages-cell wpr-col-order" aria-hidden="true"></div>
                <div class="wpr-languages-cell wpr-col-name"><?php esc_html_e( 'Language', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-locale"><?php esc_html_e( 'Locale', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-slug"><?php esc_html_e( 'Slug', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-flag"><?php esc_html_e( 'Flag', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-default"><?php esc_html_e( 'Default', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-enabled"><?php esc_html_e( 'Enabled', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-visible"><?php esc_html_e( 'Visible', 'wpr-translate' ); ?></div>
                <div class="wpr-languages-cell wpr-col-actions" aria-hidden="true"></div>
            </div>

            <div class="wpr-languages-body">
                <?php $empty_class = empty( $languages ) ? '' : ' wpr-hidden'; ?>
                <div class="wpr-no-items<?php echo esc_attr( $empty_class ); ?>" data-role="empty-state"><?php esc_html_e( 'No languages are currently configured. Use the controls below to add languages from the catalog.', 'wpr-translate' ); ?></div>
                <?php foreach ( $languages as $position => $language ) :
                    $language = wp_parse_args(
                        $language,
                        array(
                            'index'         => $position,
                            'code'          => '',
                            'name'          => '',
                            'locale'        => '',
                            'slug'          => '',
                            'flag'          => '',
                            'display_order' => $position,
                            'is_default'    => '0',
                            'is_active'     => true,
                            'is_public'     => true,
                            'date_format'   => $default_date_format,
                            'time_format'   => $default_time_format,
                            'lock_code'     => false,
                        )
                    );
                    $index        = isset( $language['index'] ) ? (int) $language['index'] : (int) $position;
                    $code         = $language['code'];
                    $row_is_default = '1' === (string) $language['is_default'];
                    ?>
                    <div class="wpr-languages-row wpr-language-row" data-index="<?php echo esc_attr( $index ); ?>" data-code="<?php echo esc_attr( $code ); ?>">
                        <div class="wpr-languages-cell wpr-language-order">
                            <span class="dashicons dashicons-menu wpr-sort-handle" aria-hidden="true"></span>
                            <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][display_order]" class="wpr-language-order-input" value="<?php echo esc_attr( (int) $language['display_order'] ); ?>" />
                        </div>
                        <div class="wpr-languages-cell wpr-language-name">
                            <div class="wpr-language-name-row">
                                <label class="screen-reader-text" for="wpr-language-name-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Language name', 'wpr-translate' ); ?></label>
                                <input type="text" id="wpr-language-name-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][name]" value="<?php echo esc_attr( $language['name'] ); ?>" class="regular-text" />
                                <div class="wpr-language-code-field">
                                    <label class="screen-reader-text" for="wpr-language-code-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Language code', 'wpr-translate' ); ?></label>
                                    <?php if ( ! empty( $language['lock_code'] ) ) : ?>
                                        <input type="hidden" id="wpr-language-code-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][code]" value="<?php echo esc_attr( $code ); ?>" class="wpr-language-code-input" />
                                        <span class="wpr-language-code-text" aria-hidden="true"><?php echo esc_html( $code ); ?></span>
                                    <?php else : ?>
                                        <input type="text" id="wpr-language-code-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][code]" value="<?php echo esc_attr( $code ); ?>" class="small-text wpr-language-code-input" />
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <div class="wpr-languages-cell wpr-language-locale">
                            <label class="screen-reader-text" for="wpr-language-locale-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Locale', 'wpr-translate' ); ?></label>
                            <input type="text" id="wpr-language-locale-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][locale]" value="<?php echo esc_attr( $language['locale'] ); ?>" class="regular-text" />
                        </div>
                        <div class="wpr-languages-cell wpr-language-slug">
                            <label class="screen-reader-text" for="wpr-language-slug-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Language slug', 'wpr-translate' ); ?></label>
                            <input type="text" id="wpr-language-slug-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][slug]" value="<?php echo esc_attr( $language['slug'] ); ?>" class="regular-text" readonly />
                        </div>
                        <div class="wpr-languages-cell wpr-language-flag">
                            <label class="screen-reader-text" for="wpr-language-flag-<?php echo esc_attr( $index ); ?>"><?php esc_html_e( 'Flag icon', 'wpr-translate' ); ?></label>
                            <select id="wpr-language-flag-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][flag]" class="wpr-language-flag-select">
                                <?php foreach ( $flag_labels as $flag_code => $flag_label ) : ?>
                                    <option value="<?php echo esc_attr( $flag_code ); ?>" <?php selected( $language['flag'], $flag_code ); ?>><?php echo esc_html( $flag_label ); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="wpr-languages-cell wpr-language-default">
                            <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][is_default]" value="<?php echo esc_attr( $row_is_default ? '1' : '0' ); ?>" class="wpr-language-default-input" />
                            <input type="radio" name="wpr-language-default" value="<?php echo esc_attr( $code ); ?>" class="wpr-language-default-radio" <?php checked( $row_is_default ); ?> data-code="<?php echo esc_attr( $code ); ?>" aria-label="<?php esc_attr_e( 'Set as default language', 'wpr-translate' ); ?>" />
                        </div>
                        <div class="wpr-languages-cell wpr-language-enabled">
                            <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][is_active]" value="0" />
                            <input type="checkbox" id="wpr-language-active-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][is_active]" value="1" <?php checked( ! empty( $language['is_active'] ) ); ?> aria-label="<?php esc_attr_e( 'Enable language', 'wpr-translate' ); ?>" />
                        </div>
                        <div class="wpr-languages-cell wpr-language-visible">
                            <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][is_public]" value="0" />
                            <input type="checkbox" id="wpr-language-visible-<?php echo esc_attr( $index ); ?>" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][is_public]" value="1" <?php checked( ! empty( $language['is_public'] ) ); ?> aria-label="<?php esc_attr_e( 'Display language on the frontend', 'wpr-translate' ); ?>" />
                        </div>
                        <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][date_format]" value="<?php echo esc_attr( $language['date_format'] ); ?>" />
                        <input type="hidden" name="wpr_translate_languages[<?php echo esc_attr( $index ); ?>][time_format]" value="<?php echo esc_attr( $language['time_format'] ); ?>" />
                        <div class="wpr-languages-cell wpr-language-actions">
                            <button type="button" class="button-link-delete wpr-remove-language" data-code="<?php echo esc_attr( $code ); ?>" aria-label="<?php esc_attr_e( 'Remove language', 'wpr-translate' ); ?>">
                                <span class="wpr-icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256">
                                        <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path>
                                    </svg>
                                </span>
                                <span class="screen-reader-text"><?php esc_html_e( 'Remove', 'wpr-translate' ); ?></span>
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="wpr-card wpr-card-language-catalog">
            <h2><?php esc_html_e( 'Language catalog', 'wpr-translate' ); ?></h2>
            <p><?php esc_html_e( 'Add predefined languages using the catalog or create a custom language with your own configuration.', 'wpr-translate' ); ?></p>
            <div class="wpr-language-picker-controls">
                <label class="screen-reader-text" for="wpr-language-picker"><?php esc_html_e( 'Catalog languages', 'wpr-translate' ); ?></label>
                <select id="wpr-language-picker" class="wpr-language-picker-select">
                    <option value=""><?php esc_html_e( 'Select a language', 'wpr-translate' ); ?></option>
                    <?php foreach ( $catalog_options as $entry ) :
                        $code   = isset( $entry['code'] ) ? $entry['code'] : '';
                        $name   = isset( $catalog_names[ $code ]['name'] ) ? $catalog_names[ $code ]['name'] : ( isset( $entry['name'] ) ? $entry['name'] : '' );
                        $locale = isset( $entry['locale'] ) ? $entry['locale'] : '';
                        $flag   = isset( $entry['flag'] ) ? $entry['flag'] : '';
                        $slug   = isset( $entry['slug'] ) ? $entry['slug'] : $code;
                        $label  = $name ? $name : $code;
                        ?>
                        <option value="<?php echo esc_attr( $code ); ?>" data-name="<?php echo esc_attr( $name ); ?>" data-locale="<?php echo esc_attr( $locale ); ?>" data-flag="<?php echo esc_attr( $flag ); ?>" data-slug="<?php echo esc_attr( $slug ); ?>" <?php disabled( ! empty( $entry['is_active'] ) ); ?>><?php echo esc_html( $label ); ?></option>
                    <?php endforeach; ?>
                </select>
                <button type="button" class="button" id="wpr-add-language-from-catalog"<?php disabled( ! $has_available_catalog ); ?>><?php esc_html_e( 'Add language', 'wpr-translate' ); ?></button>
            </div>
            <p class="description"><?php esc_html_e( 'Flags and language codes from the catalog follow ISO standards and include ready-to-use icons.', 'wpr-translate' ); ?></p>
        </div>

        <button type="button" class="button-link wpr-add-custom-language" id="wpr-add-custom-language"><?php esc_html_e( 'Add custom language', 'wpr-translate' ); ?></button>

        <?php submit_button( __( 'Save languages', 'wpr-translate' ) ); ?>
    </form>
</div>

<script type="text/html" id="tmpl-wpr-language-row">
    <div class="wpr-languages-row wpr-language-row" data-index="{{ data.index }}" data-code="{{ data.code }}">
        <div class="wpr-languages-cell wpr-language-order">
            <span class="dashicons dashicons-menu wpr-sort-handle" aria-hidden="true"></span>
            <input type="hidden" name="wpr_translate_languages[{{ data.index }}][display_order]" class="wpr-language-order-input" value="{{ data.display_order }}" />
        </div>
        <div class="wpr-languages-cell wpr-language-name">
            <div class="wpr-language-name-row">
                <label class="screen-reader-text" for="wpr-language-name-{{ data.index }}"><?php esc_html_e( 'Language name', 'wpr-translate' ); ?></label>
                <input type="text" id="wpr-language-name-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][name]" value="{{ data.name }}" class="regular-text" />
                <div class="wpr-language-code-field">
                    <label class="screen-reader-text" for="wpr-language-code-{{ data.index }}"><?php esc_html_e( 'Language code', 'wpr-translate' ); ?></label>
                    <# if ( data.lock_code ) { #>
                        <input type="hidden" id="wpr-language-code-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][code]" value="{{ data.code }}" class="wpr-language-code-input" />
                        <span class="wpr-language-code-text" aria-hidden="true">{{ data.code }}</span>
                    <# } else { #>
                        <input type="text" id="wpr-language-code-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][code]" value="{{ data.code }}" class="small-text wpr-language-code-input" />
                    <# } #>
                </div>
            </div>
        </div>
        <div class="wpr-languages-cell wpr-language-locale">
            <label class="screen-reader-text" for="wpr-language-locale-{{ data.index }}"><?php esc_html_e( 'Locale', 'wpr-translate' ); ?></label>
            <input type="text" id="wpr-language-locale-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][locale]" value="{{ data.locale }}" class="regular-text" />
        </div>
        <div class="wpr-languages-cell wpr-language-slug">
            <label class="screen-reader-text" for="wpr-language-slug-{{ data.index }}"><?php esc_html_e( 'Language slug', 'wpr-translate' ); ?></label>
            <input type="text" id="wpr-language-slug-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][slug]" value="{{ data.slug }}" class="regular-text" readonly />
        </div>
        <div class="wpr-languages-cell wpr-language-flag">
            <label class="screen-reader-text" for="wpr-language-flag-{{ data.index }}"><?php esc_html_e( 'Flag icon', 'wpr-translate' ); ?></label>
            <select id="wpr-language-flag-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][flag]" class="wpr-language-flag-select">
                <?php foreach ( $flag_labels as $flag_code => $flag_label ) : ?>
                    <option value="<?php echo esc_attr( $flag_code ); ?>" <# if ( data.flag === '<?php echo esc_js( $flag_code ); ?>' ) { #>selected="selected"<# } #>><?php echo esc_html( $flag_label ); ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="wpr-languages-cell wpr-language-default">
            <input type="hidden" name="wpr_translate_languages[{{ data.index }}][is_default]" value="{{ data.is_default }}" class="wpr-language-default-input" />
            <input type="radio" name="wpr-language-default" value="{{ data.code }}" class="wpr-language-default-radio" <# if ( '1' === data.is_default ) { #>checked="checked"<# } #> data-code="{{ data.code }}" aria-label="<?php esc_attr_e( 'Set as default language', 'wpr-translate' ); ?>" />
        </div>
        <div class="wpr-languages-cell wpr-language-enabled">
            <input type="hidden" name="wpr_translate_languages[{{ data.index }}][is_active]" value="0" />
            <input type="checkbox" id="wpr-language-active-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][is_active]" value="1" <# if ( data.is_active ) { #>checked="checked"<# } #> aria-label="<?php esc_attr_e( 'Enable language', 'wpr-translate' ); ?>" />
        </div>
        <div class="wpr-languages-cell wpr-language-visible">
            <input type="hidden" name="wpr_translate_languages[{{ data.index }}][is_public]" value="0" />
            <input type="checkbox" id="wpr-language-visible-{{ data.index }}" name="wpr_translate_languages[{{ data.index }}][is_public]" value="1" <# if ( data.is_public ) { #>checked="checked"<# } #> aria-label="<?php esc_attr_e( 'Display language on the frontend', 'wpr-translate' ); ?>" />
        </div>
        <input type="hidden" name="wpr_translate_languages[{{ data.index }}][date_format]" value="{{ data.date_format }}" />
        <input type="hidden" name="wpr_translate_languages[{{ data.index }}][time_format]" value="{{ data.time_format }}" />
        <div class="wpr-languages-cell wpr-language-actions">
            <button type="button" class="button-link-delete wpr-remove-language" data-code="{{ data.code }}" aria-label="<?php esc_attr_e( 'Remove language', 'wpr-translate' ); ?>">
                <span class="wpr-icon" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256">
                        <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path>
                    </svg>
                </span>
                <span class="screen-reader-text"><?php esc_html_e( 'Remove', 'wpr-translate' ); ?></span>
            </button>
        </div>
    </div>
</script>
