---
title:
  type: 'string'
url:
  type: 'string'
placeholder:
  type: 'string'
  default: ''
---
<div class="d-flex flex-column bg-primary bg-md-white p-3">
  <div class="d-flex align-items-center justify-content-start">
    <p class="ps-2">{{ title }}</p>
  </div>
  <div class="d-flex align-items-center position-relative pb-3 px-3 right-0 pl-0 zindex-dropdown">
    <div class="d-flex w-100">
      <div class="d-flex w-40px p-2 bg-light">
        {% render 'svg/search.svg', class: 'purple w-35px' %}
      </div>
      <form class="w-100" action="{{ url | component_escape }}" method="get" data-pagefind-target="form">
        <input type="search" class="form-control w-100 p-2" placeholder="{{ placeholder | escape_once }}" name="q">
      </form>
    </div>
  </div>
</div>