<?php
/**
 * API Setup Guide View
 */
if (!defined('ABSPATH')) {
    exit;
}
?>
<div class="roidaico-setup-guide">
    <h3><?php esc_html_e('How to get your API Keys', 'roidnet-ai-content-generator'); ?></h3>
    
    <div class="roidaico-guide-section roidaico-guide-section-openrouter" style="<?php echo get_option('roidaico_ai_provider', 'openrouter') === 'wp_ai_client' ? 'display:none;' : ''; ?>">
        <h4>1. OpenRouter API (Required for Content)</h4>
        <p><?php esc_html_e('OpenRouter allows you to use various AI models (GPT-4, Claude, etc.) with a single API key.', 'roidnet-ai-content-generator'); ?></p>
        <ol>
            <li><?php echo wp_kses_post(sprintf(__('Go to <a href="%s" target="_blank">OpenRouter.ai</a> and create an account.', 'roidnet-ai-content-generator'), 'https://openrouter.ai/')); ?></li>
            <li><?php echo wp_kses_post(__('Navigate to <strong>Keys</strong> in your dashboard.', 'roidnet-ai-content-generator')); ?></li>
            <li><?php echo wp_kses_post(__('Click <strong>Create Key</strong> and give it a name (e.g., "WordPress Plugin").', 'roidnet-ai-content-generator')); ?></li>
            <li><?php echo wp_kses_post(__('Copy the generated key and paste it into the <strong>OpenRouter API Key</strong> field in the settings above.', 'roidnet-ai-content-generator')); ?></li>
        </ol>
    </div>

    <div class="roidaico-guide-section">
        <h4>2. Pexels API (Optional for Images)</h4>
        <p><?php esc_html_e('Pexels provides high-quality royalty-free images for your articles.', 'roidnet-ai-content-generator'); ?></p>
        <ol>
            <li><?php echo wp_kses_post(sprintf(__('Visit <a href="%s" target="_blank">Pexels API</a> and sign up for a free developer account.', 'roidnet-ai-content-generator'), 'https://www.pexels.com/api/')); ?></li>
            <li><?php echo wp_kses_post(__('Click on <strong>Your API Key</strong>.', 'roidnet-ai-content-generator')); ?></li>
            <li><?php echo wp_kses_post(__('Copy your API Key and paste it into the <strong>Pexels API Key</strong> field in the settings above.', 'roidnet-ai-content-generator')); ?></li>
        </ol>
    </div>

    <div class="roidaico-guide-note roidaico-guide-note-openrouter notice notice-info inline" style="<?php echo get_option('roidaico_ai_provider', 'openrouter') === 'wp_ai_client' ? 'display:none;' : ''; ?>">
        <p><?php echo wp_kses_post(__('<strong>Note:</strong> Make sure you have enough credits in your OpenRouter account to generate content.', 'roidnet-ai-content-generator')); ?></p>
    </div>
</div>
