<?php

use DaftPlug\Generatify\Helpers\Utils;
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
?>
<form name="settingsForm" spellcheck="false" autocomplete="off" class="max-w-6xl 2xl:max-w-7xl w-full mx-auto flex flex-col bg-white border border-gray-200 shadow-sm rounded-xl">
  <!-- AI Helpdesk Agent -->
  <fieldset id="subsectionAiHelpdeskAgent" class="py-10 px-5 border-t border-gray-200 first:border-t-0 xl:grid xl:grid-cols-3 xl:gap-14 max-xl:space-y-8">
    <div class="xl:col-span-1">
      <div class="flex space-x-2.5 sticky top-14">
        <svg class="text-gray-400 size-7 mt-0.5 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" />
          <path d="M21 16v2a4 4 0 0 1-4 4h-5" />
        </svg>
        <div class="grow">
          <h5 class="text-base font-semibold text-gray-800">
            <?php 
esc_html_e( 'AI Helpdesk Agent', 'generatify' );
?>
          </h5>
          <p class="mt-1 text-sm text-gray-500">
            <?php 
esc_html_e( 'An AI-powered helpdesk agent that appears as a chatbot button on your site. It answers questions, guides users, provides instant access to FAQs and help articles, and lets users chat or send messages for fast support.', 'generatify' );
?>
          </p>
        </div>
      </div>
    </div>
    <div class="xl:col-span-2 ml-11 xl:m-0 space-y-8">
      <div id="settingAiHelpdeskAgent" class="relative bg-white border border-gray-200 rounded-xl py-2 px-3">
        <label for="aiHelpdeskAgent" class="cursor-pointer flex gap-x-3">
          <div class="grow">
            <h3 class="flex items-center text-sm text-gray-800 font-semibold">
              <?php 
esc_html_e( 'Helpdesk Agent', 'generatify' );
?>
              <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                </svg>
                <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                  <?php 
esc_html_e( 'Enables an AI-powered helpdesk agent that appears as a chatbot button on your site. It answers questions, guides users, provides instant access to FAQs and help articles, and lets users chat or send messages for fast support.', 'generatify' );
?>
                </span>
              </button>
            </h3>
            <p class="mt-0.5 text-xs text-gray-500">
              <?php 
esc_html_e( 'Enables an AI-powered helpdesk agent feature on your site.', 'generatify' );
?>
            </p>
          </div>
          <div class="flex justify-between items-center">
            <div class="relative inline-block">
              <input type="checkbox" id="aiHelpdeskAgent" name="aiHelpdeskAgent" class="relative w-11 h-6 !p-px bg-gray-100 !border-transparent !border text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 before:inline-block before:!size-5 before:bg-white checked:before:bg-white checked:before:m-0 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 text-start" <?php 
checked( Utils::getSetting( 'aiHelpdeskAgent' ), 'on' );
?>>
            </div>
          </div>
        </label>
        <div class="!mt-6 space-y-6" data-dp-dependant-markup='{
        "field": "aiHelpdeskAgent",
        "value": "on",
        "mode": "visibility"
      }'>
          <div id="settingPosition">
            <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
              <?php 
esc_html_e( 'Position', 'generatify' );
?>
              <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                </svg>
                <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                  <?php 
esc_html_e( 'Select position of helpdesk agent button on your website.', 'generatify' );
?>
                </span>
              </button>
            </label>
            <select name="aiHelpdeskAgentPosition" data-dp-select='{
            "placeholder": "<?php 
esc_html_e( 'Select Position', 'generatify' );
?>"
          }'>
              <option value="bottom-right" <?php 
selected( Utils::getSetting( 'aiHelpdeskAgentPosition' ), 'bottom-right' );
?>><?php 
esc_html_e( 'Bottom Right', 'generatify' );
?></option>
              <option value="bottom-left" <?php 
selected( Utils::getSetting( 'aiHelpdeskAgentPosition' ), 'bottom-left' );
?>><?php 
esc_html_e( 'Bottom Left', 'generatify' );
?></option>
              <option value="top-right" <?php 
selected( Utils::getSetting( 'aiHelpdeskAgentPosition' ), 'top-right' );
?>><?php 
esc_html_e( 'Top Right', 'generatify' );
?></option>
              <option value="top-left" <?php 
selected( Utils::getSetting( 'aiHelpdeskAgentPosition' ), 'top-left' );
?>><?php 
esc_html_e( 'Top Left', 'generatify' );
?></option>
            </select>
          </div>
          <div id="settingPrimaryColor">
            <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
              <?php 
esc_html_e( 'Primary Color', 'generatify' );
?>
              <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                </svg>
                <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded" role="tooltip">
                  <?php 
esc_html_e( 'Define the primary color for your helpdesk agent. It should be the same as the main color palette of your website.', 'generatify' );
?>
                </span>
              </button>
            </label>
            <input name="aiHelpdeskAgentPrimaryColor" type="color" class="h-[38px] w-full block bg-white border border-gray-200 cursor-pointer rounded-lg focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentPrimaryColor' ) );
?>" title="<?php 
esc_html_e( 'Primary Color', 'generatify' );
?>" required>
          </div>
          <div id="settingCover">
            <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
              <?php 
esc_html_e( 'Cover', 'generatify' );
?>
              <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                </svg>
                <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                  <?php 
esc_html_e( 'Adds a large background image as a cover image to helpdesk agent.', 'generatify' );
?>
                </span>
              </button>
            </label>
            <div class="group/attachment relative flex items-center justify-start" data-dp-image-attachment='{
              "mimes": "png,jpg,jpeg,webp"
            }'>
              <div class="relative hidden group-has-[[data-attachment-input]:placeholder-shown]/attachment:flex flex-col items-center justify-center text-center rounded-xl w-full h-40 border border-dashed border-gray-300 overflow-hidden cursor-pointer" data-attachment-placeholder>
                <svg class="w-14 text-gray-400 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                  <circle cx="9" cy="9" r="2"></circle>
                  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
                </svg>
                <div class="mt-1 flex flex-wrap justify-center text-sm leading-6 font-medium text-gray-800">
                  <?php 
esc_html_e( 'Click to select an image', 'generatify' );
?>
                </div>
                <p class="text-xs text-gray-400">
                  <?php 
esc_html_e( 'Select an image to add as a cover image.', 'generatify' );
?>
                </p>
              </div>
              <div class="group group-has-[[data-attachment-input]:placeholder-shown]/attachment:hidden flex relative items-center justify-center rounded-xl w-full h-40 overflow-hidden">
                <img class="flex-shrink-0 size-full object-cover" src="<?php 
echo esc_url( wp_get_attachment_url( Utils::getSetting( 'aiHelpdeskAgentCover' ) ) );
?>" alt="<?php 
esc_html_e( 'Cover', 'generatify' );
?>" data-attachment-image />
                <span class="opacity-0 group-hover:opacity-100 flex absolute size-full items-center justify-center bg-black/45 transition cursor-pointer" data-attachment-delete>
                  <span class="size-5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm hover:bg-gray-50 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-50">
                    <svg class="flex-shrink-0 size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M18 6 6 18"></path>
                      <path d="M6 6 18 18"></path>
                    </svg>
                  </span>
                </span>
              </div>
              <input type="text" name="aiHelpdeskAgentCover" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentCover' ) );
?>" class="!block absolute pointer-events-none w-px left-0 appearance-none opacity-0" placeholder="" data-attachment-input />
            </div>
          </div>
          <div id="settingIcon">
            <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
              <?php 
esc_html_e( 'Icon', 'generatify' );
?>
              <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                </svg>
                <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                  <?php 
esc_html_e( 'Upload an icon representing your site. Ideally your help desk icon should be the logo or favicon of your website.', 'generatify' );
?>
                </span>
              </button>
            </label>
            <div class="group/attachment relative flex items-center justify-start" data-dp-image-attachment='{
              "mimes": "png,jpg,jpeg,webp"
            }'>
              <span class="hidden group-has-[[data-attachment-input]:placeholder-shown]/attachment:flex flex-shrink-0 justify-center items-center size-20 border-2 border-dotted border-gray-300 text-gray-400 rounded-full cursor-pointer" data-attachment-placeholder>
                <svg class="flex-shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                  <circle cx="9" cy="9" r="2"></circle>
                  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
                </svg>
              </span>
              <div class="group group-has-[[data-attachment-input]:placeholder-shown]/attachment:hidden flex relative items-center justify-center overflow-hidden size-20 rounded-full">
                <img class="flex-shrink-0 size-full rounded-full border border-gray-200 shadow-sm" src="<?php 
echo esc_url( wp_get_attachment_url( Utils::getSetting( 'aiHelpdeskAgentIcon' ) ) );
?>" alt="<?php 
esc_html_e( 'Icon', 'generatify' );
?>" data-attachment-image />
                <span class="opacity-0 group-hover:opacity-100 flex absolute size-full items-center justify-center bg-black/45 transition cursor-pointer" data-attachment-delete>
                  <span class="size-5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm hover:bg-gray-50 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-50">
                    <svg class="flex-shrink-0 size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M18 6 6 18"></path>
                      <path d="M6 6 18 18"></path>
                    </svg>
                  </span>
                </span>
              </div>
              <input type="text" name="aiHelpdeskAgentIcon" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentIcon' ) );
?>" class="!block absolute pointer-events-none w-px left-0 appearance-none opacity-0" placeholder="" data-attachment-input />
            </div>
          </div>
          <div class="relative" data-dp-tabs>
            <nav class="inline-flex gap-1 p-0.5 w-full relative bg-gray-100 rounded-lg mb-5">
              <button type="button" class="data-[active]:bg-white data-[active]:shadow py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm text-gray-800 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" data-dp-tab-toggle="home">
                <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
                <?php 
esc_html_e( 'Home', 'generatify' );
?>
              </button>
              <button type="button" class="data-[active]:bg-white data-[active]:shadow py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm text-gray-800 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" data-dp-tab-toggle="message">
                <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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
                  <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
                </svg>
                <?php 
esc_html_e( 'Message', 'generatify' );
?>
              </button>
              <button type="button" class="data-[active]:bg-white data-[active]:shadow py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm text-gray-800 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" data-dp-tab-toggle="help">
                <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"></circle>
                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                  <path d="M12 17h.01"></path>
                </svg>
                <?php 
esc_html_e( 'Help', 'generatify' );
?>
              </button>
            </nav>
            <div class="hidden data-[active]:block space-y-6" data-dp-tab-content="home">
              <!-- Title -->
              <div id="settingHomeTitle">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
esc_html_e( 'Title', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Title which will be displayed on the home tab of your helpdesk agent.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <input name="aiHelpdeskAgentHomeTitle" type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Enter Title', 'generatify' );
?>" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentHomeTitle' ) );
?>" autocomplete="off">
              </div>
              <!-- End Title -->
              <!-- Tagline -->
              <div id="settingHomeTagline">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
esc_html_e( 'Tagline', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Tagline which will be displayed on the home tab of your helpdesk agent.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <input name="aiHelpdeskAgentHomeTagline" type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Enter Tagline', 'generatify' );
?>" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentHomeTagline' ) );
?>" autocomplete="off">
              </div>
              <!-- End Tagline -->
              <!-- Button Text -->
              <div id="settingHomeButtonText">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
esc_html_e( 'Button Text', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Button text which will be displayed on the message button of your helpdesk agent.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <input name="aiHelpdeskAgentHomeButtonText" type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Enter Button Text', 'generatify' );
?>" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentHomeButtonText' ) );
?>" autocomplete="off" required>
              </div>
              <!-- End Button Text -->
              <!-- Popular Topics -->
              <div id="settingHomePopularTopics" class="<?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '*:pointer-events-none [&_[data-dp-tooltip]]:pointer-events-auto cursor-pointer"data-needs-active-pro="true' : '' );
?>">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '<span class="mr-1.5 inline-flex items-center gap-1.5 pt-[3px] pb-1 px-1.5 rounded-lg text-[10px] leading-none font-medium bg-blue-600 text-white">Pro</span>' : '' );
?>
                  <?php 
esc_html_e( 'Popular Topics', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Add up to three popular topics for your helpdesk agent to suggest to users by default. These might be FAQs, tips, or other relevant information you have as a page.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <?php 
?>
                <div class="space-y-3">
                  <div class="flex gap-2">
                    <div class="flex-none w-1/5">
                      <input type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Title', 'generatify' );
?>">
                    </div>
                    <div class="flex-none w-1/3">
                      <input type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Description', 'generatify' );
?>">
                    </div>
                    <div class="flex-grow">
                      <input type="url" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none [&::-webkit-calendar-picker-indicator]:!hidden" placeholder="<?php 
esc_html_e( 'URL', 'generatify' );
?>">
                    </div>
                    <div class="flex-none flex items-center ml-1.5">
                      <button type="button" class="py-1 px-1 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-gray-100 border border-transparent text-gray-600 hover:bg-gray-200 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-200" data-dp-copy-markup-delete="popularTopic">
                        <svg class="block flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M18 6 6 18"></path>
                          <path d="m6 6 12 12"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="mt-3 text-end">
                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-50">
                    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" />
                      <path d="M12 5v14" />
                    </svg>
                    <?php 
esc_html_e( 'Add Popular Topic', 'generatify' );
?>
                  </button>
                </div>
                <?php 
?>
              </div>
              <!-- End Popular Topics -->
            </div>
            <div class="hidden data-[active]:block space-y-6" data-dp-tab-content="message">
              <!-- Mode -->
              <div id="settingMessageMode">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
esc_html_e( 'Mode', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Select the mode for the helpdesk agent message. Contact mode will display a simple form to send an email, while Conversation mode will allow direct chat with the chatbot.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <select name="aiHelpdeskAgentMessageMode" required="true" data-dp-select='{
                  "placeholder": "<?php 
esc_html_e( 'Select Mode', 'generatify' );
?>"
                }'>
                  <option value="contact" <?php 
echo 'selected="selected"';
?> data-dp-select-option='{
                    "icon": "<svg class=\"flex-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=\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"/><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/></svg>",
                    "description": "<?php 
esc_html_e( 'Displays a contact form that sends an email.', 'generatify' );
?>"
                  }'><?php 
esc_html_e( 'Contact', 'generatify' );
?></option>
                  <option value="conversation" <?php 
?> data-dp-select-option='{
                    "needsActivePro": true,
                    "icon": "<svg class=\"flex-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=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\"/></svg>",
                    "description": "<?php 
esc_html_e( 'Enables chatting with helpdesk agent chatbot.', 'generatify' );
?>"
                  }'><?php 
esc_html_e( 'Conversation', 'generatify' );
?></option>
                </select>
              </div>
              <!-- End Mode -->
              <div class="space-y-6" data-dp-dependant-markup='{
                "field": "aiHelpdeskAgentMessageMode",
                "value": "conversation",
                "mode": "visibility"
              }'>
                <!-- Knowledge -->
                <div id="settingMessageKnowledge">
                  <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                    <?php 
esc_html_e( 'Knowledge', 'generatify' );
?>
                    <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                      <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                      </svg>
                      <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                        <?php 
esc_html_e( 'The helpdesk assistant will know titles and links for all available public pages on your website. However, you can also select up to 3 specific pages for which it will also have content available to provide additional context. These should be pages that include key information that the helpdesk agent can use to have context and provide better responses.', 'generatify' );
?>
                      </span>
                    </button>
                  </label>
                  <select name="aiHelpdeskAgentMessageKnowledge" multiple="true" data-dp-select='{
                  "placeholder": "<?php 
esc_html_e( 'Select Knowledge', 'generatify' );
?>",
                  "hasSearch": true,
                  "maxSelections": 3
                }'>
                    <?php 
$pages = get_pages( [
    'post_status' => 'publish',
    'sort_column' => 'post_modified',
    'sort_order'  => 'DESC',
    'number'      => 500,
] );
?>
                    <?php 
foreach ( $pages as $page ) {
    ?>
                    <option value="<?php 
    echo esc_attr( $page->ID );
    ?>" <?php 
    selected( true, in_array( $page->ID, (array) Utils::getSetting( 'aiHelpdeskAgentMessageKnowledge' ) ) );
    ?> data-dp-select-option='{
                    "description": "<?php 
    echo esc_url( str_replace( home_url( '', 'https' ), '', get_permalink( $page->ID ) ) );
    ?>"
                  }'><?php 
    echo esc_html( $page->post_title );
    ?></option>
                    <?php 
}
?>
                  </select>
                </div>
                <!-- End Knowledge -->
                <!-- Custom Instructions -->
                <div id="settingMessageInstructions">
                  <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                    <?php 
esc_html_e( 'Custom Instructions', 'generatify' );
?>
                    <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                      <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                      </svg>
                      <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                        <?php 
esc_html_e( 'You can provide additional clear and concise instructions for the AI model to follow about what language should it speak, what tone to use, and any specific guidelines to adhere to.', 'generatify' );
?>
                      </span>
                    </button>
                  </label>
                  <textarea name="aiHelpdeskAgentMessageCustomInstructions" class="overflow-hidden resize-none py-2 px-3 block w-full min-h-24 border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none [field-sizing:content]" placeholder="<?php 
esc_html_e( 'Enter Instructions', 'generatify' );
?>" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="8000"><?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentMessageCustomInstructions' ) );
?></textarea>
                </div>
                <!-- End Custom Instructions -->
              </div>
              <div class="space-y-6" data-dp-dependant-markup='{
                "field": "aiHelpdeskAgentMessageMode",
                "value": "contact",
                "mode": "visibility"
              }'>
                <!-- Contact Email -->
                <div id="settingMessageContactEmail">
                  <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                    <?php 
esc_html_e( 'Contact Email', 'generatify' );
?>
                    <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                      <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                      </svg>
                      <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                        <?php 
esc_html_e( 'Specify the full email address where the contact inquiries will be sent.', 'generatify' );
?>
                      </span>
                    </button>
                  </label>
                  <input name="aiHelpdeskAgentMessageContactEmail" type="email" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Enter Contact Email', 'generatify' );
?>" value="<?php 
echo esc_attr( Utils::getSetting( 'aiHelpdeskAgentMessageContactEmail' ) );
?>" autocomplete="off" required>
                </div>
                <!-- End Contact Email -->
              </div>
            </div>
            <div class="hidden data-[active]:block space-y-6" data-dp-tab-content="help">
              <!-- Help Articles -->
              <div id="settingHelpArticles">
                <label class="inline-flex items-center mb-1.5 text-sm font-medium text-gray-800">
                  <?php 
esc_html_e( 'Help Articles', 'generatify' );
?>
                  <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                    <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                    </svg>
                    <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                      <?php 
esc_html_e( 'Add help articles for your helpdesk agent that will be available in the Help section. These can include FAQs, tips, or other relevant information from your site that users may find useful when seeking assistance.', 'generatify' );
?>
                    </span>
                  </button>
                </label>
                <div class="space-y-3" data-dp-copy-markup-wrapper="aiHelpdeskAgentHelpArticles">
                  <div class="flex gap-2" data-dp-copy-markup-target="aiHelpdeskAgentHelpArticle">
                    <div class="flex-none w-1/5">
                      <input name="aiHelpdeskAgentHelpArticles[title]" type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Title', 'generatify' );
?>">
                    </div>
                    <div class="flex-none w-1/3">
                      <input name="aiHelpdeskAgentHelpArticles[description]" type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none" placeholder="<?php 
esc_html_e( 'Description', 'generatify' );
?>">
                    </div>
                    <div class="flex-grow">
                      <input name="aiHelpdeskAgentHelpArticles[url]" type="url" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none [&::-webkit-calendar-picker-indicator]:!hidden" placeholder="<?php 
esc_html_e( 'URL', 'generatify' );
?>">
                    </div>
                    <div class="flex-none flex items-center ml-1.5">
                      <button type="button" class="py-1 px-1 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-gray-100 border border-transparent text-gray-600 hover:bg-gray-200 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-200" data-dp-copy-markup-delete="aiHelpdeskAgentHelpArticle">
                        <svg class="block flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M18 6 6 18"></path>
                          <path d="m6 6 12 12"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="mt-3 text-end">
                  <button type="button" data-dp-copy-markup='{
                  "wrapper": "aiHelpdeskAgentHelpArticles",
                  "target": "aiHelpdeskAgentHelpArticle",
                  "firstShown": true
                }' class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none focus:outline-none focus:bg-gray-50">
                    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" />
                      <path d="M12 5v14" />
                    </svg>
                    <?php 
esc_html_e( 'Add Help Article', 'generatify' );
?>
                  </button>
                </div>
              </div>
              <!-- End Help Articles -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>