<script setup>
defineProps(['conditions']);
</script>

<template>

  <div v-if="conditions.length > 0" class="w-full h-auto relative">
    <div
      class="bg-white  px-5 py-3.5 rounded-lg shadow hover:shadow-xl max-w-prose mx-auto transform hover:-translate-y-[0.125rem] transition duration-100 ease-linear">
      <div class="w-full flex items-center justify-between">
        <span class="font-medium text-sm text-slate-400">Podmienky na vyhľadávanie</span>
        <button
          class="-mr-1 bg-slate-100 hover:bg-slate-200 text-slate-400 hover:text-slate-600 h-5 w-5 rounded-full flex justify-center items-center">
          <svg class="h-2 w-2 fill-current items-center" viewBox="0 0 20 20">
            <path
              d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
          </svg>
        </button>
      </div>
      <div class="flex items-center mt-2 rounded-lg px-1 py-1 cursor-pointer">
        
        <div class="ml-3">
          <div v-for="p in conditions">
            <div class="my-2 select-none flex">
              <div :class="'w-' + p.level*8">&nbsp;</div>

              <button v-if="p.level > 0" :class="p.count > 0 ? 'invisible' : ''"
                class="py-2 px-4 shadow-md no-underline rounded-full bg-green-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
                p.groupop }}</button>

              <button
                class="py-2 px-4 shadow-md no-underline rounded-full bg-blue-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
                p.pre }}</button>
              <button
                class="py-2 px-4 shadow-md no-underline rounded-full bg-orange-600 text-white font-sans font-semibold text-sm border-orange btn-primary hover:text-white hover:bg-orange-light focus:outline-none active:shadow-none mr-1">{{
                p.field.desc }}</button>
              <button
                class="py-2 px-4 shadow -md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
                p.criteria.name }}</button>
              <button
                class="py-2 px-4 shadow-md no-underline rounded-full bg-yellow-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
                p.value }}</button>
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>

  </div>
</template>