<template>
  <div class="modal-content">
    <!-- contents -->
    <div class="modal-header">
      <h5 class="modal-title h4">{{ $t('sdl.common.label.integratedSearch') }}</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="$emit('close');"></button>
    </div>
    <div class="modal-body">
      <form>
        <div class="ui--utility-search mb-4">
          <label for="exampleSearch" class="form-label visually-hidden">검색어</label>
          <i class="bi bi-search ui--icon-search"></i>
          <input type="text" class="form-control" id="exampleSearch" placeholder="검색어를 입력하세요">
          <button type="button" class="btn ui--btn-clear" style="display:none;"><i class="bi bi-x-lg"></i></button><!-- input에 텍스트 입력 시 button 활성 -->
        </div>
      </form>
      <h6 class="mb-2">인기 검색어</h6>
      <div class="list-group mb-4">
        <a href="#" class="list-group-item list-group-item-action">세탁기</a>
        <a href="#" class="list-group-item list-group-item-action">비스코스냉장고</a>
        <a href="#" class="list-group-item list-group-item-action">에어컨</a>
      </div>
      <h6 class="mb-2">최근 검색어</h6>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">세탁기</a>
        <a href="#" class="list-group-item list-group-item-action">비스코스냉장고</a>
        <a href="#" class="list-group-item list-group-item-action">에어컨</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sdlSearchPopup',
};
</script>