<template>
  <div :class="['search-item', {'active': active}]">
    <i class="fas fa-bars text-x-small text-gray left-margin-medium right-margin-x-small cursor-grab"></i>
    <div v-if="thumb" class="search-item-image">
      <img :src="thumb" :alt="description" />
    </div>
    <div class="search-item-content">
      <span class="search-item-title">{{ description }}</span>
      <span v-if="secondDescription" class="search-item-title">{{ secondDescription }}</span>
      <span class="search-item-code">{{ id }}</span>
    </div>
    <button type="button" class="search-item-button"></button>
  </div>
</template>

<style src="../../../identity.css"></style>
<style scoped src="./styles.css"></style>

<script src="./scripts.js"></script>