<?php
/**
 * Mageplaza
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Mageplaza.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageplaza.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Mageplaza
 * @package     Mageplaza_Faqs
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */

use Mageplaza\Faqs\Block\Article\Search;

/** @var Search $block */
?>
<?php if ($block->helperData->getConfigGeneral('search_box/enabled')) : ?>
    <div class="block mpfaqs-search mpfaqs">
        <div class="card-panel">
            <div class="block mpfaqs-search__title white-text center-align">
                <h1><?= $block->helperData->getConfigGeneral('search_box/title') ? $block->escapeHtml($block->helperData->getConfigGeneral('search_box/title')) : $block->escapeHtml(__('Knowledge Base')) ?></h1>
                <span><?= $block->helperData->getConfigGeneral('search_box/description') ? $block->escapeHtml($block->helperData->getConfigGeneral('search_box/description')) : $block->escapeHtml(__('Search our articles or browse by category below')) ?></span>
            </div>
            <div class="mpfaqs-search__field">
                <i class="fa fa-search grey-text lighten-3"></i>
                <input id="mpfaqs-search__field__searchbox"
                       class="white"
                       name="mpfaqs-search__field__searchbox"
                       type="text"
                       placeholder="<?= $block->escapeHtmlAttr(__('How do we help?')) ?>"
                />
                <div class="mpfaqs-search__action">
                    <a class="waves-effect waves-light btn grey darken-4" title="<?= $block->escapeHtmlAttr(__('Search')) ?>">
                        <?= $block->escapeHtml(__('Search')) ?>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require(['jquery', 'search'], function ($, search) {
            var config = {
                layout: '<?= /** noEscape */ $block->getActionName() ?>',
                lookup: <?=  /** noEscape */ $block->getSearchFaqData() ?>,
                searchUrl: '<?= /** noEscape */ $block->getSearchAjaxUrl()?>'
            };
            search(config);
        });
    </script>
<?php endif; ?>
