<?php

/**
 * Slide Edit View (Manual mode)
 *
 * @package SlideMind
 * @since 2.0.0
 */
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
if ( !current_user_can( 'manage_slidemind_configs' ) ) {
    wp_die( esc_html__( 'You do not have permission to access this page.', 'slidemind' ) );
}
// Fetch data
$plugin = \SlideMind\Plugin::instance();
$config_repo = $plugin->get_config_repository();
$llm_proxy = $plugin->get_llm_proxy();
// Defaults from settings
$sm_settings = wp_parse_args( get_option( 'slidemind_settings', [] ), [
    'default_model'       => 'anthropic/claude-3.5-sonnet',
    'default_temperature' => 0.7,
    'default_max_tokens'  => 1024,
] );
// Existing slide? (read-only navigation params; capability checked above; values cast to int).
// phpcs:disable WordPress.Security.NonceVerification.Recommended -- Read-only navigation params; capability checked above; values cast to int.
$slide_id = ( isset( $_GET['slide_id'] ) ? (int) $_GET['slide_id'] : 0 );
$slide = null;
$inherited = [
    'course' => null,
    'module' => null,
];
// Pre-selected module / course?
$module_id = ( isset( $_GET['module_id'] ) ? (int) $_GET['module_id'] : 0 );
$course_id = ( isset( $_GET['course_id'] ) ? (int) $_GET['course_id'] : 0 );
// phpcs:enable WordPress.Security.NonceVerification.Recommended
if ( $slide_id ) {
    $slide = $config_repo->get_slide( $slide_id );
    if ( $slide ) {
        $module_id = $slide['parent_module_id'];
        $course_id = $slide['parent_course_id'];
        $inherited = $config_repo->get_inherited_content( $slide_id );
    }
} elseif ( $module_id ) {
    $inherited = $config_repo->get_inherited_content( $module_id, true );
    // Derive course from module
    if ( !$course_id ) {
        $module_data = $config_repo->get_module( $module_id );
        if ( $module_data ) {
            $course_id = $module_data['parent_course_id'];
        }
    }
} elseif ( $course_id ) {
    // Course-level slide (no module): load course data
    $course_data = $config_repo->get_course( $course_id );
    if ( $course_data ) {
        $inherited['course'] = [
            'id'               => $course_data['id'],
            'title'            => $course_data['title'],
            'theme'            => $course_data['theme'],
            'objectives'       => $course_data['objectives'],
            'content'          => $course_data['content'] ?? '',
            'has_custom_key'   => $course_data['has_custom_key'],
            'response_example' => $course_data['response_example'] ?? '',
        ];
    }
}
// List of courses and modules
$courses = $config_repo->get_courses();
$modules = $config_repo->get_all_modules();
// Determine hierarchy state for scope constraints
$has_course = !empty( $course_id );
$has_module = !empty( $module_id );
$can_scope = false;
// Resolved provider for the slide
$slide_provider = $slide['provider'] ?? '';
$resolved_provider = $slide['resolved_provider'] ?? get_option( 'slidemind_global_provider', 'openrouter' );
// Available models (from resolved provider)
$models = $llm_proxy->get_models( $resolved_provider );
$providers = \SlideMind\Core\LLMProxy::get_providers();
$is_edit = !empty( $slide );
$page_title = ( $is_edit ? __( 'Edit slide', 'slidemind' ) : __( 'New slide (Manual mode)', 'slidemind' ) );
// Widget appearance (per-slide overrides)
$widget_color = $slide['widget_color'] ?? '';
$widget_ai_color = $slide['widget_ai_color'] ?? '';
$widget_theme = $slide['widget_theme'] ?? '';
$widget_show_header = $slide['widget_show_header'] ?? '';
$widget_ai_text_color = $slide['widget_ai_text_color'] ?? '';
$widget_border_radius = $slide['widget_border_radius'] ?? '';
$widget_title = $slide['widget_title'] ?? '';
// Guest access per-slide override (enum: '', 'inherit', 'allow', 'deny' — all empty values = 'inherit').
$allow_guests_meta = ( $slide_id ? get_post_meta( $slide_id, '_sm_allow_guests', true ) : '' );
if ( !in_array( $allow_guests_meta, ['inherit', 'allow', 'deny'], true ) ) {
    $allow_guests_meta = 'inherit';
}
$global_allow_guests = !empty( get_option( 'slidemind_settings', [] )['allow_guests'] );
?>

<div class="sm-wrap">
    <div class="sm-header">
        <h1><?php 
echo esc_html( $page_title );
?></h1>
        <div class="sm-header-actions">
            <?php 
if ( !$is_edit ) {
    ?>
                <a href="<?php 
    echo esc_url( admin_url( 'admin.php?page=slidemind-new' ) );
    ?>" class="sm-btn sm-btn-secondary">
                    <span class="dashicons dashicons-admin-generic"></span>
                    <?php 
    esc_html_e( 'Wizard mode', 'slidemind' );
    ?>
                </a>
            <?php 
}
?>
            <a href="<?php 
echo esc_url( admin_url( 'admin.php?page=slidemind-slides' ) );
?>" class="sm-btn sm-btn-secondary">
                <span class="dashicons dashicons-arrow-left-alt"></span>
                <?php 
esc_html_e( 'Back to list', 'slidemind' );
?>
            </a>
        </div>
    </div>

    <?php 
?>

    <form id="sm-slide-form" class="sm-form-layout">
        <input type="hidden" name="id" value="<?php 
echo esc_attr( $slide_id );
?>">

        <div class="sm-form-main">
            <!-- Parent module -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Hierarchy', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <?php 
?>
                    <div class="sm-notice sm-notice-info" style="margin-bottom: 0;">
                        <?php 
esc_html_e( 'This is a standalone slide. Upgrade to Pro or Dialogue to organize slides under courses and modules with shared context.', 'slidemind' );
?>
                    </div>
                    <input type="hidden" name="parent_course_id" value="<?php 
echo esc_attr( $course_id );
?>">
                    <input type="hidden" name="parent_module_id" value="<?php 
echo esc_attr( $module_id );
?>">
                    <?php 
?>

                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-title">
                            <?php 
esc_html_e( 'Slide title', 'slidemind' );
?> <span class="required">*</span>
                        </label>
                        <input type="text"
                               id="sm-slide-title"
                               name="title"
                               class="sm-form-input"
                               value="<?php 
echo esc_attr( $slide['title'] ?? '' );
?>"
                               placeholder="<?php 
esc_attr_e( 'E.g.: Interactive quiz - Leadership styles', 'slidemind' );
?>"
                               required>
                        <?php 
if ( \SlideMind\Core\FeatureGate::get_plan() === 'free' ) {
    ?>
                            <?php 
    $sm_slide_upgrade_url = \SlideMind\Core\FeatureGate::get_upgrade_url();
    ?>
                            <p class="sm-form-help" style="margin-top: 6px;">
                                <span class="dashicons dashicons-star-filled" style="color:#d99b6a;font-size:13px;width:13px;height:13px;vertical-align:text-bottom;"></span>
                                <?php 
    esc_html_e( 'Pro: link this slide to a course or module to inherit shared context and prompts.', 'slidemind' );
    ?>
                                <?php 
    if ( $sm_slide_upgrade_url ) {
        ?>
                                    <a href="<?php 
        echo esc_url( $sm_slide_upgrade_url );
        ?>" target="_blank" rel="noopener noreferrer"><?php 
        esc_html_e( 'Learn more', 'slidemind' );
        ?></a>
                                <?php 
    }
    ?>
                            </p>
                        <?php 
}
?>
                    </div>

                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-number">
                            <?php 
esc_html_e( 'Slide number (optional)', 'slidemind' );
?>
                        </label>
                        <input type="number"
                               id="sm-slide-number"
                               name="slide_number"
                               class="sm-form-input"
                               value="<?php 
echo esc_attr( $slide['slide_number'] ?? '' );
?>"
                               placeholder="<?php 
esc_attr_e( 'E.g.: 12', 'slidemind' );
?>"
                               min="1"
                               style="max-width: 150px;">
                    </div>

                    <?php 
$current_mode = $slide['widget_mode'] ?? 'qa';
?>
                    <div class="sm-form-group">
                        <label class="sm-form-label"><?php 
esc_html_e( 'Widget mode', 'slidemind' );
?></label>
                        <div class="sm-mode-selector">
                            <label class="sm-mode-option <?php 
echo ( $current_mode === 'qa' ? 'sm-mode-option--active' : '' );
?>">
                                <input type="radio" name="widget_mode" value="qa" <?php 
checked( $current_mode, 'qa' );
?>>
                                <div class="sm-mode-text">
                                    <span class="sm-mode-label"><?php 
esc_html_e( 'Q&A', 'slidemind' );
?></span>
                                    <span class="sm-mode-desc"><?php 
esc_html_e( 'Single question', 'slidemind' );
?></span>
                                </div>
                                <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-qa.svg' );
?>" alt="">
                            </label>
                            <label class="sm-mode-option <?php 
echo ( $current_mode === 'chat' ? 'sm-mode-option--active' : '' );
?>">
                                <input type="radio" name="widget_mode" value="chat" <?php 
checked( $current_mode, 'chat' );
?>>
                                <div class="sm-mode-text">
                                    <span class="sm-mode-label"><?php 
esc_html_e( 'Chat', 'slidemind' );
?></span>
                                    <span class="sm-mode-desc"><?php 
esc_html_e( 'Multi-turn conversation', 'slidemind' );
?></span>
                                </div>
                                <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-chat.svg' );
?>" alt="">
                            </label>
                            <label class="sm-mode-option <?php 
echo ( $current_mode === 'capture' ? 'sm-mode-option--active' : '' );
?>">
                                <input type="radio" name="widget_mode" value="capture" <?php 
checked( $current_mode, 'capture' );
?>>
                                <div class="sm-mode-text">
                                    <span class="sm-mode-label"><?php 
esc_html_e( 'Capture', 'slidemind' );
?></span>
                                    <span class="sm-mode-desc"><?php 
esc_html_e( 'Data capture without AI', 'slidemind' );
?></span>
                                </div>
                                <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-capture.svg' );
?>" alt="">
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Inherited content -->
            <div class="sm-card" id="sm-inherited-card" style="<?php 
echo ( $inherited['course'] ? '' : 'display:none;' );
?>">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Inherited content', 'slidemind' );
?></h2>
                    <span class="sm-badge sm-badge-info"><?php 
esc_html_e( 'Read-only', 'slidemind' );
?></span>
                </div>
                <div class="sm-card-body">
                    <div class="sm-inherited-preview" id="sm-inherited-preview">
                        <?php 
if ( $inherited['course'] ) {
    ?>
                            <div class="sm-inherited-section">
                                <h4>
                                <?php 
    /* translators: %s: course title */
    printf( esc_html__( 'Course: %s', 'slidemind' ), esc_html( $inherited['course']['title'] ) );
    ?>
                                </h4>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Theme', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{course_theme}}</code>
                                    <span class="sm-inherited-value"><?php 
    echo esc_html( ( $inherited['course']['theme'] ?: '—' ) );
    ?></span>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Objectives', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{course_objectives}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['course']['objectives'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Content', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{course_content}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['course']['content'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Response example', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{course_response_example}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['course']['response_example'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                            </div>
                        <?php 
}
?>
                        <?php 
if ( $inherited['module'] ) {
    ?>
                            <div class="sm-inherited-section" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
                                <h4>
                                <?php 
    /* translators: %s: module title */
    printf( esc_html__( 'Module: %s', 'slidemind' ), esc_html( $inherited['module']['title'] ) );
    ?>
                                </h4>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Theme', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{module_theme}}</code>
                                    <span class="sm-inherited-value"><?php 
    echo esc_html( ( $inherited['module']['theme'] ?: '—' ) );
    ?></span>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Objectives', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{module_objectives}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['module']['objectives'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Content', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{module_content}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['module']['content'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                                <div class="sm-inherited-field">
                                    <strong><?php 
    esc_html_e( 'Response example', 'slidemind' );
    ?></strong> <code class="sm-inherited-var-tag sm-clickable-var">{{module_response_example}}</code>
                                    <div class="sm-inherited-text"><?php 
    echo nl2br( esc_html( wp_trim_words( ( $inherited['module']['response_example'] ?: '—' ), 30 ) ) );
    ?></div>
                                </div>
                            </div>
                        <?php 
}
?>
                    </div>
                </div>
            </div>

            <!-- AI model configuration -->
            <div class="sm-card" id="sm-ai-model-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'AI model configuration', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <!-- Provider -->
                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-provider"><?php 
esc_html_e( 'LLM Provider', 'slidemind' );
?></label>
                        <?php 
// Resolve inherited provider for display
$inherited_provider_label = '';
$inherited_provider_source = '';
// Check course provider (via module or direct link)
$course_id_for_provider = $course_id;
if ( !$course_id_for_provider && $module_id ) {
    $course_id_for_provider = get_post_meta( $module_id, '_slidemind_parent_course_id', true );
}
if ( $course_id_for_provider ) {
    $course_provider = get_post_meta( $course_id_for_provider, '_slidemind_provider', true );
    if ( !empty( $course_provider ) ) {
        $inherited_provider_label = ( isset( $providers[$course_provider] ) ? $providers[$course_provider]['label'] : $course_provider );
        $inherited_provider_source = __( 'from course', 'slidemind' );
    }
}
if ( empty( $inherited_provider_label ) ) {
    $global_prov = get_option( 'slidemind_global_provider', 'openrouter' );
    $inherited_provider_label = ( isset( $providers[$global_prov] ) ? $providers[$global_prov]['label'] : $global_prov );
    $inherited_provider_source = __( 'global', 'slidemind' );
}
$inherit_display = sprintf( 
    /* translators: %1$s: provider name, %2$s: source (global, from course) */
    __( 'Inherit (%1$s — %2$s)', 'slidemind' ),
    $inherited_provider_label,
    $inherited_provider_source
 );
?>
                        <select name="provider" id="sm-slide-provider" class="sm-form-select sm-provider-select">
                            <option value=""><?php 
echo esc_html( $inherit_display );
?></option>
                            <?php 
foreach ( $providers as $slug => $info ) {
    ?>
                                <option value="<?php 
    echo esc_attr( $slug );
    ?>" <?php 
    selected( $slide_provider, $slug );
    ?>>
                                    <?php 
    echo esc_html( $info['label'] );
    ?>
                                </option>
                            <?php 
}
?>
                        </select>
                    </div>

                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-model">
                            <?php 
esc_html_e( 'LLM Model', 'slidemind' );
?> <span class="required">*</span>
                        </label>
                        <select id="sm-slide-model" name="model_id" class="sm-form-select sm-model-select" data-current-provider="<?php 
echo esc_attr( $resolved_provider );
?>" required>
                            <option value=""><?php 
esc_html_e( 'Select a model', 'slidemind' );
?></option>
                            <?php 
$current_model_provider = '';
foreach ( $models as $model ) {
    $parts = explode( '/', $model['id'] );
    $model_provider_label = ucfirst( $parts[0] );
    if ( $model_provider_label !== $current_model_provider ) {
        if ( $current_model_provider ) {
            echo '</optgroup>';
        }
        echo '<optgroup label="' . esc_attr( $model_provider_label ) . '">';
        $current_model_provider = $model_provider_label;
    }
    ?>
                                <option value="<?php 
    echo esc_attr( $model['id'] );
    ?>"
                                        data-pricing='<?php 
    echo wp_json_encode( $model['pricing'] ?? null );
    ?>'
                                        <?php 
    selected( $slide['model_id'] ?? $sm_settings['default_model'], $model['id'] );
    ?>>
                                    <?php 
    echo esc_html( $model['name'] );
    ?>
                                </option>
                            <?php 
}
?>
                            <?php 
if ( $current_model_provider ) {
    ?>
                                <?php 
    echo '</optgroup>';
    ?>
                            <?php 
}
?>
                        </select>
                        <div class="sm-model-pricing" style="display: none;">
                            <span class="sm-badge sm-badge-info">
                                <?php 
esc_html_e( 'Estimated cost:', 'slidemind' );
?> <span class="sm-pricing-text">—</span>
                            </span>
                        </div>
                    </div>

                    <div class="sm-form-row">
                        <div class="sm-form-group">
                            <label class="sm-form-label" for="sm-slide-temperature">
                                <?php 
esc_html_e( 'Temperature', 'slidemind' );
?>
                            </label>
                            <input type="number"
                                   id="sm-slide-temperature"
                                   name="temperature"
                                   class="sm-form-input"
                                   value="<?php 
echo esc_attr( $slide['temperature'] ?? $sm_settings['default_temperature'] );
?>"
                                   min="0" max="2" step="0.1">
                            <p class="sm-form-help"><?php 
esc_html_e( '0 = deterministic, 2 = creative', 'slidemind' );
?></p>
                        </div>

                        <div class="sm-form-group">
                            <label class="sm-form-label" for="sm-slide-max-tokens">
                                <?php 
esc_html_e( 'Max tokens', 'slidemind' );
?>
                            </label>
                            <input type="number"
                                   id="sm-slide-max-tokens"
                                   name="max_tokens"
                                   class="sm-form-input"
                                   value="<?php 
echo esc_attr( $slide['max_tokens'] ?? $sm_settings['default_max_tokens'] );
?>"
                                   min="1" max="128000">
                            <p class="sm-form-help"><?php 
esc_html_e( 'Maximum response length', 'slidemind' );
?></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- System prompt -->
            <div class="sm-card" id="sm-system-prompt-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'System prompt', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <!-- Template cards (loaded via AJAX) -->
                    <div class="sm-template-cards sm-template-cards--compact" id="sm-slide-template-cards">
                        <div style="padding: 12px; text-align: center;">
                            <div class="sm-spinner" style="margin: 0 auto;"></div>
                        </div>
                    </div>

                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-prompt">
                            <?php 
esc_html_e( 'AI instructions', 'slidemind' );
?>
                        </label>
                        <textarea id="sm-slide-prompt"
                                  name="system_prompt"
                                  class="sm-form-textarea"
                                  rows="12"
                                  placeholder="<?php 
esc_attr_e( 'Describe the desired AI behavior...', 'slidemind' );
?>"><?php 
echo esc_textarea( $slide['system_prompt'] ?? '' );
?></textarea>
                        <div style="display: flex; gap: 8px; margin-top: 8px;">
                            <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="sm-insert-variable">
                                <span class="dashicons dashicons-plus-alt2"></span>
                                <?php 
esc_html_e( 'Insert a variable', 'slidemind' );
?>
                            </button>
                            <button type="button" class="sm-btn sm-btn-primary sm-btn-sm" id="sm-generate-prompt-btn">
                                <span class="dashicons dashicons-admin-generic"></span>
                                <?php 
esc_html_e( 'Generate with AI', 'slidemind' );
?>
                            </button>
                        </div>
                        <details class="sm-form-help sm-variables-help" style="margin-top: 8px; cursor: pointer;">
                            <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Available variables', 'slidemind' );
?></summary>
                            <div style="margin-top: 8px; display: flex; flex-direction: column; gap: 10px;">
                                <div>
                                    <code>{{variable}}</code> — <strong><?php 
esc_html_e( 'Authoring tool variable', 'slidemind' );
?></strong><br>
                                    <span style="color: #646970; font-size: 12px; margin-left: 16px;">
                                        <?php 
esc_html_e( 'One-time value sent by the authoring tool with each request in', 'slidemind' );
?> <code>variables: {}</code>.<br>
                                        <span style="margin-left: 0;"><?php 
esc_html_e( 'E.g.:', 'slidemind' );
?> <code class="sm-clickable-var">{{firstname}}</code>, <code class="sm-clickable-var">{{user_answer}}</code></span>
                                    </span>
                                    <br><a href="https://docs.slidemind.app/wordpress/variables/#variable-types" class="sm-doc-link" target="_blank" rel="noopener" style="font-size: 11px; color: var(--sm-primary); margin-left: 16px;"><?php 
esc_html_e( 'Learn more', 'slidemind' );
?></a>
                                </div>
                                <div>
                                    <code>{{memory.*}}</code> — <strong><?php 
esc_html_e( 'Learner memory', 'slidemind' );
?></strong><br>
                                    <span style="color: #646970; font-size: 12px; margin-left: 16px;">
                                        <?php 
esc_html_e( 'Persistent data across sessions, stored in database per learner. Server-side resolution (cascade: module > course > global).', 'slidemind' );
?><br>
                                        <span style="margin-left: 0;"><?php 
esc_html_e( 'E.g.:', 'slidemind' );
?> <code class="sm-clickable-var">{{memory.firstname}}</code>, <code class="sm-clickable-var">{{memory.global.city}}</code></span>
                                    </span>
                                    <br><a href="https://docs.slidemind.app/wordpress/learner-memory/#using-memory-variables-in-prompts" class="sm-doc-link" target="_blank" rel="noopener" style="font-size: 11px; color: var(--sm-primary); margin-left: 16px;"><?php 
esc_html_e( 'Learn more', 'slidemind' );
?></a>
                                </div>
                                <div>
                                    <code>{{profile.*}}</code> — <strong><?php 
esc_html_e( 'WordPress / BuddyBoss profile', 'slidemind' );
?></strong>
                                    <span style="display: inline-block; background: #f0fdf4; color: #166534; font-size: 10px; padding: 1px 6px; border-radius: 3px; vertical-align: middle;"><?php 
esc_html_e( 'automatic', 'slidemind' );
?></span><br>
                                    <span style="color: #646970; font-size: 12px; margin-left: 16px;">
                                        <?php 
esc_html_e( 'Read-only user profile data. Allowed fields are configured in Settings.', 'slidemind' );
?><br>
                                        <span style="margin-left: 0;"><?php 
esc_html_e( 'E.g.:', 'slidemind' );
?> <code class="sm-clickable-var">{{profile.display_name}}</code>, <code class="sm-clickable-var">{{profile.email}}</code></span>
                                    </span>
                                    <br><a href="https://docs.slidemind.app/wordpress/variables/#profile-variables" class="sm-doc-link" target="_blank" rel="noopener" style="font-size: 11px; color: var(--sm-primary); margin-left: 16px;"><?php 
esc_html_e( 'Learn more', 'slidemind' );
?></a>
                                </div>
                                <div>
                                    <code>{{variable|default}}</code> — <strong><?php 
esc_html_e( 'Fallback value', 'slidemind' );
?></strong><br>
                                    <span style="color: #646970; font-size: 12px; margin-left: 16px;">
                                        <?php 
esc_html_e( 'Append |value after any variable to define a fallback when the variable cannot be resolved.', 'slidemind' );
?><br>
                                        <span style="margin-left: 0;"><?php 
esc_html_e( 'E.g.:', 'slidemind' );
?> <code class="sm-clickable-var">{{profile.first_name|dear learner}}</code>, <code class="sm-clickable-var">{{memory.global.city|your region}}</code></span>
                                    </span>
                                    <br><a href="https://docs.slidemind.app/wordpress/variables/#fallback-values" class="sm-doc-link" target="_blank" rel="noopener" style="font-size: 11px; color: var(--sm-primary); margin-left: 16px;"><?php 
esc_html_e( 'Learn more', 'slidemind' );
?></a>
                                </div>
                            </div>
                        </details>
                    </div>
                </div>
            </div>

            <!-- Response example -->
            <div class="sm-card" id="sm-response-example-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Response example', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-response-example">
                            <?php 
esc_html_e( 'Response example', 'slidemind' );
?>
                        </label>
                        <textarea id="sm-slide-response-example"
                                  name="response_example"
                                  class="sm-form-textarea"
                                  rows="8"
                                  placeholder="<?php 
echo esc_attr( __( "E.g.: Great thinking! Here are some leads:\n\n- **Point 1**: Concise explanation\n- **Point 2**: Concise explanation\n- **Point 3**: Concise explanation\n\nKeep it up!", 'slidemind' ) );
?>"><?php 
echo esc_textarea( $slide['response_example'] ?? '' );
?></textarea>
                        <p class="sm-form-help"><?php 
esc_html_e( 'This example will be automatically added to the system prompt sent to the AI. Use', 'slidemind' );
?> <code class="sm-clickable-var">{{course_response_example}}</code> <?php 
esc_html_e( 'and/or', 'slidemind' );
?> <code class="sm-clickable-var">{{module_response_example}}</code> <?php 
esc_html_e( 'to inherit parent formats.', 'slidemind' );
?></p>
                        <details class="sm-form-help" style="margin-top: 8px; cursor: pointer;">
                            <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Best practices', 'slidemind' );
?></summary>
                            <div style="margin-top: 8px; line-height: 1.6;">
                                <strong><?php 
esc_html_e( 'Do:', 'slidemind' );
?></strong>
                                <ul style="margin: 4px 0 12px 16px; padding: 0; list-style: disc;">
                                    <li><?php 
esc_html_e( 'Write a complete example response as you would like to receive it from the AI', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Follow the exact desired formatting (paragraphs, bullet lists, headings, etc.)', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Indicate the desired tone (formal, friendly, educational, encouraging...)', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Include the expected level of detail (short answer vs. detailed explanation)', 'slidemind' );
?></li>
                                </ul>
                                <strong><?php 
esc_html_e( 'Avoid:', 'slidemind' );
?></strong>
                                <ul style="margin: 4px 0 0 16px; padding: 0; list-style: disc;">
                                    <li><?php 
esc_html_e( 'Do NOT include instructions or directives ("You must...", "Answer in...") -- use the system prompt for that', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Do not repeat the system prompt content -- the example is complementary, not a replacement', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Avoid overly long examples (more than ~300 words) -- the AI will lose accuracy', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Do not include learner-specific data -- the example should be generic', 'slidemind' );
?></li>
                                    <li><?php 
esc_html_e( 'Do not mix multiple formats in the same example -- one clear format per field', 'slidemind' );
?></li>
                                </ul>
                            </div>
                        </details>
                    </div>
                </div>
            </div>

            <!-- Chat mode options -->
            <div class="sm-card" id="sm-chat-options-card" style="<?php 
echo ( $current_mode === 'chat' ? '' : 'display:none;' );
?>">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Chat mode options', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-opening-message">
                            <?php 
esc_html_e( 'Opening message', 'slidemind' );
?>
                        </label>
                        <textarea id="sm-opening-message"
                                  name="opening_message"
                                  class="sm-form-textarea"
                                  rows="3"
                                  placeholder="<?php 
esc_attr_e( 'E.g.: Hello {{profile.first_name|there}}! What is your question?', 'slidemind' );
?>"><?php 
echo esc_textarea( $slide['opening_message'] ?? '' );
?></textarea>
                        <p class="sm-form-help"><?php 
esc_html_e( 'Displayed as the first AI bubble when the chat loads. Not sent to the model.', 'slidemind' );
?></p>
                        <details class="sm-form-help" style="margin-top: 6px; cursor: pointer;">
                            <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Variables & fallback values', 'slidemind' );
?></summary>
                            <div style="margin-top: 6px; line-height: 1.6;">
                                <?php 
esc_html_e( 'Use any variable from the "Available variables" list in the system prompt block above. Add a fallback with a pipe:', 'slidemind' );
?>
                                <br>
                                <code class="sm-clickable-var">{{profile.first_name|dear learner}}</code>
                                <br>
                                <code class="sm-clickable-var">{{memory.global.city|your region}}</code>
                                <br>
                                <span style="color: #646970; font-size: 12px;"><?php 
esc_html_e( 'The value after | is used if the variable is not available (e.g. anonymous visitor).', 'slidemind' );
?></span>
                            </div>
                        </details>
                    </div>

                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-max-turns">
                            <?php 
esc_html_e( 'Turn limit', 'slidemind' );
?>
                        </label>
                        <input type="number"
                               id="sm-max-turns"
                               name="max_turns"
                               class="sm-form-input"
                               value="<?php 
echo esc_attr( $slide['max_turns'] ?? 5 );
?>"
                               min="0"
                               style="max-width: 150px;">
                        <p class="sm-form-help"><?php 
esc_html_e( 'Maximum number of exchanges before closing the conversation. 0 = unlimited.', 'slidemind' );
?></p>
                    </div>
                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-closing-message">
                            <?php 
esc_html_e( 'Closing message', 'slidemind' );
?>
                        </label>
                        <textarea id="sm-closing-message"
                                  name="closing_message"
                                  class="sm-form-textarea"
                                  rows="3"
                                  placeholder="<?php 
esc_attr_e( 'E.g.: Thank you for this exchange! The conversation is now over.', 'slidemind' );
?>"><?php 
echo esc_textarea( $slide['closing_message'] ?? '' );
?></textarea>
                        <p class="sm-form-help"><?php 
esc_html_e( 'Displayed as an AI bubble when the turn limit is reached.', 'slidemind' );
?></p>
                    </div>

                    <?php 
$graceful_close = $slide['graceful_close'] ?? '0';
?>
                    <div class="sm-form-group">
                        <label class="sm-form-label" style="display: flex; align-items: center; gap: 8px;">
                            <input type="checkbox"
                                   id="sm-graceful-close"
                                   name="graceful_close"
                                   value="1"
                                   <?php 
checked( $graceful_close, '1' );
?>>
                            <?php 
esc_html_e( 'Graceful close', 'slidemind' );
?>
                        </label>
                        <p class="sm-form-help"><?php 
esc_html_e( 'On the last turn, a special instruction is injected so the AI naturally concludes the conversation.', 'slidemind' );
?></p>
                    </div>
                    <div class="sm-form-group" id="sm-graceful-close-prompt-wrap" style="<?php 
echo ( $graceful_close === '1' ? '' : 'display:none;' );
?>">
                        <label class="sm-form-label" for="sm-graceful-close-prompt">
                            <?php 
esc_html_e( 'Closing instruction', 'slidemind' );
?>
                        </label>
                        <textarea id="sm-graceful-close-prompt"
                                  name="graceful_close_prompt"
                                  class="sm-form-textarea"
                                  rows="3"
                                  placeholder="<?php 
esc_attr_e( 'This is the last exchange. Please naturally conclude the conversation while staying in character. Do not mention technical limits or turn counters.', 'slidemind' );
?>"><?php 
echo esc_textarea( $slide['graceful_close_prompt'] ?? '' );
?></textarea>
                    </div>

                    <div id="sm-chat-cost-projection"></div>
                </div>
            </div>

            <!-- Return variables -->
            <div class="sm-card" id="sm-output-vars-card" style="<?php 
echo ( $current_mode === 'chat' ? 'display:none;' : '' );
?>">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Return variables', 'slidemind' );
?></h2>
                    <span class="sm-badge sm-badge-secondary"><?php 
esc_html_e( 'Optional', 'slidemind' );
?></span>
                </div>
                <div class="sm-card-body">
                    <p class="sm-form-help" style="margin-bottom: 12px;">
                        <?php 
/* translators: %s: SetVar() code */
printf( esc_html__( 'Define return variables so the AI responds in structured JSON. Each variable will be accessible in your authoring tool via %s. Without variables, the response remains free text.', 'slidemind' ), '<code>SetVar()</code>' );
?>
                    </p>
                    <details class="sm-form-help" style="margin-bottom: 12px; cursor: pointer;">
                        <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Available variable types', 'slidemind' );
?></summary>
                        <ul style="margin: 6px 0 0 16px; padding: 0; list-style: disc; line-height: 1.8;">
                            <li><strong><?php 
esc_html_e( 'Text', 'slidemind' );
?></strong> — <?php 
esc_html_e( 'Free text string (e.g.: feedback, explanation, answer)', 'slidemind' );
?></li>
                            <li><strong><?php 
esc_html_e( 'Number', 'slidemind' );
?></strong> — <?php 
esc_html_e( 'Integer or decimal numeric value (e.g.: score, percentage, grade)', 'slidemind' );
?></li>
                            <li><strong><?php 
esc_html_e( 'Boolean', 'slidemind' );
?></strong> — <?php 
esc_html_e( 'True or false only (e.g.: correct_answer, objective_reached)', 'slidemind' );
?></li>
                            <li><strong><?php 
esc_html_e( 'Enum', 'slidemind' );
?></strong> — <?php 
esc_html_e( 'One value from a predefined list (e.g.: level = beginner, intermediate, advanced)', 'slidemind' );
?></li>
                        </ul>
                    </details>

                    <div id="sm-output-vars-list">
                        <?php 
$output_variables = $slide['output_variables'] ?? [];
if ( !empty( $output_variables ) ) {
    foreach ( $output_variables as $idx => $var ) {
        ?>
                        <div class="sm-output-var-row" data-index="<?php 
        echo esc_attr( $idx );
        ?>">
                            <div class="sm-output-var-fields">
                                <input type="text"
                                       class="sm-form-input sm-output-var-name"
                                       value="<?php 
        echo esc_attr( $var['name'] );
        ?>"
                                       placeholder="nom_variable"
                                       pattern="^[a-z][a-z0-9_]*$"
                                       title="<?php 
        esc_attr_e( 'Lowercase letters, digits and underscores. Must start with a letter.', 'slidemind' );
        ?>">
                                <div class="sm-output-var-type-wrap">
                                    <select class="sm-form-select sm-output-var-type">
                                        <option value="texte" <?php 
        selected( $var['type'], 'texte' );
        ?>><?php 
        esc_html_e( 'Text', 'slidemind' );
        ?></option>
                                        <option value="nombre" <?php 
        selected( $var['type'], 'nombre' );
        ?>><?php 
        esc_html_e( 'Number', 'slidemind' );
        ?></option>
                                        <option value="booleen" <?php 
        selected( $var['type'], 'booleen' );
        ?>><?php 
        esc_html_e( 'Boolean', 'slidemind' );
        ?></option>
                                        <option value="enum" <?php 
        selected( $var['type'], 'enum' );
        ?>><?php 
        esc_html_e( 'Enum', 'slidemind' );
        ?></option>
                                    </select>
                                    <?php 
        if ( $var['type'] === 'booleen' ) {
            ?>
                                        <span class="sm-output-var-type-hint"><?php 
            esc_html_e( 'Returns true or false', 'slidemind' );
            ?></span>
                                    <?php 
        } elseif ( $var['type'] === 'nombre' ) {
            ?>
                                        <span class="sm-output-var-type-hint"><?php 
            esc_html_e( 'Returns a number', 'slidemind' );
            ?></span>
                                    <?php 
        }
        ?>
                                </div>
                                <input type="text"
                                       class="sm-form-input sm-output-var-values"
                                       value="<?php 
        echo esc_attr( ( isset( $var['values'] ) ? implode( ', ', $var['values'] ) : '' ) );
        ?>"
                                       placeholder="val1, val2, val3"
                                       style="<?php 
        echo ( $var['type'] === 'enum' ? '' : 'display:none;' );
        ?>">
                                <?php 
        $desc_placeholders = [
            'texte'   => __( 'Description (optional)', 'slidemind' ),
            'nombre'  => __( 'Description (e.g.: score out of 10)', 'slidemind' ),
            'booleen' => __( 'Condition to evaluate (e.g.: did they answer correctly?)', 'slidemind' ),
            'enum'    => __( 'Description (optional)', 'slidemind' ),
        ];
        ?>
                                <input type="text"
                                       class="sm-form-input sm-output-var-desc"
                                       value="<?php 
        echo esc_attr( $var['description'] );
        ?>"
                                       placeholder="<?php 
        echo esc_attr( $desc_placeholders[$var['type']] ?? 'Description (optional)' );
        ?>">
                                <button type="button" class="sm-btn sm-btn-sm sm-btn-danger sm-output-var-remove" title="<?php 
        esc_attr_e( 'Delete', 'slidemind' );
        ?>">
                                    <span class="dashicons dashicons-no-alt"></span>
                                </button>
                            </div>
                        </div>
                        <?php 
    }
}
?>
                    </div>

                    <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="sm-add-output-var" style="margin-top: 8px;">
                        <span class="dashicons dashicons-plus-alt2"></span>
                        <?php 
esc_html_e( 'Add a return variable', 'slidemind' );
?>
                    </button>

                    <input type="hidden" id="sm-output-variables-json" name="output_variables" value="">
                </div>
            </div>

            <!-- Persistent memory accordion -->
            <?php 
$memory_variables = $slide['memory_variables'] ?? [];
$save_user_input = $slide['save_user_input'] ?? '0';
$save_ai_response = $slide['save_ai_response'] ?? '0';
$save_input_key = $slide['save_input_key'] ?? '';
$save_response_key = $slide['save_response_key'] ?? '';
$save_interaction_scope = $slide['save_interaction_scope'] ?? 'global';
?>
            <div class="sm-card" id="sm-memory-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Persistent memory', 'slidemind' );
?></h2>
                    <span class="sm-badge sm-badge-secondary"><?php 
esc_html_e( 'Optional', 'slidemind' );
?></span>
                </div>
                <div class="sm-card-body">

                    <!-- Auto-save interaction (Q&A/Chat only) -->
                    <div class="sm-autosave-section" id="sm-autosave-section">
                        <div class="sm-form-group">
                            <label class="sm-form-label" style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox"
                                       id="sm-save-interaction"
                                       <?php 
checked( $save_user_input === '1' || $save_ai_response === '1' );
?>>
                                <?php 
esc_html_e( 'Save exchange to memory', 'slidemind' );
?>
                            </label>
                        </div>
                        <div class="sm-autosave-suboptions" id="sm-autosave-suboptions" style="<?php 
echo ( $save_user_input === '1' || $save_ai_response === '1' ? '' : 'display:none;' );
?>">
                            <div class="sm-form-group" style="margin-bottom: 8px;">
                                <label style="display: flex; align-items: center; gap: 8px;">
                                    <input type="checkbox"
                                           name="save_user_input"
                                           value="1"
                                           <?php 
checked( $save_user_input, '1' );
?>>
                                    <?php 
esc_html_e( 'Learner input', 'slidemind' );
?>
                                    &rarr; <?php 
esc_html_e( 'key:', 'slidemind' );
?>
                                    <input type="text"
                                           name="save_input_key"
                                           class="sm-form-input"
                                           pattern="^[a-z][a-z0-9_]*$"
                                           value="<?php 
echo ( $is_edit ? esc_attr( $save_input_key ) : '' );
?>"
                                           placeholder="<?php 
echo ( $is_edit ? '' : esc_attr__( 'Auto-generated from title', 'slidemind' ) );
?>"
                                           style="width: 180px; display: inline-block;">
                                </label>
                            </div>
                            <div class="sm-form-group" style="margin-bottom: 8px;">
                                <label style="display: flex; align-items: center; gap: 8px;">
                                    <input type="checkbox"
                                           name="save_ai_response"
                                           value="1"
                                           <?php 
checked( $save_ai_response, '1' );
?>>
                                    <?php 
esc_html_e( 'AI response', 'slidemind' );
?>
                                    &rarr; <?php 
esc_html_e( 'key:', 'slidemind' );
?>
                                    <input type="text"
                                           name="save_response_key"
                                           class="sm-form-input"
                                           pattern="^[a-z][a-z0-9_]*$"
                                           value="<?php 
echo ( $is_edit ? esc_attr( $save_response_key ) : '' );
?>"
                                           placeholder="<?php 
echo ( $is_edit ? '' : esc_attr__( 'Auto-generated from title', 'slidemind' ) );
?>"
                                           style="width: 180px; display: inline-block;">
                                </label>
                            </div>
                            <div class="sm-form-group">
                                <label class="sm-form-label" for="sm-save-interaction-scope" style="font-size: 13px;">
                                    <?php 
esc_html_e( 'Scope:', 'slidemind' );
?>
                                </label>
                                <select name="save_interaction_scope" id="sm-save-interaction-scope" class="sm-form-select" style="width: auto; min-width: 140px;">
                                    <option value="global" <?php 
selected( $save_interaction_scope, 'global' );
?>><?php 
esc_html_e( 'Global', 'slidemind' );
?></option>
                                    <?php 
if ( $can_scope ) {
    ?>
                                    <option value="course" <?php 
    selected( $save_interaction_scope, 'course' );
    ?> <?php 
    echo ( !$has_course ? 'disabled' : '' );
    ?>><?php 
    esc_html_e( 'Course', 'slidemind' );
    ?></option>
                                    <option value="module" <?php 
    selected( $save_interaction_scope, 'module' );
    ?> <?php 
    echo ( !$has_module ? 'disabled' : '' );
    ?>><?php 
    esc_html_e( 'Module', 'slidemind' );
    ?></option>
                                    <?php 
}
?>
                                </select>
                                <span class="sm-scope-hint" id="sm-autosave-scope-hint"></span>
                            </div>
                            <div id="sm-save-key-duplicate-warning" class="sm-notice sm-notice-warning" style="display:none; margin-top: 8px; padding: 10px 14px; font-size: 13px;"></div>
                        </div>
                    </div>

                    <!-- Variables to capture from authoring tool (all 3 modes) -->
                    <div class="sm-form-group">
                        <label class="sm-form-label"><?php 
esc_html_e( 'Capture a variable and add it to persistent memory.', 'slidemind' );
?></label>
                    </div>

                    <details class="sm-help-accordion" style="margin-bottom: 16px;">
                        <summary style="cursor: pointer; font-weight: 600; color: #2271b1; padding: 8px 0; user-select: none;">
                            <?php 
esc_html_e( 'How does capture work?', 'slidemind' );
?>
                        </summary>
                        <div style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px 16px; margin-top: 8px; border-radius: 0 4px 4px 0;">
                            <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                <?php 
esc_html_e( 'Example: You want to record the learner\'s profession so it can be reused in other courses. In your authoring tool (Storyline, Captivate...), create a variable called Learner_Profession. Then configure a capture here:', 'slidemind' );
?>
                            </p>
                            <ul style="margin: 0 0 8px; padding-left: 20px; color: #1d2327;">
                                <li><strong><?php 
esc_html_e( 'Memory key', 'slidemind' );
?></strong>: <code>profession</code> — <?php 
esc_html_e( 'the name SlideMind uses to store and retrieve this value', 'slidemind' );
?></li>
                                <li><strong><?php 
esc_html_e( 'Scope', 'slidemind' );
?></strong>: <?php 
esc_html_e( 'Global', 'slidemind' );
?> — <?php 
esc_html_e( 'so it\'s accessible across all courses', 'slidemind' );
?></li>
                                <li><strong><?php 
esc_html_e( 'Authoring tool variable', 'slidemind' );
?></strong>: <code>Learner_Profession</code> — <?php 
esc_html_e( 'the variable name in your authoring tool', 'slidemind' );
?></li>
                            </ul>
                            <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                <?php 
esc_html_e( 'Once published, when the learner reaches this slide, their answer is automatically saved. Any other slide can then use {variable_name} in its prompt to personalize the AI response.', 'slidemind' );
?>
                            </p>
                            <p style="margin: 0; font-size: 12px; color: #50575e;">
                                <?php 
esc_html_e( 'Scope hint: Global = everywhere, Course = this course only, Module = this module only. Choose Global if in doubt.', 'slidemind' );
?>
                            </p>
                        </div>
                    </details>

                    <div id="sm-memory-vars-list">
                        <?php 
if ( !empty( $memory_variables ) ) {
    foreach ( $memory_variables as $idx => $mvar ) {
        ?>
                        <div class="sm-memory-var-row" data-index="<?php 
        echo esc_attr( $idx );
        ?>">
                            <div class="sm-memory-var-fields">
                                <input type="text"
                                       class="sm-form-input sm-memory-var-name"
                                       value="<?php 
        echo esc_attr( $mvar['name'] );
        ?>"
                                       placeholder="<?php 
        esc_attr_e( 'memory_key', 'slidemind' );
        ?>"
                                       pattern="^[a-z][a-z0-9_]*$">
                                <select class="sm-form-select sm-memory-var-scope">
                                    <option value="global" <?php 
        selected( $mvar['scope'] ?? 'global', 'global' );
        ?>><?php 
        esc_html_e( 'Global', 'slidemind' );
        ?></option>
                                    <?php 
        if ( $can_scope ) {
            ?>
                                    <option value="course" <?php 
            selected( $mvar['scope'] ?? 'global', 'course' );
            ?> <?php 
            echo ( !$has_course ? 'disabled' : '' );
            ?>><?php 
            esc_html_e( 'Course', 'slidemind' );
            ?></option>
                                    <option value="module" <?php 
            selected( $mvar['scope'] ?? 'global', 'module' );
            ?> <?php 
            echo ( !$has_module ? 'disabled' : '' );
            ?>><?php 
            esc_html_e( 'Module', 'slidemind' );
            ?></option>
                                    <?php 
        }
        ?>
                                </select>
                                <input type="text"
                                       class="sm-form-input sm-memory-var-source"
                                       value="<?php 
        echo esc_attr( $mvar['source'] );
        ?>"
                                       placeholder="<?php 
        esc_attr_e( 'Authoring tool variable (e.g. Learner_Profession)', 'slidemind' );
        ?>">
                                <button type="button" class="sm-btn sm-btn-sm sm-btn-danger sm-memory-var-remove" title="<?php 
        esc_attr_e( 'Delete', 'slidemind' );
        ?>">
                                    <span class="dashicons dashicons-no-alt"></span>
                                </button>
                            </div>
                        </div>
                        <?php 
    }
}
?>
                    </div>

                    <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="sm-add-memory-var" style="margin-top: 8px;">
                        <span class="dashicons dashicons-plus-alt2"></span>
                        <?php 
esc_html_e( 'Add a memory variable', 'slidemind' );
?>
                    </button>

                    <input type="hidden" id="sm-memory-variables-json" name="memory_variables" value="">

                    <p class="sm-form-help" style="margin-top: 12px; font-size: 12px; color: #6b7280;">
                        <span class="dashicons dashicons-info" style="font-size: 14px; width: 14px; height: 14px; vertical-align: middle;"></span>
                        <?php 
esc_html_e( 'Global = accessible everywhere', 'slidemind' );
?> &middot;
                        <?php 
esc_html_e( 'Course = this course only', 'slidemind' );
?> &middot;
                        <?php 
esc_html_e( 'Module = this module only', 'slidemind' );
?><br>
                        <strong><?php 
esc_html_e( 'Choose Global if you may need this variable elsewhere.', 'slidemind' );
?></strong>
                    </p>
                </div>
            </div>

            <!-- Notes -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Internal notes', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <div class="sm-form-group">
                        <textarea id="sm-slide-notes"
                                  name="notes"
                                  class="sm-form-textarea"
                                  rows="3"
                                  placeholder="<?php 
esc_attr_e( 'Notes visible only in the admin area...', 'slidemind' );
?>"><?php 
echo esc_textarea( $slide['notes'] ?? '' );
?></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="sm-form-sidebar">
            <!-- Publishing -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'Publishing', 'slidemind' );
?></h2>
                </div>
                <div class="sm-card-body">
                    <div class="sm-form-group">
                        <label class="sm-form-label" for="sm-slide-status"><?php 
esc_html_e( 'Status', 'slidemind' );
?></label>
                        <select id="sm-slide-status" name="status" class="sm-form-select">
                            <option value="publish" <?php 
selected( $slide['status'] ?? 'draft', 'publish' );
?>><?php 
esc_html_e( 'Published', 'slidemind' );
?></option>
                            <option value="draft" <?php 
selected( $slide['status'] ?? 'draft', 'draft' );
?>><?php 
esc_html_e( 'Draft', 'slidemind' );
?></option>
                        </select>
                    </div>

                    <div class="sm-form-group">
                        <label class="sm-form-label"><?php 
esc_html_e( 'Guest access', 'slidemind' );
?></label>
                        <select name="allow_guests" class="sm-form-select">
                            <option value="inherit" <?php 
selected( $allow_guests_meta, 'inherit' );
?>>
                                <?php 
printf( 
    /* translators: %s: "allowed" or "blocked" based on global setting */
    esc_html__( 'Follow site default (%s)', 'slidemind' ),
    ( $global_allow_guests ? esc_html__( 'allowed', 'slidemind' ) : esc_html__( 'blocked', 'slidemind' ) )
 );
?>
                            </option>
                            <option value="allow" <?php 
selected( $allow_guests_meta, 'allow' );
?>>
                                <?php 
esc_html_e( 'Allow guests (override)', 'slidemind' );
?>
                            </option>
                            <option value="deny" <?php 
selected( $allow_guests_meta, 'deny' );
?>>
                                <?php 
esc_html_e( 'Block guests (override)', 'slidemind' );
?>
                            </option>
                        </select>
                        <p class="description">
                            <?php 
esc_html_e( 'Controls whether anonymous visitors can chat with this slide. The site default is set in Settings → Advanced.', 'slidemind' );
?>
                        </p>
                    </div>

                    <button type="submit" class="sm-btn sm-btn-primary sm-btn-block">
                        <span class="dashicons dashicons-saved"></span>
                        <?php 
echo ( $is_edit ? esc_html__( 'Update', 'slidemind' ) : esc_html__( 'Create slide', 'slidemind' ) );
?>
                    </button>
                </div>
            </div>


            <?php 
if ( $is_edit && !empty( $slide['config_uid'] ) ) {
    ?>
            <!-- Multi-authoring-tool integration code -->
            <div class="sm-card" id="sm-integration-code-card"
                 data-config-id="<?php 
    echo esc_attr( $slide['config_uid'] );
    ?>"
                 data-rest-url="<?php 
    echo esc_attr( rest_url( 'slidemind/v2/' ) );
    ?>"
                 data-site-url="<?php 
    echo esc_attr( home_url( '/' ) );
    ?>"
                 data-widget-mode="<?php 
    echo esc_attr( $current_mode );
    ?>">
                <div class="sm-card-header">
                    <h2><?php 
    esc_html_e( 'Integration code', 'slidemind' );
    ?></h2>
                </div>
                <div class="sm-card-body">
                    <p class="sm-form-help sm-editor-instructions" style="margin-bottom: 8px;">
                        <?php 
    /* translators: %1$s: opening strong tag, %2$s: closing strong tag */
    printf( esc_html__( 'Paste into an %1$sExecute JavaScript%2$s trigger:', 'slidemind' ), '<strong>', '</strong>' );
    ?>
                    </p>
                    <div id="sm-beta-warning" class="sm-notice sm-notice-warning" style="display: none; padding: 10px 14px; margin-bottom: 8px; font-size: 13px;">
                        <span class="dashicons dashicons-warning" style="font-size: 16px; width: 16px; height: 16px; margin-top: 2px;"></span>
                        <span></span>
                    </div>
                    <pre class="sm-code-block" id="sm-integration-code-pre"></pre>
                    <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm sm-btn-block sm-copy-code-btn" data-target-pre="0" style="margin-top: 8px;">
                        <span class="dashicons dashicons-clipboard"></span>
                        <?php 
    esc_html_e( 'Copy code', 'slidemind' );
    ?>
                    </button>
                    <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm sm-btn-block" id="sm-customize-widget-btn" style="margin-top: 6px; display: none;">
                        <span class="dashicons dashicons-admin-appearance"></span>
                        <?php 
    esc_html_e( 'Customize widget', 'slidemind' );
    ?>
                    </button>
                    <div class="sm-form-group" style="margin-top: 16px; margin-bottom: 12px;">
                        <label class="sm-form-label" for="sm-editor-select"><?php 
    esc_html_e( 'Integration target', 'slidemind' );
    ?></label>
                        <select id="sm-editor-select" class="sm-form-input">
                            <optgroup label="<?php 
    esc_attr_e( 'Authoring tool', 'slidemind' );
    ?>" data-sm-group="authoring">
                                <option value="storyline">Articulate Storyline</option>
                                <option value="captivate">Adobe Captivate (beta)</option>
                                <option value="lectora">Lectora (ELB Learning) (beta)</option>
                                <option value="dominknow">DominKnow | Claro (beta)</option>
                                <option value="ispring">iSpring Suite (beta)</option>
                            </optgroup>
                            <optgroup label="<?php 
    esc_attr_e( 'Embed', 'slidemind' );
    ?>" data-sm-group="embed">
                                <option value="widget"><?php 
    esc_html_e( 'Universal Widget (iframe)', 'slidemind' );
    ?></option>
                                <option value="shortcode"><?php 
    esc_html_e( 'WordPress Page (shortcode)', 'slidemind' );
    ?></option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="sm-form-group" id="sm-editor-var-names" style="margin-bottom: 0;">
                        <div class="sm-editor-var-row">
                            <label class="sm-form-label" for="sm-editor-input-var">
                                <?php 
    esc_html_e( 'Input variable', 'slidemind' );
    ?>
                            </label>
                            <div style="display: flex; gap: 4px; align-items: center;">
                                <input type="text" id="sm-editor-input-var" name="editor_input_var"
                                       class="sm-form-input" style="flex: 1;"
                                       value="<?php 
    echo ( $is_edit ? esc_attr( $slide['editor_input_var'] ?? 'userMessage' ) : '' );
    ?>"
                                       placeholder="<?php 
    echo ( $is_edit ? esc_attr( $slide['editor_input_var'] ?? 'userMessage' ) : esc_attr__( 'Auto-generated from title', 'slidemind' ) );
    ?>">
                                <button type="button" class="sm-editor-var-reset" data-target="sm-editor-input-var" title="<?php 
    esc_attr_e( 'Reset to default', 'slidemind' );
    ?>">&#8635;</button>
                            </div>
                        </div>
                        <div class="sm-editor-var-row">
                            <label class="sm-form-label" for="sm-editor-output-var">
                                <?php 
    esc_html_e( 'Output variable', 'slidemind' );
    ?>
                            </label>
                            <div style="display: flex; gap: 4px; align-items: center;">
                                <input type="text" id="sm-editor-output-var" name="editor_output_var"
                                       class="sm-form-input" style="flex: 1;"
                                       value="<?php 
    echo ( $is_edit ? esc_attr( $slide['editor_output_var'] ?? 'aiResponse' ) : '' );
    ?>"
                                       placeholder="<?php 
    echo ( $is_edit ? esc_attr( $slide['editor_output_var'] ?? 'aiResponse' ) : esc_attr__( 'Auto-generated from title', 'slidemind' ) );
    ?>">
                                <button type="button" class="sm-editor-var-reset" data-target="sm-editor-output-var" title="<?php 
    esc_attr_e( 'Reset to default', 'slidemind' );
    ?>">&#8635;</button>
                            </div>
                        </div>
                        <p class="sm-form-help"><?php 
    esc_html_e( 'Variable names used in your authoring tool. Unique names are generated automatically for new slides.', 'slidemind' );
    ?></p>
                        <div id="sm-editor-var-duplicate-warning" class="sm-notice sm-notice-warning" style="display:none; margin-top: 8px; padding: 10px 14px; font-size: 13px;"></div>
                    </div>
                </div>
            </div>
            <?php 
}
?>

            <?php 
?>
            <div class="sm-card" id="sm-apikey-card">
                <div class="sm-card-header">
                    <h2><?php 
esc_html_e( 'API Key', 'slidemind' );
?> <span class="sm-badge sm-badge-pro">Agency</span></h2>
                </div>
                <div class="sm-card-body">
                    <?php 
$required_plan = 'agency';
$feature_label = __( 'Dedicated API key per slide', 'slidemind' );
include SLIDEMIND_PLUGIN_PATH . 'admin/views/partials/upsell-notice.php';
?>
                </div>
            </div>
            <?php 
?>

            <?php 
if ( $is_edit ) {
    ?>
            <!-- Actions -->
            <div class="sm-card" id="sm-actions-card">
                <div class="sm-card-header">
                    <h2><?php 
    esc_html_e( 'Actions', 'slidemind' );
    ?></h2>
                </div>
                <div class="sm-card-body">
                    <a href="<?php 
    echo esc_url( admin_url( 'admin.php?page=slidemind-sandbox&slide_id=' . $slide_id ) );
    ?>"
                       class="sm-btn sm-btn-secondary sm-btn-sm sm-btn-block sm-sandbox-link" style="margin-bottom: 8px;">
                        <span class="dashicons dashicons-visibility"></span>
                        <?php 
    esc_html_e( 'Test in Sandbox', 'slidemind' );
    ?>
                    </a>
                    <button type="button"
                            class="sm-btn sm-btn-danger sm-btn-sm sm-btn-block sm-delete-slide"
                            data-slide-id="<?php 
    echo esc_attr( $slide_id );
    ?>">
                        <span class="dashicons dashicons-trash"></span>
                        <?php 
    esc_html_e( 'Delete slide', 'slidemind' );
    ?>
                    </button>
                </div>
            </div>
            <?php 
}
?>
        </div>
    </form>

    <?php 
require SLIDEMIND_PLUGIN_PATH . 'admin/views/partials/widget-appearance-modal.php';
?>
</div>


<?php 
// Build a map of inherited field emptiness for @ autocomplete filtering
$inherited_fields = [];
if ( $inherited['course'] ) {
    $inherited_fields['course_theme'] = !empty( $inherited['course']['theme'] );
    $inherited_fields['course_objectives'] = !empty( $inherited['course']['objectives'] );
    $inherited_fields['course_content'] = !empty( $inherited['course']['content'] );
    $inherited_fields['course_response_example'] = !empty( $inherited['course']['response_example'] );
}
if ( $inherited['module'] ) {
    $inherited_fields['module_theme'] = !empty( $inherited['module']['theme'] );
    $inherited_fields['module_objectives'] = !empty( $inherited['module']['objectives'] );
    $inherited_fields['module_content'] = !empty( $inherited['module']['content'] );
    $inherited_fields['module_response_example'] = !empty( $inherited['module']['response_example'] );
}
wp_add_inline_script( 'slidemind-admin-app', 'window.slidemindInheritedFields = ' . wp_json_encode( $inherited_fields ) . ';', 'before' );