<template>
  <b-row>
    <b-col md='12' class="text-right">
      <b-button variant="primary" class="text-light" @click="showModal">
        <font-awesome-icon icon="plus" />
        Nova oferta
      </b-button>
    </b-col>
    <b-col md="12">
      <table class="table table-responsive table-custom">
        <thead>
        <tr class="akkurat-regular text-center">
          <th>Campanha</th>
          <th>Produto</th>
          <th>Criação</th>
          <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{row.product_per_campaign.campaign.name}}</td>
          <td>{{row.product_per_campaign.product.name}}</td>
          <td>{{row.created_at | formatDateTimeDDMMAAAA}}</td>
          <td>
            <div class="justify-content-between d-flex">
              <b-button variant="primary" class="text-light mr-2" @click="edit(row.id)">
                <font-awesome-icon icon="edit" />
              </b-button>
              <b-button variant="primary" class="text-light" @click="remove(row)">
                <font-awesome-icon icon="trash" />
              </b-button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <b-spinner v-if="loading" type="grow" label="Spinning"></b-spinner>
      <b-alert v-if="!rows.length && !loading" variant="primary" show>
        não há ofertas para mostrar
      </b-alert>
    </b-col>

    <offers-detail @success="search" />

  </b-row>
</template>

<script lang="js" src="./last-time-offers.js" />
<style scoped lang="scss">
  @import "@/assets/css/main.scss";
</style>
