<q-banner v-if="updateAvailable" class="bg-primary text-white">
  <q-icon size="28px" name="update"></q-icon>

  <span v-text="$t('update_available', {version: statusData.version})"></span>
  <template v-slot:action>
    <a
      class="q-btn"
      color="white"
      target="_blank"
      rel="noopener noreferrer"
      href="https://github.com/lnbits/lnbits/releases"
      v-text="$t('releases')"
    ></a>
  </template>
</q-banner>
<q-banner v-if="!updateAvailable" class="bg-green text-white">
  <q-icon size="28px" name="checkmark"></q-icon>
  <span v-text="$t('latest_update', {version: statusData.version})"></span>
</q-banner>
<q-card>
  <q-card-section>
    <q-table
      dense
      flat
      :rows="statusData.notifications"
      :columns="statusDataTable.columns"
      :no-data-label="$t('no_notifications')"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width> </q-th>
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            v-text="col.label"
          ></q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width class="text-center">
            <q-icon
              v-if="props.row.type === 'update'"
              size="18px"
              name="update"
              color="green"
            ></q-icon>
            <q-icon
              v-if="props.row.type === 'warning'"
              size="18px"
              name="warning"
              color="red"
            ></q-icon>
          </q-td>
          <q-td
            auto-width
            key="date"
            :props="props"
            v-text="formatDate(props.row.date)"
          >
          </q-td>
          <q-td key="message" :props="props"
            ><span v-text="props.row.message"></span
            ><a
              v-if="props.row.link"
              target="_blank"
              rel="noopener noreferrer"
              :href="props.row.link"
              v-text="$t('more')"
            ></a
          ></q-td>
        </q-tr>
      </template>
    </q-table>
  </q-card-section>
</q-card>
