{% extends "templates/sink.nunjucks" %}
{% block body %}
  <style media="screen">
      .luci-example .luci-col-example {
        border-radius: {{ luci_tokens.border.radius.default }};
        padding: 10px;
        background-color: {{ luci_tokens['background-color'].dark }};
        text-align: center;
        color: {{ luci_tokens['text-color'].primary['on-dark'] }};
      }
      .luci-example .luci-col-example .luci-col-example {
        background-color: {{ luci_tokens['background-color'].light }};
        color: {{ luci_tokens['text-color'].primary['on-light'] }};
      }
  </style>

    <h2 class="sink-page-header">Searches Sink</h2>
    
    <h2 class="sink-page-header">Default Search</h2>
    {{ luci.search(search_id="search_input_1", search_label="Search") }}

    <h2 class="sink-page-header">Search with Auto-Suggest</h2>
    {{ luci.notification(class="luci-notification--warning", text='<b>Prototype behavior:</b> Enter the term "FAS" in the search input below.') }}
    {{ luci.search(search_id="search_input_2", autosuggest=true, search_label="Search") }}
    

    <h2 class="sink-page-header">Search with placeholder text</h2>
    {{ luci.search(search_id="search_input_3", search_placeholder="Search lorem ipsum data", search_label="Search lorem ipsum data") }}

    <h2 class="sink-page-header">Search Small Variation</h2>
    {{ luci.search(class="luci-search--sm", search_id="search_input_4", search_placeholder="Search lorem ipsum data", search_label="Search lorem ipsum data", button_class="luci-button--small") }}

    <h2 class="sink-page-header">Search within grid layout</h2>
    <div class="luci-example">
      <div class="luci-grid__container--xl">
        <div class="luci-grid">
          <div class="luci-grid__col luci-grid__col-8 luci-col-example sink-page-font-reset">8</div>
          <div class="luci-grid__col luci-grid__col-4">
            {{ luci.search(search_id="search_input_5", search_label="Search") }}
          </div>
        </div>
      </div>
    </div>
    
{% endblock body %}