<template>
  <div class="flex flex-wrap mb-14 justify-center">
    <div class="w-5/6">
      <div class="p-4">
        <h2 class="font-bold">
          Biomolecular Condensates (Membrane-less Organelles)
        </h2>
      </div>

      <data-table
        id="condensateTable"
        category="condensate"
        :is-experimental="false"
      />
    </div>
  </div>
</template>

<script>
import DataTable from '@/components/Datatable/CondensateDataTable';
const _ = require('lodash');

export default {
  name: 'BiomolecularPage',
  components: {
    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 scoped>
@import url("~@/assets/bootstrap.css");
@import url("~@/assets/datatable.css");

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #ef0087 !important;
}

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

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

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