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

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

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