<?php

use DaftPlug\Generatify\Features\Connectors\Models;
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
$generatify_render_dashicon = static function ( $dashicon_class ) {
    return sprintf( '<span class="dashicons %1$s text-gray-500 text-base leading-none size-4 -mr-0.5"></span>', esc_attr( $dashicon_class ) );
};
$generatify_render_image_icon = static function ( $image_url, $alt_text ) {
    if ( !$image_url ) {
        return '';
    }
    return sprintf( '<img class="inline-block size-4 shrink-0 rounded object-cover" src="%1$s" alt="%2$s" loading="lazy" />', esc_url( $image_url ), esc_attr( $alt_text ) );
};
$generatify_get_plugin_icon_url = static function ( $plugin_file ) {
    $update_plugins = get_site_transient( 'update_plugins' );
    $plugin_update = null;
    if ( is_object( $update_plugins ) ) {
        if ( isset( $update_plugins->response[$plugin_file] ) ) {
            $plugin_update = $update_plugins->response[$plugin_file];
        } elseif ( isset( $update_plugins->no_update[$plugin_file] ) ) {
            $plugin_update = $update_plugins->no_update[$plugin_file];
        }
    }
    $icons = [];
    if ( is_object( $plugin_update ) && isset( $plugin_update->icons ) && is_array( $plugin_update->icons ) ) {
        $icons = $plugin_update->icons;
    } elseif ( is_array( $plugin_update ) && isset( $plugin_update['icons'] ) && is_array( $plugin_update['icons'] ) ) {
        $icons = $plugin_update['icons'];
    }
    foreach ( [
        'svg',
        '2x',
        '1x',
        'default'
    ] as $icon_key ) {
        if ( !empty( $icons[$icon_key] ) ) {
            return $icons[$icon_key];
        }
    }
    $plugin_dir = dirname( $plugin_file );
    $plugin_base_dir = WP_PLUGIN_DIR . '/' . (( $plugin_dir === '.' ? '' : $plugin_dir . '/' ));
    $plugin_base_url = plugins_url( ( $plugin_dir === '.' ? '' : $plugin_dir ) );
    foreach ( [
        'icon.svg',
        'icon-256x256.png',
        'icon-128x128.png',
        'icon-256x256.jpg',
        'icon-128x128.jpg',
        'assets/icon.svg',
        'assets/icon-256x256.png',
        'assets/icon-128x128.png'
    ] as $relative_path ) {
        if ( file_exists( $plugin_base_dir . $relative_path ) ) {
            return trailingslashit( $plugin_base_url ) . $relative_path;
        }
    }
    return '';
};
$generatify_get_theme_icon_url = static function ( $theme ) {
    if ( !$theme instanceof \WP_Theme || !$theme->exists() ) {
        return '';
    }
    $screenshot_url = $theme->get_screenshot();
    if ( !empty( $screenshot_url ) ) {
        return $screenshot_url;
    }
    return '';
};
?>
<style>
#wpbody-content {
  position: sticky;
  top: 32px;
}
</style>
<section id="ai" class="group/ai relative flex items-start bg-white border border-gray-200 shadow-sm rounded-xl p-2 sm:p-5 h-[calc(100dvh-72px)] overflow-y-auto scroll-smooth">
  <button id="aiNewChatButton" type="button" class="hidden group-data-[conversation]/ai:inline-flex absolute top-2 left-2 lg:sticky lg:top-0 lg:left-0 py-1.5 px-2 text-xs sm:text-sm justify-center items-center gap-x-1.5 rounded-lg text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-hidden focus:text-gray-600 focus:bg-gray-100 transition-all disabled:opacity-50 disabled:pointer-events-none">
    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
    <?php 
esc_html_e( 'New Chat', 'generatify' );
?>
  </button>
  <div id="aiContainer" class="max-w-[720px] self-center w-full flex flex-col justify-between items-center mx-auto group-data-[conversation]/ai:h-full">
    <div id="aiResponseContainer" class="flex flex-col w-full group-data-[conversation]/ai:pb-10"></div>
    <div id="aiFormContainer" class="relative w-full pb-32 group-data-[conversation]/ai:pb-0 group-data-[conversation]/ai:sticky group-data-[conversation]/ai:bottom-0 before:group-data-[conversation]/ai:absolute before:group-data-[conversation]/ai:-bottom-5 before:group-data-[conversation]/ai:size-full before:group-data-[conversation]/ai:-z-[1] before:group-data-[conversation]/ai:bg-white">
      <img class="block group-data-[conversation]/ai:hidden mx-auto w-14" src="<?php 
echo esc_url( plugins_url( 'assets/media/icons/logo.png', GENERATIFY_FILE ) );
?>" alt="Generatify" />
      <h1 id="aiWelcomeTitle" class="block group-data-[conversation]/ai:hidden mt-4 text-2xl lg:text-3xl text-center font-medium text-gray-800">
        <?php 
esc_html_e( 'What can I help with?', 'generatify' );
?>
      </h1>
      <button id="aiScrollToBottomButton" type="button" class="hidden group-data-[conversation]/ai:flex absolute left-1/2 bottom-[9.5rem] -translate-x-1/2 translate-y-16 opacity-0 pointer-events-none z-10 size-9 shrink-0 justify-center items-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-xl transition-all duration-300 data-[visible=true]:translate-y-0 data-[visible=true]:opacity-100 data-[visible=true]:pointer-events-auto hover:bg-gray-50 hover:text-gray-800">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14" />
          <path d="m19 12-7 7-7-7" />
        </svg>
      </button>
      <form id="aiForm" class="group-data-[conversation]/ai:m-0 relative z-50 mt-8 bg-white border border-gray-300 rounded-3xl shadow-sm has-[textarea:focus]:border-transparent has-[textarea:focus]:outline-none has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-blue-500 transition-all duration-75" autocomplete="off" autocorrect="off" autocapitalize="off">
        <div class="flex justify-between items-center gap-x-10 pl-2.5 pr-2.5 pt-2.5">
          <?php 
$generatify_max_per_group = 500;
?>
          <select id="aiContext" name="aiContext[]" multiple="true" data-dp-select='{
            "placeholder": "<?php 
esc_html_e( '@ Add Context', 'generatify' );
?>",
            "size": "xs",
            "hasSearch": true,
            "expandIcon": false,
            "maxSelections": 3,
            "toggleClasses": "truncate max-w-full overflow-hidden w-full relative py-1 px-2.5 flex items-center text-start flex-nowrap text-gray-500 rounded-full align-middle bg-white hover:bg-gray-50 border border-gray-300 focus:outline-none"
          }'>
            <optgroup label="<?php 
esc_html_e( 'Pages', 'generatify' );
?>">
              <?php 
$pages = get_pages( [
    'post_status' => 'publish',
    'sort_column' => 'post_modified',
    'sort_order'  => 'DESC',
    'number'      => $generatify_max_per_group,
] );
?>
              <?php 
foreach ( $pages as $page ) {
    ?>
              <?php 
    $generatify_page_title = wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $page->post_title ), ENT_QUOTES ) );
    $generatify_page_icon_html = $generatify_render_image_icon( get_the_post_thumbnail_url( $page->ID, 'thumbnail' ), $generatify_page_title );
    if ( $generatify_page_icon_html === '' ) {
        $generatify_page_icon_html = $generatify_render_dashicon( 'dashicons-admin-page' );
    }
    ?>
              <option value='<?php 
    echo esc_attr( wp_json_encode( [
        'type'     => 'page',
        'id'       => (int) $page->ID,
        'icon'     => 'dashicons-admin-page',
        'iconHtml' => $generatify_page_icon_html,
        'title'    => $generatify_page_title,
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>' data-dp-select-option='<?php 
    echo esc_attr( wp_json_encode( [
        'icon'        => $generatify_page_icon_html,
        'description' => esc_url( str_replace( home_url( '', 'https' ), '', get_permalink( $page->ID ) ) ),
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>'><?php 
    echo esc_html( $page->post_title );
    ?></option>
              <?php 
}
?>
            </optgroup>
            <optgroup label="<?php 
esc_html_e( 'Posts', 'generatify' );
?>">
              <?php 
$posts = get_posts( [
    'post_type'   => 'post',
    'post_status' => 'publish',
    'orderby'     => 'modified',
    'order'       => 'DESC',
    'numberposts' => $generatify_max_per_group,
] );
?>
              <?php 
foreach ( $posts as $post ) {
    ?>
              <?php 
    $generatify_post_title = wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $post->post_title ), ENT_QUOTES ) );
    $generatify_post_icon_html = $generatify_render_image_icon( get_the_post_thumbnail_url( $post->ID, 'thumbnail' ), $generatify_post_title );
    if ( $generatify_post_icon_html === '' ) {
        $generatify_post_icon_html = $generatify_render_dashicon( 'dashicons-admin-post' );
    }
    ?>
              <option value='<?php 
    echo esc_attr( wp_json_encode( [
        'type'     => 'post',
        'id'       => (int) $post->ID,
        'icon'     => 'dashicons-admin-post',
        'iconHtml' => $generatify_post_icon_html,
        'title'    => $generatify_post_title,
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>' data-dp-select-option='<?php 
    echo esc_attr( wp_json_encode( [
        'icon'        => $generatify_post_icon_html,
        'description' => esc_url( str_replace( home_url( '', 'https' ), '', get_permalink( $post->ID ) ) ),
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>'><?php 
    echo esc_html( $post->post_title );
    ?></option>
              <?php 
}
?>
            </optgroup>
            <optgroup label="<?php 
esc_html_e( 'Plugins', 'generatify' );
?>">
              <?php 
$plugins = array_slice(
    get_plugins(),
    0,
    $generatify_max_per_group,
    true
);
?>
              <?php 
foreach ( $plugins as $generatify_plugin_file => $generatify_plugin_data ) {
    ?>
              <?php 
    $generatify_plugin_name = wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_plugin_data['Name'] ), ENT_QUOTES ) );
    $generatify_plugin_icon_html = $generatify_render_image_icon( $generatify_get_plugin_icon_url( $generatify_plugin_file ), $generatify_plugin_name );
    if ( $generatify_plugin_icon_html === '' ) {
        $generatify_plugin_icon_html = $generatify_render_dashicon( 'dashicons-admin-plugins' );
    }
    ?>
              <option value='<?php 
    echo esc_attr( wp_json_encode( [
        'type'     => 'plugin',
        'id'       => $generatify_plugin_file,
        'icon'     => 'dashicons-admin-plugins',
        'iconHtml' => $generatify_plugin_icon_html,
        'title'    => $generatify_plugin_name,
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>' data-dp-select-option='<?php 
    echo esc_attr( wp_json_encode( [
        'icon'        => $generatify_plugin_icon_html,
        'description' => wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_plugin_data['Description'] ), ENT_QUOTES ) ),
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>'><?php 
    echo esc_html( $generatify_plugin_data['Name'] );
    ?></option>
              <?php 
}
?>
            </optgroup>
            <optgroup label="<?php 
esc_html_e( 'Themes', 'generatify' );
?>">
              <?php 
$generatify_themes = array_slice(
    wp_get_themes(),
    0,
    $generatify_max_per_group,
    true
);
?>
              <?php 
foreach ( $generatify_themes as $generatify_theme_stylesheet => $generatify_theme ) {
    ?>
              <?php 
    $generatify_theme_name = wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_theme->get( 'Name' ) ), ENT_QUOTES ) );
    $generatify_theme_icon_html = $generatify_render_image_icon( $generatify_get_theme_icon_url( $generatify_theme ), $generatify_theme_name );
    if ( $generatify_theme_icon_html === '' ) {
        $generatify_theme_icon_html = $generatify_render_dashicon( 'dashicons-admin-appearance' );
    }
    ?>
              <option value='<?php 
    echo esc_attr( wp_json_encode( [
        'type'     => 'theme',
        'id'       => $generatify_theme_stylesheet,
        'icon'     => 'dashicons-admin-appearance',
        'iconHtml' => $generatify_theme_icon_html,
        'title'    => $generatify_theme_name,
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>' data-dp-select-option='<?php 
    echo esc_attr( wp_json_encode( [
        'icon'        => $generatify_theme_icon_html,
        'description' => wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_theme->get( 'Description' ) ), ENT_QUOTES ) ),
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>'><?php 
    echo esc_html( $generatify_theme->get( 'Name' ) );
    ?></option>
              <?php 
}
?>
            </optgroup>
            <optgroup label="<?php 
esc_html_e( 'Users', 'generatify' );
?>">
              <?php 
$generatify_users = array_slice(
    get_users(),
    0,
    $generatify_max_per_group,
    true
);
?>
              <?php 
foreach ( $generatify_users as $generatify_user ) {
    ?>
              <?php 
    $generatify_user_name = wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_user->display_name ), ENT_QUOTES ) );
    $generatify_user_icon_html = $generatify_render_image_icon( get_avatar_url( $generatify_user->ID, [
        'size' => 32,
    ] ), $generatify_user_name, 'inline-block size-4 shrink-0 rounded-full object-cover' );
    if ( $generatify_user_icon_html === '' ) {
        $generatify_user_icon_html = $generatify_render_dashicon( 'dashicons-admin-users' );
    }
    ?>
              <option value='<?php 
    echo esc_attr( wp_json_encode( [
        'type'     => 'user',
        'id'       => (int) $generatify_user->ID,
        'icon'     => 'dashicons-admin-users',
        'iconHtml' => $generatify_user_icon_html,
        'title'    => $generatify_user_name,
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>' data-dp-select-option='<?php 
    echo esc_attr( wp_json_encode( [
        'icon'        => $generatify_user_icon_html,
        'description' => wp_check_invalid_utf8( wp_specialchars_decode( wp_strip_all_tags( $generatify_user->user_email ), ENT_QUOTES ) ),
    ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ) );
    ?>'><?php 
    echo esc_html( $generatify_user->display_name );
    ?></option>
              <?php 
}
?>
            </optgroup>
          </select>
        </div>
        <textarea id="aiPrompt" name="aiPrompt" class="overflow-hidden resize-none block w-full px-2.5 py-2 min-h-[55px] max-h-60 border border-transparent rounded-lg text-sm placeholder:text-gray-400 focus:border-transparent focus:ring-transparent overflow-y-auto disabled:opacity-50 disabled:pointer-events-none [field-sizing:content]" placeholder="<?php 
esc_html_e( 'Ask Anything...', 'generatify' );
?>" autocomplete="off" autocorrect="off" autocapitalize="off" required="true"></textarea>
        <div class="flex justify-between items-center gap-x-10 pt-0 pb-2 pr-2 pl-2.5">
          <select id="aiModel" name="aiModel" required="true" data-dp-select='{
            "placeholder": "<?php 
esc_html_e( 'Select AI Model', 'generatify' );
?>",
            "size": "xs",
            "expandIcon": false,
            "toggleClasses": "truncate max-w-full overflow-hidden w-full relative py-1.5 ps-2 pe-2.5 flex items-center text-start flex-nowrap font-medium rounded-full align-middle text-gray-500 bg-gray-100 hover:opacity-90 focus:outline-none"
          }'>
            <?php 
?>
            <option value="chatgpt" data-dp-select-option='{
              "icon": "<img class=\"inline-block size-[16px]\" src=\"<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/chatgpt.svg', GENERATIFY_FILE ) );
?>\" alt=\"ChatGPT\"/>",
              "description": "<?php 
esc_html_e( 'Most capable GPT model from OpenAI.', 'generatify' );
?>"
            }' selected><?php 
echo esc_html( 'ChatGPT' );
?></option>
            <option value="claude" data-dp-select-option='{
              "icon": "<img class=\"inline-block size-[16px]\" src=\"<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/claude.svg', GENERATIFY_FILE ) );
?>\" alt=\"Claude\"/>",
              "description": "<?php 
esc_html_e( 'Most capable Claude model from Anthropic.', 'generatify' );
?>"
            }'><?php 
echo esc_html( 'Claude' );
?></option>
            <option value="gemini" data-dp-select-option='{
              "icon": "<img class=\"inline-block size-[16px]\" src=\"<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/gemini.svg', GENERATIFY_FILE ) );
?>\" alt=\"Gemini\"/>",
              "description": "<?php 
esc_html_e( 'Most capable Gemini model from Google.', 'generatify' );
?>"
            }'><?php 
echo esc_html( 'Gemini' );
?></option>
            <option value="kimi" data-dp-select-option='{
              "icon": "<img class=\"inline-block size-[16px]\" src=\"<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/kimi.svg', GENERATIFY_FILE ) );
?>\" alt=\"Kimi\"/>",
              "description": "<?php 
esc_html_e( 'Most capable Kimi model from Moonshot.', 'generatify' );
?>"
            }'><?php 
echo esc_html( 'Kimi' );
?></option>
            <?php 
?>
          </select>
          <button id="aiSendButton" type="submit" class="inline-flex shrink-0 justify-center items-center size-8 text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 disabled:pointer-events-none disabled:opacity-50 focus:outline-hidden focus:bg-blue-600" disabled="true">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m5 12 7-7 7 7"></path>
              <path d="M12 19V5"></path>
            </svg>
          </button>
        </div>
      </form>
      <div id="aiPromptStarters" class="mt-6 flex group-data-[conversation]/ai:hidden flex-wrap justify-center gap-1.5 sm:gap-2">
        <span class="py-1 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-xl cursor-pointer" data-prompt-starter="<?php 
esc_html_e( 'Please answer me accurately on this question: [INSERT QUESTION HERE]', 'generatify' );
?>">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10" />
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
            <path d="M12 17h.01" />
          </svg>
          <?php 
esc_html_e( 'Ask a question', 'generatify' );
?>
        </span>
        <span class="py-1 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-xl cursor-pointer" data-prompt-starter="<?php 
esc_html_e( 'I will provide a text and please help me fix typos and grammar: [INSERT TEXT HERE]', 'generatify' );
?>">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m6 16 6-12 6 12" />
            <path d="M8 12h8" />
            <path d="M4 21c1.1 0 1.1-1 2.3-1s1.1 1 2.3 1c1.1 0 1.1-1 2.3-1 1.1 0 1.1 1 2.3 1 1.1 0 1.1-1 2.3-1 1.1 0 1.1 1 2.3 1 1.1 0 1.1-1 2.3-1" />
          </svg>
          <?php 
esc_html_e( 'Fix typos and grammar', 'generatify' );
?>
        </span>
        <span class="py-1 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-xl cursor-pointer" data-prompt-starter="<?php 
esc_html_e( 'Please write an article for my blog about [INSERT TOPIC HERE] with these points: [INSERT POINTS HERE].', 'generatify' );
?>">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
            <path d="m15 5 4 4" />
          </svg>
          <?php 
esc_html_e( 'Write a blog post', 'generatify' );
?>
        </span>
        <span class="py-1 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-xl cursor-pointer" data-prompt-starter="<?php 
esc_html_e( 'I have a technical problem and need your help with this: [INSERT PROBLEM DESCRIPTION HERE]', 'generatify' );
?>">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 20v-9" />
            <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
            <path d="M14.12 3.88 16 2" />
            <path d="M21 21a4 4 0 0 0-3.81-4" />
            <path d="M21 5a4 4 0 0 1-3.55 3.97" />
            <path d="M22 13h-4" />
            <path d="M3 21a4 4 0 0 1 3.81-4" />
            <path d="M3 5a4 4 0 0 0 3.55 3.97" />
            <path d="M6 13H2" />
            <path d="m8 2 1.88 1.88" />
            <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
          </svg>
          <?php 
esc_html_e( 'Debug an issue', 'generatify' );
?>
        </span>
      </div>
    </div>
  </div>
</section>