<?php
/**
 * Content Configuration Component.
 */
if ( ! function_exists( 'render_content_configuration_component' ) ) {
    function render_content_configuration_component() {
        $find_option     = get_option( 'postology_find_elements', 'p, h2, h3, h4, h5, h6' );
        $exclude_option  = get_option( 'postology_excluded_classes', '.related-posts, .ads-section, .banner, .comments' );
        $selector_option = get_option( 'postology_selectors', 'main, .post-content, .entry-content, .content, .article, .blog-post, .post, .single-post' );
        ?>
        <div class="postology-field-wrapper custom-card">
            <h3 style="margin:0;margin-block-end: 21px;color:grey;">Content Configuration</h3>
            <div style="display:flex;flex-direction:column;font-size:18px;margin-block-start:9px;">
                <section style="display:grid;grid-template-columns: 30% 1fr;gap:6px;margin-block-start:9px;">
                    <strong style="align-self: center;"><?php echo esc_html__( 'Content Selector', 'postology' ); ?></strong>
                    <p class="description" style="grid-column: 1 / 3;font-size:15px;"><?php esc_html_e( 'Specify selectors to target content, e.g., body, main.', 'postology' ); ?></p>
                    <input type="text" name="postology_selectors" value="<?php echo esc_attr( $selector_option ); ?>" class="regular-text" style="grid-row-start: 1;grid-column-start: 2;" />
                </section>
                <section style="display:grid;grid-template-columns: 30% 1fr;gap:6px;margin-block-start:21px;">
                    <strong style="align-self: center;"><?php echo esc_html__( 'Find Elements', 'postology' ); ?></strong>
                    <p class="description" style="grid-column: 1 / 3;font-size:15px;">
                        <?php esc_html_e( 'Specify HTML elements to find within the content selectors. Examples:', 'postology' ); ?>
                        <code>p</code>, <code>h2</code>, <code>h3</code>, <code>blockquote</code>.
                        <?php esc_html_e( 'Adjust as needed based on your content structure.', 'postology' ); ?>
                    </p>
                    <input type="text" name="postology_find_elements" value="<?php echo esc_attr( $find_option ); ?>" class="regular-text" style="grid-row-start: 1;grid-column-start: 2;" />
                </section>
                <section style="display:grid;grid-template-columns: 30% 1fr;gap:6px;margin-block-start:21px;">
                    <strong style="align-self: center;"><?php echo esc_html__( 'Excluded Classes or Selectors', 'postology' ); ?></strong>
                    <p class="description" style="grid-column: 1 / 3;font-size:15px;">
                        <?php esc_html_e( 'Specify classes or selectors to exclude from the content.', 'postology' ); ?>
                        <?php esc_html_e( 'Examples:', 'postology' ); ?> <code>.related-posts</code>, <code>.ads-section</code>, <code>.banner</code>, <code>.comments</code>.
                        <?php esc_html_e( 'This helps prevent unwanted content from being summarized.', 'postology' ); ?>
                    </p>
                    <input type="text" name="postology_excluded_classes" value="<?php echo esc_attr( $exclude_option ); ?>" class="regular-text" style="grid-row-start: 1;grid-column-start: 2;" />
                </section>
            </div>
        </div>
        <?php
    }
}
