<template>
  <div
    id="page-content-wrapper"
    class="main"
  >
    <h2>Browse Condensates</h2>

    <fetch-all-condensates>
      <template slot-scope="{response, loading}">
        <div v-if="loading">
          Loading...
        </div>
        <div v-else-if="response">
          <div v-show="response.count === 0">
            No results!
          </div>
          <data-table
            v-show="response.count > 0"
            id="condensateTable"
            category="condensate"
            :data="response.data"
          />
        </div>
      </template>
    </fetch-all-condensates>
  </div>
</template>

<script>
import FetchAllCondensates from "@/components/DDCODE/fetchAllCondensates";
import DataTable from '@/components/DataTableCondensate.vue'
const _ = require('lodash')

export default {
  name: 'BrowsePage',
  components: {
    FetchAllCondensates, DataTable
  },
  props: {
    msg: String
  },
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');
@import url('~@/assets/datatable.css');

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

input[type="radio"] {
  margin: 2px;
}

.radio-label {
  margin-left: 0px;
  margin-right: 5px;
}
</style>