<template>
  <div class="card">
    <div class="p-3 pb-0 card-header">
      <h6 class="mb-0">Next events</h6>
    </div>
    <div class="p-3 card-body border-radius-lg">
      <div class="d-flex">
        <div>
          <div
            class="text-center shadow shadow-none icon icon-shape bg-danger-soft border-radius-md"
          >
            <i
              class="text-lg ni ni-money-coins text-danger text-gradient opacity-10"
              aria-hidden="true"
            ></i>
          </div>
        </div>
        <div class="ms-3">
          <div class="numbers">
            <h6 class="mb-1 text-sm text-dark">Cyber Week</h6>
            <span class="text-sm">27 March 2021, at 12:30 PM</span>
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex">
        <div>
          <div
            class="text-center shadow shadow-none icon icon-shape bg-primary-soft border-radius-md"
          >
            <i
              class="text-lg ni ni-bell-55 text-primary text-gradient opacity-10"
              aria-hidden="true"
            ></i>
          </div>
        </div>
        <div class="ms-3">
          <div class="numbers">
            <h6 class="mb-1 text-sm text-dark">Meeting with Marry</h6>
            <span class="text-sm">24 March 2021, at 10:00 PM</span>
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex">
        <div>
          <div
            class="text-center shadow shadow-none icon icon-shape bg-success-soft border-radius-md"
          >
            <i
              class="text-lg ni ni-books text-success text-gradient opacity-10"
              aria-hidden="true"
            ></i>
          </div>
        </div>
        <div class="ms-3">
          <div class="numbers">
            <h6 class="mb-1 text-sm text-dark">Book Deposit Hall</h6>
            <span class="text-sm">25 March 2021, at 9:30 AM</span>
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex">
        <div>
          <div
            class="text-center shadow shadow-none icon icon-shape bg-warning-soft border-radius-md"
          >
            <i
              class="text-lg ni ni-delivery-fast text-warning text-gradient opacity-10"
              aria-hidden="true"
            ></i>
          </div>
        </div>
        <div class="ms-3">
          <div class="numbers">
            <h6 class="mb-1 text-sm text-dark">Shipment Deal UK</h6>
            <span class="text-sm">25 March 2021, at 2:00 PM</span>
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex">
        <div>
          <div
            class="text-center shadow shadow-none icon icon-shape bg-info-soft border-radius-md"
          >
            <i
              class="text-lg ni ni-palette text-info text-gradient opacity-10"
              aria-hidden="true"
            ></i>
          </div>
        </div>
        <div class="ms-3">
          <div class="numbers">
            <h6 class="mb-1 text-sm text-dark">
              Verify Dashboard Color Palette
            </h6>
            <span class="text-sm">26 March 2021, at 9:00 AM</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "events-card",
};
</script>
