<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\CoreExtension;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* module/md_widget_quick_search/index.html */
class __TwigTemplate_f8e39211d86de2e84ac2d79e23fd7660 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->parent = false;

        $this->blocks = [
        ];
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        // line 1
        yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['LoftyIDX\includes\extensions\LoftyIDXTwigScriptExtension']->addViteScript($this->env, $context, "src/module/widget-quick-search/index.js", ["jquery"]), "html", null, true);
        yield "

<div id='";
        // line 3
        yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["moduleId"] ?? null), "html", null, true);
        yield "' class='lofty-widget-quick-search-container lofty-reset-style'>
  <div id=\"lofty-widget-quick-search-app\">
    <div class=\"lofty-widget-quick-search-preview ";
        // line 5
        yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["layout"] ?? null), "html", null, true);
        yield "\">
      <div class=\"location-input-wrap\">
        <i class=\"lofty_iconfont lofty-icon-search\"></i>
        <input class=\"location-input\" type=\"text\" placeholder=\"Location Search\">
      </div>
      ";
        // line 10
        $context['_parent'] = $context;
        $context['_seq'] = CoreExtension::ensureTraversable(($context["labels"] ?? null));
        foreach ($context['_seq'] as $context["_key"] => $context["label"]) {
            // line 11
            yield "        <div class=\"lofty-query-label\">
          <span>";
            // line 12
            yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["label"], "html", null, true);
            yield "</span>
          <i class=\"lofty_iconfont lofty-icon-arrow_08_down\"></i>
        </div>
      ";
        }
        $_parent = $context['_parent'];
        unset($context['_seq'], $context['_iterated'], $context['_key'], $context['label'], $context['_parent'], $context['loop']);
        $context = array_intersect_key($context, $_parent) + $_parent;
        // line 16
        yield "      <button class=\"lofty-search-btn\">Search</button>
    </div>
  </div>
  <input id='lofty-data' value='";
        // line 19
        yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["data"] ?? null), "html", null, true);
        yield "' type='hidden'/>
</div>
";
        // line 21
        yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['LoftyIDX\includes\extensions\LoftyIDXTwigScriptExtension']->renderScripts(), "html", null, true);
        yield "

<style>
  #lofty-widget-quick-search-app {
    width: 100%;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    height: 50px;
    border: 1px solid #dddddd;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap .lofty-icon-search {
    margin-left: 10px;
    color: #A8A8A8;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: inherit;
    padding: 0 5px;
    border: none;
    outline: 0;
    margin: 0;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input::placeholder {
    color: #aaaaaa;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input:focus {
    border: none !important;
    box-shadow: none !important;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .lofty-query-label {
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #dddddd;
    width: fit-content;
    padding: 0 10px;
    font-size: 14px;
    gap: 5px;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .lofty-query-label .lofty_iconfont {
    margin-left: auto;
    font-size: 14px;
  }
  #lofty-widget-quick-search-app .two-line {
    flex-wrap: wrap;
  }
  #lofty-widget-quick-search-app .two-line .location-input-wrap {
    width: 100%;
    flex: none;
  }
  #lofty-widget-quick-search-app .two-line .lofty-query-label {
    flex: 1;
  }
  #lofty-widget-quick-search-app .universal .lofty-query-label {
    flex: none;
  }

  .lofty-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    font-size: 14px;
    font-weight: 400;
    min-height: 40px;
    line-height: 100%;
    color: #fff;
    border: 0;
    text-align: center;
    cursor: pointer;
    padding: 0 20px;
    border: none;
  }

</style>";
        return; yield '';
    }

    /**
     * @codeCoverageIgnore
     */
    public function getTemplateName()
    {
        return "module/md_widget_quick_search/index.html";
    }

    /**
     * @codeCoverageIgnore
     */
    public function isTraitable()
    {
        return false;
    }

    /**
     * @codeCoverageIgnore
     */
    public function getDebugInfo()
    {
        return array (  83 => 21,  78 => 19,  73 => 16,  63 => 12,  60 => 11,  56 => 10,  48 => 5,  43 => 3,  38 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{{ vite_js('src/module/widget-quick-search/index.js', ['jquery']) }}

<div id='{{ moduleId }}' class='lofty-widget-quick-search-container lofty-reset-style'>
  <div id=\"lofty-widget-quick-search-app\">
    <div class=\"lofty-widget-quick-search-preview {{ layout }}\">
      <div class=\"location-input-wrap\">
        <i class=\"lofty_iconfont lofty-icon-search\"></i>
        <input class=\"location-input\" type=\"text\" placeholder=\"Location Search\">
      </div>
      {% for label in labels %}
        <div class=\"lofty-query-label\">
          <span>{{ label }}</span>
          <i class=\"lofty_iconfont lofty-icon-arrow_08_down\"></i>
        </div>
      {% endfor %}
      <button class=\"lofty-search-btn\">Search</button>
    </div>
  </div>
  <input id='lofty-data' value='{{ data }}' type='hidden'/>
</div>
{{ render_scripts()}}

<style>
  #lofty-widget-quick-search-app {
    width: 100%;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    height: 50px;
    border: 1px solid #dddddd;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap .lofty-icon-search {
    margin-left: 10px;
    color: #A8A8A8;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: inherit;
    padding: 0 5px;
    border: none;
    outline: 0;
    margin: 0;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input::placeholder {
    color: #aaaaaa;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .location-input-wrap input:focus {
    border: none !important;
    box-shadow: none !important;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .lofty-query-label {
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #dddddd;
    width: fit-content;
    padding: 0 10px;
    font-size: 14px;
    gap: 5px;
  }
  #lofty-widget-quick-search-app .lofty-widget-quick-search-preview .lofty-query-label .lofty_iconfont {
    margin-left: auto;
    font-size: 14px;
  }
  #lofty-widget-quick-search-app .two-line {
    flex-wrap: wrap;
  }
  #lofty-widget-quick-search-app .two-line .location-input-wrap {
    width: 100%;
    flex: none;
  }
  #lofty-widget-quick-search-app .two-line .lofty-query-label {
    flex: 1;
  }
  #lofty-widget-quick-search-app .universal .lofty-query-label {
    flex: none;
  }

  .lofty-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    font-size: 14px;
    font-weight: 400;
    min-height: 40px;
    line-height: 100%;
    color: #fff;
    border: 0;
    text-align: center;
    cursor: pointer;
    padding: 0 20px;
    border: none;
  }

</style>", "module/md_widget_quick_search/index.html", "/var/www/html/wp-content/plugins/lofty-idx-plugin-1773305082397/templates/module/md_widget_quick_search/index.html");
    }
}
