<?php
defined('ABSPATH') || die;

$custom_styles_saved = get_option('advgb_custom_styles', $this::$default_custom_styles);
?>
<div class="publishpress-admin wrap">
    <?php
    if (isset($_GET['save'])) : // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- display message, no action
        ?>
        <div id="message" class="updated fade">
            <p>
                <?php esc_html_e('Your styles have been saved!', 'advanced-gutenberg'); ?>
            </p>
        </div>
    <?php endif; ?>

    <header>
        <h1 class="wp-heading-inline">
            <?php esc_html_e('Block Styles', 'advanced-gutenberg'); ?>
        </h1>
    </header>

    <div class="wrap">
        <div id="customstyles-tab" class="tab-content">
            <div id="advgb-customstyles-list">
                <div id="mybootstrap">
                    <ul class="advgb-customstyles-list">
                        <?php
                        $content = '';
                        foreach ($custom_styles_saved as $customStyles) {
                            $content .= '<li class="advgb-customstyles-items" data-id-customstyle="' . esc_attr((int) $customStyles['id']) . '">';
                            $content .= '<a><i class="title-icon" style="background-color: ' . esc_attr($customStyles['identifyColor']) . '"></i><span class="advgb-customstyles-items-title">' . esc_html($customStyles['title']) . '</span></a>';
                            $content .= '<a class="copy" title="' . esc_attr__('Copy', 'advanced-gutenberg') . '"><span class="dashicons dashicons-admin-page"></span></a>';
                            $content .= '<a class="trash" title="' . esc_attr__('Delete', 'advanced-gutenberg') . '"><span class="dashicons dashicons-no"></span></a>';
                            $content .= '<ul style="margin-left: 30px"><li class="advgb-customstyles-items-class">(' . esc_html($customStyles['name']) . ')</li></ul>';
                            $content .= '</li>';
                        }
                        $content .= '<li style="text-align: center; margin-top: 40px"><a class="advgb-customstyles-new button button-secondary"><span class="dashicons dashicons-plus"></span>' . esc_html__('Add new style', 'advanced-gutenberg') . '</a></li>';

                        echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped
                        ?>
                    </ul>
                </div>
            </div>

            <div id="advgb-customstyles-info">
                <div class="advgb-style-title-wrapper">
                    <label for="advgb-customstyles-title">
                        <?php esc_html_e('Style title', 'advanced-gutenberg') ?>
                    </label>
                    <input type="text" class="regular-text" name="customstyles-title" id="advgb-customstyles-title"
                           value=""/>
                </div>
                <div class="advgb-customstyles-two-columns">
                    <div>
                        <label for="advgb-customstyles-classname">
                            <?php esc_html_e('Class name', 'advanced-gutenberg') ?>
                        </label>
                        <input type="text" class="regular-text" name="customstyles-classname" id="advgb-customstyles-classname"
                               value=""/>
                    </div>
                    <div id="identify-colors">
                        <div class="control-label">
                            <label for="advgb-customstyles-identify-color"
                                   class="advgb_qtip"
                                   data-qtip="<?php esc_attr_e(
                                       'This option help you identify specific custom styles in the list
                                            (usually set this same as the custom style\'s background color)',
                                       'advanced-gutenberg'
                                   ) ?>"
                            >
                                <?php esc_html_e('Identification color', 'advanced-gutenberg') ?>
                            </label>
                        </div>
                        <div class="controls">
                            <input type="text"
                                   name="customstyles-identify-color"
                                   id="advgb-customstyles-identify-color"
                                   class="minicolors minicolors-input"
                                   value="#000000"/>
                        </div>
                    </div>
                </div>
                <div class="advgb-customstyles-css">
                    <label for="advgb-customstyles-css">
                        <?php esc_html_e('Custom CSS', 'advanced-gutenberg') ?>
                    </label>
                    <textarea name="customstyles-css" id="advgb-customstyles-css"></textarea>
                </div>
                <div id="css-tips" style="border-top: 1px solid #ccc; margin-top: -25px;">
                    <small>
                        <?php esc_html_e('Hint: Use "Ctrl + Space" for auto completion', 'advanced-gutenberg') ?>
                    </small>
                </div>
                <div style="text-align: center; margin-top: 15px; margin-bottom: 15px; clear: both;">
                    <form method="POST">
                        <?php wp_nonce_field('advgb_cstyles_nonce', 'advgb_cstyles_nonce_field'); ?>
                        <input type="hidden" name="save_custom_styles" value="1" />
                        <button class="button button-primary"
                                style="margin: 10px auto"
                                type="button"
                                id="save_custom_styles"
                                value="1"
                        >
                            <span><?php esc_html_e('Save styles', 'advanced-gutenberg') ?></span>
                        </button>
                    </form>
                </div>

                <div id="advgb-customstyles-preview">
                    <p class="preview-title"><?php esc_html_e('Preview', 'advanced-gutenberg'); ?></p>
                    <p class="previous-block" style="margin-bottom: 20px; margin-top: 10px; font-size: 16px; line-height: 24px;">
                        <strong>
                            <?php esc_html_e('Previous Paragraph.', 'advanced-gutenberg'); ?>
                        </strong>
                        <?php echo esc_html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae condimentum augue. Nullam semper augue quis posuere lacinia. Praesent non lectus nunc.'); ?>
                    </p>
                    <div class="advgb-customstyles-target"><?php esc_html_e('Example text with this style', 'advanced-gutenberg') ?></div>
                    <p class="follow-block" style="margin-bottom: 10px; margin-top: 20px; font-size: 16px; line-height: 24px;">
                        <strong>
                            <?php esc_html_e('Following Paragraph.', 'advanced-gutenberg'); ?>
                        </strong>
                        <?php echo esc_html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae condimentum augue. Nullam semper augue quis posuere lacinia. Praesent non lectus nunc.'); ?>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
